Build a form

An Optical Form form is a multi-step flow the customer completes on the product page.

Before you start

If you haven’t created the products behind your treatments and lens types yet, do that first — you need them to link add-ons. See Before you start.

The four forms you already have

When you installed, we left you four ready-made sample forms, all in Draft: prescription glasses as a full-screen configurator (with sample treatment colours), prescription glasses in a side panel, sunglasses in dark mode and contact lenses. Neither is assigned to a product, so nothing shows on your store until you want it to.

Start from one of those, not from a blank one. They come with the steps, the wording and the design already wired up, and every part is editable — far quicker than assembling your own from scratch.

Switching one to Active

A form in Draft is invisible to everyone. To publish it:

1. Forms → open the one you want to use.
2. On the Settings tab, change Status from Draft to Active.
3. Save, then Sync — see Sync.

For it to actually appear you need all four at once: Active, Synced, assigned to a product, and the app embed enabled on your theme.

Create the form

1. In the app: Forms → Create form.
2. Choose a starting template or start blank:
   • Prescription Glasses — lens type → material → coating → graduation → summary.
   • Prescription Glasses · Full screen — the same flow as a split screen, with selectable colours on the treatments.
   • Contact Lenses — pack, per-eye prescription taken from the product’s fabrication catalogue, and care solutions.
   • Sunglasses · Dark — sun only or prescription → prescription → tint → polarization → accessories. Born with the Dark design preset (charcoal ground, vermilion accent) and an icon set drawn for a dark ground: a configurator that reads as part of the product. Made for sunglasses and premium frames.
   • Blank Form — one empty step to build from scratch.
3. Name it, choose the status (Draft / Active) and create.

Step types

On the Steps tab, each step has an Input type that defines how it renders:

Input type	What it’s for
Single select	Pick one option (lens type, treatment).
Multiple select	Pick several (combinable filters or treatments). To show the customer there is more to add, you choose between a checkbox on every option and a note above the continue button.
Graduation (Rx)	Per-eye capture (OD/OI): SPH, CYL, AX, ADD and PD. See Prescription capture.
Reading Rx (grid)	Magnification grid for reading glasses.
File upload	The customer uploads their prescription (image or PDF). See File upload.
Text input	Free note from the customer.
Accessories (cross-sell)	Add extra products to the order. See Add-ons & accessories.
Graduation summary	Shows the entered prescription before finishing.
Contact lenses	Per-eye pack, prescription read from the product’s fabrication catalogue, and the exact manufacturer reference on the order.
Product variants	Lets the customer pick the variant inside the form. Hides itself when the product has only one variant.

Step settings

Each step has: an Internal ID (not shown to the customer), a Title, a Description, an Input type and several toggles:

• Required — the customer must complete the step to continue.
• Hide from summary — doesn’t show the selection in the summary or footer chips (useful for routing-only steps).
• Show 0 instead of “Included” — shows €0.00 on free options instead of the “Included” label.
• Price shown on the options — which amount each card of the step shows: the extra cost only (“+€25”, the default), a starting price, the total price or the option’s price alone. Each option can carry its own with Price shown on this option. The four modes, with an example, in Pricing and charging.
• If this step has only one option, pick it and skip the step — off by default, single-select steps only. Switched on, when a product is left with a single option on that step (one pack, one possible treatment), the app picks it for the customer, sends it to the order with its label and moves straight to the next step: nobody sees a screen with a single card. It does not skip when the option carries selectable colours or an external action, nor when the skip would end the form. Off, a one-option step shows as it is — sometimes that screen is there on purpose.

Anatomy of an option

In select steps, each option can carry:

• Label, description and image (from your Shopify Files or by URL).
• Benefits — up to four short tags under the description (“Less glare”, “For screen use”) saying what the shopper gets from that choice. They do not change the price and never reach the order. Ready-made tags translate themselves into the customer’s language; ones you write you translate like any other field.
• Help text — optional. Fill it in and a “?” appears next to the option title that the customer opens to read a longer explanation (on hover or tap), so the description can stay short. Translates like any other field; its look is set in Design › Tooltips and help.
• Info badge — visual text (e.g. +250) that does not affect the total. Put a price there without linking an add-on and the customer sees it but doesn’t pay it: see Pricing and charging. It only shows on options that add nothing to the price: on an option with an add-on, the price mode you chose wins. For labels like “Best value” use the Option label (below); if you had already written something like “Best value • $59” on an option that costs $59, the app shows it as a label with nothing for you to do.
• Option label — a pill next to the option title: “Recommended”, “Best value”, “Most popular”… Click Choose label and pick a ready-made one (it translates itself into the customer’s language and comes with its colour) or write your own and pick its colour. One per option, on any choice step. It does not choose for the customer or change the order: to show it first, drag it up. The “Recommended” text is edited under Design › Texts.
• Incompatible with — prevents combining it with other options.
• Next step (on click) — sequential, jump to a specific step, or Submit (end).
• Add-ons — Shopify products billed as separate lines when the option is picked.
• Selectable colours — a row of swatches (tints, polarised, photochromic): the customer picks one colour and only that one is charged. Each colour is a variant of one of your products; several products form titled groups. See Selectable colours.
• External action — replaces “add to cart” with a message + button (appointment, WhatsApp, in-store only).

See Add-ons, accessories & external actions.

Conditional branching

Each option’s Next step field defines which step the flow jumps to — so “Prescription glasses” and “Reading glasses” can take different paths from the same first step. The editor’s flow diagram visualizes every jump.

Assign & design

• Products — assign the form to individual products or to whole collections. What wins when they overlap, and what happens with large collections: Products and collections.
• Design — colors, typography and which data shows in the cart. See Design & cart.
• Sync — publish changes to the store. See Sync.

One product, one form

A form can carry as many products as you like, but each product takes a single form. If you assign a product here that already belonged to another one, this form takes it — with no warning and no prompt: the previous form loses it silently.

Before moving products between forms, check which one they’re in. And if what you want is for the frame to also sell without being configured, you need neither another form nor another product: your theme’s button is still there (Controlling how each frame is bought). Only two different forms on the same frame require two products.