Design & cart

Each form’s Design tab controls its appearance, its behavior and what information reaches the cart. Each section governs a specific area of the drawer.

Behavior

Turn drawer sections on or off:

• Show price adjustments — shows the price difference next to each option (e.g. +$10.00).
• Show progress bar — indicates how far the customer has left.
• Show summary step — adds a final review step before adding to cart.
• Show total on Next button — shows the running total on every step, not just at the end.

Drawer

Position and shape of the panel: width (px), position (right / left / full screen), overlay opacity (%) and border radius (px).

Full screen (desktop)

With the position set to Full screen, on desktop the configurator fills the screen split in equal halves: on the left, the product image — with the name and variant — and the live summary of what the customer has configured so far, with its total; on the right, the steps. If the customer switches variants inside the form (a frame color, a pack), the photo and name on the left switch with them.

Max width (shown when this position is selected): at 0 the area uses the whole screen; above 0 the content centers and the leftover becomes side margins — so on a very wide monitor the configurator does not sprawl.

Image column background (also only in this position): the color of the whole left half — photo, summary and its side margin. Empty follows the card background.

Opening animation: full screen does not slide in like the drawer; it fades in with a short gesture you pick here — zoom, rise, two halves (the photo from the left, the steps from the right) or fade only. Visitors with “reduce motion” enabled on their device always get the plain fade — and the same goes for the side panel: it fades in instead of sliding, and steps change without moving across. Nothing to set up: the app follows the preference on the customer’s device.

On mobile it keeps the regular drawer: a split screen needs width to exist. Nothing else changes — same steps, same prices, same cart.

Accessibility: the panel is a real modal dialog. While it is open, the rest of the page is inert for the keyboard and screen readers; focus moves in on open, never escapes with Tab and returns to the button on close. The progress bar announces which step the customer is on (“step 2 of 5”), everything focusable carries a two-layer focus ring that shows on any background colour, and the browser’s Back button goes back one step (on the first one, it closes the panel without leaving the product page). Nothing to set up.

Tooltips and help

Every option (and every color group) accepts a help text: fill it in and a “?” appears next to the title that the customer opens to read a longer explanation, so the description can stay to one line. It shows on hover or tap, and closes on a tap outside.

This section styles that bubble, the “?” on the prescription fields and the tooltip with each color’s name: background and text (empty, they follow the form colors: white and black by default, with a hairline border), radius (0 by default), horizontal and vertical padding, font size, the help bubble’s max width (0 = as wide as the text column) and the “?” icon color and size.

If you would rather the color tooltip did not also say the surcharge (“Gray (+€80.00)”), turn it off under Design › Options › Show the surcharge in the color tooltip: only the name remains, and the price still shows under the row once a color is picked.

Design preset

A whole look in one click, before you touch anything else:

• Classic — the panel as it has always been, flush with the edge and compact.
• Modern — more air, soft corners, thin borders and a considered type scale; the panel floats as a card set off from the edge. It’s what the sample forms ship with.
• Dark — Modern’s layout over a charcoal ground, graphite cards, light ink and a vermilion accent. Made for sunglasses and premium frames: a configurator that reads as part of the product. It’s the only preset that brings its own colours.

Classic and Modern change spacing, corners and text sizes, never your colours. Dark does write them when you pick it, and restores the defaults when you switch back — the panel tells you if you’ve changed anything since applying it, with a button to re-apply.

For a dark panel use the on-dark/ set from the icon pack: on a dark ground, the light-ground icons vanish.

Colors

Accent, text on accent, background, text, muted text and borders — to match your brand. They default to a neutral accent.

Typography

Sizes and weights for header, step title, step description, option text (title, description, price and price weight) and the benefit chips. Under the step title, Gap between title and description (8px by default) moves only that space; the header-to-options distance does not change.

The chips ship on automatic: they sit one point below the option description and follow it if you change it, which is what keeps the card’s hierarchy. Give them a size of their own only if you need to; sliding back to zero returns to automatic.

Options

Each card’s style: horizontal/vertical padding, gap between options, border width, image size and the free-option label (“Included”). And the air inside the card: space to the right of the text before the price (24px on desktop and 0 on mobile by default), gap between the option title and its description (2px by default) and space above the benefit chips (12px by default). Also the gap between the option image and its text and the image corner radius; the benefit chips (padding, pill / rounded / square shape and gap between chips); the gap between the color dots; and the accessory card (its padding and the gap from image to text). They all default to the values the drawer used until now: nothing changes until you touch them.

For options with selectable colors: the size of the color dots (under 32px they get hard to tap on a phone), whether the tooltip that appears over a dot also shows the surcharge (“Gray (+€80.00)”) or just the name, and the “Choose a color to continue” text — you can rewrite it, and decide whether it shows under the color row or only as the note above the Next button.

Sold-out add-ons, colors and accessories: what the drawer does with what cannot be sold right now — show it disabled with “Sold out” (the default; for colors, the dot struck through) or hide it. If hiding would leave a step with no options, they show disabled. See what’s sold out shows before it’s chosen.

