Add-ons, colors, accessories & external actions

Optical Form has four mechanisms to monetize and route beyond a plain selection. Don’t mix them up.

Add-ons (per option)

An add-on is a Shopify product linked to one specific option. When the customer picks that option, the add-on is added to the cart as a separate line item and adds its price to the live total.

• Configured in the Add-ons section of each option.
• Each add-on has a quantity — set 2 for items billed in pairs (e.g. lenses).
• Its price is the surcharge, not the total: the frame already has its own. See Pricing and charging.
• Typical examples: the lens type, a treatment (anti-reflective, blue filter), a fitting service.

Create products for add-ons

Add-ons are real Shopify products. Create them for lens types, treatments and services with the Unlisted status (purchasable, but absent from collections and search; an unpublished or Draft product can’t be added to the cart), then link them. That way Shopify bills them, includes them on the order and sends them to your lab.

Add-ons belong to this store

An add-on stores the ID Shopify gave that product in your store, and that number doesn’t exist in any other. That’s why add-ons are not copied when you export a form to another store, and why the sample template ships without them: you link your own products. Full explanation in Copying a form to another store.

Add-ons are all charged; colors, only the chosen one

If you link several variants of the same product as add-ons — gray, amber and green of one tint — a customer who picks that option gets all three in the cart and pays for all three. Almost always what you wanted was for them to pick one: that is what selectable colors are for. The editor spots it and offers the fix with a notice and a button, Make them selectable colors; the picker opens with those variants already ticked and, on confirm, they move from add-ons to colors. Cancel and nothing changes.

Selectable colors (per option)

An option can carry a row of color swatches underneath: perfect for polarized, tinted or photochromic lenses that come in several colors. The customer taps a color and only that color is charged — unlike add-ons, which all apply, colors are alternatives. Tapping the card without picking a color only opens it (dashed border and the “Choose a color to continue” line): the option counts as chosen once the customer taps a color.

• Configured in the Selectable colors section of each option, with the same product picker as add-ons: each color is a Shopify variant, with its own SKU and price. That way Shopify bills it, includes it on the order and your lab receives the exact reference of the chosen color.
• Each color has a name (what the customer reads, translatable like any other text) and a swatch, which is the variant’s own image: give each color variant its swatch photo in Shopify and there is nothing else to set up. Only when a variant has no image is the CSS color field used — #8b5a2b, or a gradient like linear-gradient(#555, #ddd).
• If the colors have different prices, the card shows the cheapest until the customer picks — it never advertises less than what they may end up paying.
• Hovering a dot shows its name (and the surcharge, if you leave that on under Design › Options); if the colors cost different amounts, the card says “From” until the customer picks.
• The customer cannot continue without picking a color: an option with colors and no color is half a choice, and the order would leave without the reference your lab needs.
• Every option — and every color group — accepts a help text: a “?” appears next to the title that the customer opens to read a longer explanation. See Build a form.

Add-on or color?

Use an add-on for something the option always includes (a treatment, a service). Use colors when the option comes in several versions and the customer must pick exactly one.

What’s sold out shows before it’s chosen

When the configurator opens, the app checks the stock of every add-on, colour and accessory in the form. Whatever cannot be sold — a variant tracked at 0 that doesn’t allow overselling, or a product in draft or archived — shows disabled with “Sold out”: the option card, the accessory card, and for colours the dot struck through, like your theme’s variant picker. The customer can’t pick it, and if it was picked on an earlier visit it is removed. Under Design › Options you can prefer hiding it instead of disabling it; if hiding would leave a step with nothing to pick, they show disabled anyway. An Unlisted product still sells: it only disappears from collections and search.

In the editor, Check prices warns you of the same from your side: a “Sold out” or “Draft” badge next to the affected add-on or accessory, and the list of those that cannot be sold right now.

Color groups? One product per group

Want grouped colors — Classic, Fashion, Gradient — like the big eyewear stores? Create one Shopify product per group (“Classic Tint”, “Fashion Tint”, “Gradient Tint”), each with its color variants, and link the variants of all three under the same option. The app detects that they come from different products and turns the option into a dropdown: selecting it unfolds the groups, one per product, each with its title (the product name, editable and translatable), an optional description and its colors. If the groups cost different amounts, each shows its price and the option header shows none; if they cost the same, the price sits in the header. The customer taps the color they want: one gesture picks both the group and the color, and only that variant goes to the order.

Accessories / cross-sell (own step)

An Accessories (cross-sell) step offers optional extra products in its own step: cases, cleaners, cords, etc.

• Select products — choose what’s offered as cross-sell.
• Show skip option — shows a “Continue without accessories” card. When on, the step is optional even if marked Required.
• Editable labels: skip label and description, selection error and summary chip.

Key difference: an add-on depends on picking an option; an accessory is a standalone cross-sell step.

A sold-out accessory shows disabled with “Sold out” (or hidden, per Design › Options), just like add-ons and colours: see the note above.

External action (per option)

Instead of adding an option to the cart, you can turn it into an external action: it shows a custom message and button.

• Message — e.g. “In-store only”.
• Button text — e.g. “Book an appointment”.
• Button URL — supports https://, plus tel:, mailto:, sms: and https://wa.me/.

Useful for products only available in a physical store, appointment bookings or direct contact links (WhatsApp, phone, email).