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), overlay opacity (%) and border radius (px).

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.

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”).

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”).

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: -2.50, -1.25, 90°, +1.50
OS: -3.00, -0.75, 180°, +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.

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.