Theme editor settings

Optical Form puts settings in two different places in the theme editor, and mixing them up is the number one cause of “I turned it on and nothing shows”.

	Where it is	What it controls
The app embed	Customize → App embeds	The engine: the cart, custom CSS. Once, for the whole store
The block	Customize → Product template → Add block	The button: how it looks and where it goes

The short rule: the embed makes it work, the block makes it show. With only the embed, the product page displays nothing.

---

The app embed (Apps)

Customize → App embeds → Optical Form Drawer.

Cart appearance

Compact the add-on lines in the cart. Your theme prints each add-on as its own cart line, at the same size as the main product. This checkbox makes those lines smaller, 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. Verified on Horizon 4.x; on other themes it does nothing, because the markup it targets is not there.

Why it doesn’t hide the remove button

It’s tempting to hide it so nobody unbalances the order. It doesn’t work: hiding a control doesn’t prevent the action. And that row is shared with other apps — warranties, shipping insurance — so hiding their bin would leave your customer unable to remove a charge that isn’t yours.

Custom CSS

A text field for your own rules. They load after the app’s and the theme’s, so they win without you having to fight specificity.

What it’s normally used for:

/* Shrink an add-on row in the cart (Horizon 4.x) */
.cart-items__nested-line .cart-items__title { font-size: 13px; }
.cart-items__nested-line .cart-items__details { font-size: 12px; }

This is YOUR theme’s CSS, not the app’s

These rules target the classes your theme paints, and those classes differ from theme to theme. A rule written for Horizon may match nothing in Dawn. If you switch themes, revisit this field.

And you don’t need it for the common case: the checkbox above already ships the Horizon recipe.

Cart integration

After add to cart — what happens when the form finishes: open your theme’s cart drawer, go to the cart page, or do nothing.

Keep the cart in sync — when the customer removes the glasses, their lenses and accessories go too. Leave it on unless you know why you’re turning it off: without it your customer can end up with loose lenses in the cart and no frame.

Advanced

Only needed if your theme isn’t standard and auto-detection fails:

	What for
Open the drawer from the cart icon	If your theme doesn’t open its own drawer when the icon is clicked
Cart count selector (CSS)	The number over the icon, if it isn’t found automatically
Cart icon selector (CSS)	The icon, if it isn’t found automatically
Section IDs to refresh	The theme sections that should repaint after adding
Debug mode	Writes what it’s doing to the browser console. For sending to us if something breaks

Leave them empty first

They all auto-detect on most themes. Fill them in only if something fails, and one at a time — that way you know which one it was.

---

The block (product page)

Customize → switch the view to Product → Add block → Optical Form.

This block draws the button that opens the form. Put it wherever you like, usually next to the add-to-cart button.

Button content

Text (leave empty to use the translated default), icon (optional, from your files), icon position (left or right) and space between icon and text.

Colors

Background, text and border, each with its hover version. Six in total, so it fits your brand in both states.

Shape & typography

Corner radius, border width, font weight, letter spacing and text case (normal, ALL CAPS, Title Case).

Desktop and Mobile

The same seven settings, separately for each screen size:

• Shrink to fit the text — the button takes only the room it needs instead of the full width
• Width, vertical and horizontal padding
• Font size
• Content alignment — centred, or text and icon pushed to the edges
• Icon size

Start with mobile

More than half your customers buy there, and a button that looks right on desktop can feel cramped on a phone. The editor lets you switch between the two views without leaving.

Advanced — theme integration

Variant input selector (CSS) — only if your theme doesn’t use the standard variant input. It tells the form where to read which variant the customer picked, so the right one reaches the cart.

Leave it empty unless the form is adding the wrong variant.

---

When something doesn’t fit

1. No button showing → the block is missing, or the form isn’t Active + Synced. See Install.
2. The cart looks odd → try the compact checkbox first; custom CSS is the last resort.
3. The wrong variant is added → the block’s variant selector.
4. None of the above → turn on debug mode, reproduce the problem, and send us what the console shows.