Navigation

Progress bar and buttons: bar height, button size/weight/padding, the footer selection carousel (show on desktop/mobile, prefix with step name) and the step counter (separator word, e.g. “2 of 4”).

Space kept free at the right of the footer — if your store has a chat bubble in the bottom-right corner (WhatsApp, Tidio, Gorgias…), it lands right on top of the panel’s Next button. This setting leaves that spot empty so the chat floats over nothing: about 72 px clears the usual bubble. It is 0 by default and the footer does not change.

Remember a half-finished configuration — off by default; turn it on if you want it. If the customer closes the configurator before finishing and comes back to the same product within 7 days, instead of the first step they see “You left a configuration half-way” with two buttons: Continue where you left off and Start over. Continuing brings back what they had chosen (at today’s prices, and only the options that still exist) and lands them on the first step they still have to answer. What is not remembered: the prescription, the reading Rx, contact lenses and files, which they enter again. The draft lives in the customer’s browser, never on our servers, and is cleared when they add to cart, start over or after 7 days. Switch it off if several customers share one device (an in-store kiosk). Below it, “Offer to continue from N completed steps” (2 by default): with fewer steps done nothing is kept, because redoing one costs the same as answering the prompt; raise it if you only want to rescue those who almost finished. The prompt’s texts are edited under Design › Texts, and Analytics shows how many resume.

Summary & Total

The selection list and the total line: title, items and total sizes; total background and color; a shipping line (label + value, e.g. “Free (Mainland)”); and the option to prefix summary lines with the step name.

What the customer sees of their choices

Under the product in the cart, the customer sees what they configured: the steps they picked and their prescription. Something like this:

Frame type: Prescription glasses
Lens type: Standard thin lenses
OD: SPH -2.50 · CYL -1.25 · AX 90° · ADD +1.50
OS: SPH -3.00 · CYL 0.00 · AX — · ADD +2.00
PD: 63
Accessories: Hard case

Two switches let you hide this from the customer:

• Hide graduation values from the customer
• Hide selection labels from the customer

Careful: “hide” means hide everywhere

This is where almost everyone gets caught out, because it sounds like it only affects the cart.

When you turn one of these on, that data disappears from everything the customer sees: the cart, checkout, the order status page and the order confirmation email.

You still see it on the order detail inside your Shopify admin, and it still travels to your lab. But your customer can no longer check, at any point, which prescription they ordered.

It is all or nothing: Shopify offers no way to show a value in the email and hide it in the cart.

Our recommendation: leave the prescription one off. The confirmation email is your customer’s only way to catch a mistake after buying, and it saves you the return.

Keeping one step out of the order

Sometimes a step adds nothing to the order — one that only asks how the customer wants to give you their prescription, for instance. The prescription values already say that, so the line just makes the cart longer.

Inside each step in the editor there is a Hide from cart and order checkbox.

Next to it, on single-choice steps, If this step has only one option, choose it and skip the step: the customer never sees that screen, the option still goes to the order with its label, and Back returns to the last screen they did see. It comes switched off: if the single option is there on purpose — a price to show, a condition to read — leave it off. A step whose only option has selectable colours or an external link is always shown.

That checkbox does not appear on the steps carrying the prescription, nor on photo upload: an order for prescription eyewear with no prescription cannot be filled, so the app won’t let you get there.

Watch out for steps with the same name

It is common to have several steps titled “Prescription” — the one asking for the method, the one capturing the values, the photo upload. Look at the coloured tag next to each step’s title: it tells you the type. You can also fill in each step’s internal ID (“method”, “values”, “photo”) to tell them apart at a glance.

The cart bundle

The main product + lenses/add-ons + accessories are grouped as one bundle under a single line, just like it reads at checkout. That relationship is kept natively (parent_id) for cascade removal, checkout and order emails — if the customer removes the main product, its add-ons go with it. See Theme integration for the technical detail.

How it looks is your theme’s call

The app applies no styling to the cart at all. What you see there — the indent on the child lines, the sizes, the dividers — is painted by your theme, which keeps it consistent with the rest of your store even if you switch themes.

Modern themes like Horizon nest the bundle lines on their own. If yours doesn’t, or you want to fine-tune it, there are two routes:

• Compact the add-on lines — a checkbox in the app embed. It makes the add-on lines smaller than the main product’s, so the glasses stay the headline and the extras read as part of them. It ships off, and switched on it only changes sizes: it does not hide the quantity or the remove button.
• Custom CSS — a field in that same app embed, for anything else you want to adjust.

Why the remove button is still there

It is tempting to hide the quantity and the bin on the add-ons so nobody unbalances the order. It does not work: hiding a control does not prevent the action, and anyone who wants to can still change it. That row is also shared with other apps — warranties, shipping insurance — and hiding their bin would leave your customer unable to remove a charge that is not yours.