---
title: "Product options, conditions and paid extras | FrameStoreKit"
canonical_url: "https://framestorekit.com/docs/product-options"
last_updated: "2026-10-21T15:06:29.892Z"
meta:
  description: "Set up product options in Framer, show gift messages with checkbox conditions, configure paid extras and verify Add to Cart behavior."
  "og:description": "Set up product options in Framer, show gift messages with checkbox conditions, configure paid extras and verify Add to Cart behavior."
  "og:title": "Product options, conditions and paid extras | FrameStoreKit"
---

FrameStoreKit home

# Product options and paid extras

Add engraving, gift messages, choices and delivery dates to your product page. Save answers on the cart line and order, and charge for selected extras.

## 1. Add option fields

Place option fields beside Add to Cart on your product CMS template. Choose a field for each answer you need:

| Component | Use it for |
| --- | --- |
| Option Text | Name, engraving or monogram |
| Option Textarea | Gift message or special instructions |
| Option Number | Numeric answers with minimum and maximum values |
| Option Select | A dropdown such as font or finish |
| Option Radio | One choice from a short list |
| Option Button Group | Text buttons for one or several choices |
| Option Image Button | Image or color swatches |
| Option Checkbox | A yes/no extra such as gift wrap |
| Option Checkbox Group | Several extras selected together |
| Option Date | A delivery date or date range |

1. Bind **Product Handle** to the product's CMS Handle. Use the same product handle on the option fields and Add to Cart.
2. Give each field a unique **Name**, such as `giftWrap` or `message`. Use camelCase or snake_case with no spaces. Conditions refer to this exact name.
3. Set the shopper-facing **Label**. Set **Cart Label** if the answer should use a different name on the cart line and order.
4. Turn on **Required** when an answer is needed. Add to Cart displays validation errors and waits for valid answers.

Add to Cart, Quantity Breaks, Buy X Get Y and Frequently Bought Together collect the product's options. Keep one set of option fields per product page.

## 2. Show a gift message when Gift Wrap is checked

Add an **Option Checkbox** with these settings:

- **Name:** `giftWrap`
- **Label:** Gift Wrap
- **Checked Value:** `yes`
- **Unchecked Value:** `no`

Add an **Option Textarea** with **Name** `message` and **Label** Message. In its **Conditions**, add:

- **Field Name:** `giftWrap`
- **Operator:** equals
- **Value:** `yes`
- **When Conditions Pass:** Show Field

Checking Gift Wrap reveals Message immediately. Unchecking it hides Message without refreshing the page. You can mark Message Required: it only blocks Add to Cart while the field is active.

Field names are case-sensitive. Use `giftWrap` in the condition, matching the Checkbox's Name exactly. Both fields must share the same product handle and, if customized, the same form ID.

### Combine rules and choose an action

**Match Mode** uses **All (AND)** when every rule must pass, or **Any (OR)** when one passing rule is enough.

- **Show Field:** show the field when conditions pass; hide it otherwise.
- **Hide Field:** hide the field when conditions pass; show it otherwise.
- **Enable Field:** enable editing when conditions pass; disable it otherwise.
- **Disable Field:** disable editing when conditions pass; enable it otherwise.

Hidden and conditionally disabled fields do not block required validation, add cart properties or generate fees. Their answers are retained and restored when the fields become active again.

### Other condition sources

- Another field's exact Name, compared with its answer. Checkbox rules use the configured Checked and Unchecked Values; existing `true`/ `false` rules also work.
- `variant.Size` equals `Large` to show a field for that variant option. Replace Size with your Shopify option's exact name.
- `variant.id` to target a specific Shopify variant ID.
- `product.handle` to target one product on a shared CMS template.

Missing fields and empty answers do not pass ordinary comparisons, including “not equals.” Use **Is Empty** to check an existing empty field explicitly.

## 3. Charge for selected extras

1. In Shopify, create a product for the fee, such as Engraving fee at $10, and make it available on the **Headless** sales channel.
2. Keep fee products out of the collections you sync into your product catalog.
3. Copy the fee product variant ID and paste it into the field's **Fee Variant**. A full ID such as `gid://shopify/ProductVariant/123456789` or the numeric variant ID is accepted.
4. Choose **Fee Charged**: **Per item** charges for each product unit; **Once per order line** charges once for that product line.

For example, two mugs with a $10 engraving fee cost $20 in fees with Per item, or $10 with Once per order line. A field fee applies when it has an active value; an unchecked Checkbox does not add its fee.

For Select, Radio, Button Group, Image Button and Checkbox Group, use **Choice Fees** to map each choice's stored value to its fee variant. Match the choice value exactly. Use a field fee for a charge shared by all answers; choice fees add charges for specific selections. Configuring both adds both charges.

The Add to Cart price updates as active paid selections change. Hiding or disabling a paid field removes its fee from the current selection. In the cart, fee lines appear under their product. Per-item fees follow product quantity changes, and removing the product removes its fee lines.

## 4. Publish and check the result

1. Publish your Framer site and open a product page.
2. Check and uncheck Gift Wrap. Confirm Message appears and disappears immediately.
3. With Message Required, leave it empty while visible: Add to Cart should show an error. Hide it by unchecking Gift Wrap: Add to Cart should work.
4. Enter a message, hide it, then show it again. Confirm the answer is restored.
5. Select paid options and check the Add to Cart total. Hide a paid field and confirm its fee is removed from the current total.
6. Add the product, then check its properties and fee lines in the cart. Hidden answers and their fees should be absent. Change quantity to check Per item and Once per order line behavior.

### If a condition does not update

Check the exact field Name, Checked/Unchecked Values, product handle and condition action. Canvas keeps conditional fields available for styling; verify their actual behavior in Preview and on the published page.

If your project uses older uploaded code components, update all affected option components and their shared files in Framer, then publish again. Updating local source files or syncing Shopify products does not update code already uploaded to Framer.

## Sitemap

See the full [sitemap](/sitemap.md) for all pages.