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
Section titled “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
Section titled “Drawer”Position and shape of the panel: width (px), position (right / left), overlay opacity (%) and border radius (px).
Colors
Section titled “Colors”Accent, text on accent, background, text, muted text and borders — to match your brand. They default to a neutral accent.
Typography
Section titled “Typography”Sizes and weights for header, step title, step description and option text (title, description, price and price weight).
Options
Section titled “Options”Each card’s style: horizontal/vertical padding, gap between options, border width, image size and the free-option label (“Included”).
Navigation
Section titled “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
Section titled “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.
Cart lines
Section titled “Cart lines”Controls which form data appears under the product in the cart. Hidden values are still saved to the order — they’re only hidden from the cart view.
- Hide graduation values in the cart — hides the prescription (OD SPH, OD CYL, PD, etc.) from the cart line.
- Hide selection labels in the cart — hides the step selections (e.g. “Lens type: Progressive”) from the cart line.
The cart bundle
Section titled “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.