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:

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.

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.