Product options and paid add-ons for Framer Shopify stores

Engraving, gift messages, dropdowns, swatches, checkboxes and dates on your Framer product pages. Answers land on the Shopify order, and paid extras like “Engraving +$10” are charged at checkout. No Globo app needed.

Start building freeRead the docs

What you can build with product options

Engraving, gift messages, swatches and paid extras on the product page.

01

10 field types

Text, textarea, number, dropdown, radio, pill buttons, image and color swatches, checkbox, checkbox group and date picker. Each one takes your Framer styles.

  • Required fields
  • Your fonts and colors
  • Error messages
02

Shown only when they apply

Show a field for one variant, an exact variant, one product, or after another answer. Hidden fields are never required and never sent.

  • By variant
  • By product
  • By another answer
03

Paid extras, charged by Shopify

A fee product is added under the item when the shopper picks a paid option. It follows the product quantity and leaves when the product is removed.

  • Per item or once
  • Fee per choice
  • Shown under the product

The 10 components

Open the FrameStoreKit plugin, drag one onto the canvas and style it in the right panel. Shopify data flows in.

All components
  • Option TextProShopifyOptionTextEngraving, monogram or name field saved on the order line.
  • Option TextareaProShopifyOptionTextareaGift message or special instructions.
  • Option NumberProShopifyOptionNumberA number input with min and max, like length or count.
  • Option SelectProShopifyOptionSelectA dropdown of choices, with an optional fee per choice.
  • Option RadioProShopifyOptionRadioOne choice from a short list.
  • Option Button GroupProShopifyOptionButtonGroupPill buttons for single or multiple choices.
  • Option Image ButtonProShopifyOptionImageButtonImage or color swatches to pick from.
  • Option CheckboxProShopifyOptionCheckboxA single yes/no extra like gift wrap, with an optional fee.
  • Option Checkbox GroupProShopifyOptionCheckboxGroupSeveral extras at once.
  • Option DateProShopifyOptionDateA delivery or event date picker.

Set up in 4 steps

The onboarding wizard walks you through it. The docs cover every Shopify setting with screenshots.

Product options guide
  1. 1Drop option fieldsAdd Option Text, Select, swatches or any of the 10 fields next to Add to Cart and bind the product handle.
  2. 2Set labels and rulesMark fields as required and show them only for a variant, like “Large”, or after another answer.
  3. 3Add paid optionsCreate a fee product in Shopify (for example “Engraving $10”) and paste its variant into the field.
  4. 4Publish and check the orderThe cart line shows the answers and the fee sits under the product.

Good to know

On the order and packing slipAnswers are saved as Shopify line item properties.
Paid optionsFees are added under the product, scale with quantity and go when the product is removed.
Styled like your siteEvery field takes your fonts, colors, borders and states.

Product options questions

Still unsure? Email us and a Framer + Shopify person will reply, usually the same day.

Yes. Drop Option Text on the product template. The shopper’s text is saved on the Shopify cart line and order as a line item property, like “Engraving: Jo”.

Related features

Quantity breaks & BOGOBuy 2 save 15%, buy 1 get 1 free, on native Shopify discounts.Frequently bought togetherCross-sells from Shopify Search & Discovery: FBT, cart and post-add upsells.Design controlFonts, colors, spacing and states on every component.

Say yes to the next Shopify project

Start free with 15 products. Upgrade when the client signs.

Start building free