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 two forms you already have

When you installed, we left you two ready-made sample forms, both in Draft: one for prescription glasses and one for 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.
   • Contact Lenses — pack, per-eye prescription taken from the product’s fabrication catalogue, and care solutions.
   • Sunglasses — tint → polarization → accessories.
   • Reading Glasses — magnification grid → accessories.
   • 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.

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.
• 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.
• 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.
• 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 one or more products.
• Design — colors, typography and which data shows in the cart. See Design & cart.
• Sync — publish changes to the store. See Sync.