Button & cart (theme settings)

Beyond the app panel, Optical Form exposes settings in Shopify’s theme editor: a block for the button and an app embed for the drawer and cart.

“Optical Form” block (the button)

Added to the product section, it controls the button that opens the drawer.

• Content: button text (empty = the default translated text) and, optionally, an icon from your Files library, with its position (before or after the text) and the gap to the text.
• Colors: background, text and border, each with a hover variant. Neutral dark grey by default.
• Shape & typography (shared): radius, border width, font weight, letter-spacing (px) and text case.
• Desktop and Mobile separately: shrink-to-fit, width (%), vertical/horizontal padding and font size. The cut-off is 750px.

The button inherits no tokens

The button’s colors do not fall back to the drawer’s --ofd-* tokens. Those are applied to the panel (_applyStyling → this.panel) and the button lives outside it, so it would inherit the app CSS :root — that is, Optical Form’s own brand colour leaking onto the merchant’s storefront. Hence the button’s defaults are neutral and explicit.

• Advanced → variant_input_selector: CSS selector for the selected variant; only if the theme doesn’t update [name="id"] or ?variant=. See Theme integration.

“Optical Form Drawer” app embed

Enabled under App embeds, it controls the drawer and its relationship with the theme’s cart.

Cart appearance

• Compact the add-on lines in the cart (cart_tidy_addons) — off by default. Shrinks the add-on lines so the frame stays the headline. It only changes sizes: which controls each line shows is decided by the next three settings. Verified on Horizon 4.x and on Split; on themes that don’t print that class it does nothing.
• Add-ons in the cart (cart_addon_rows) — “Visible with their controls” by default. “Visible without controls” removes their quantity stepper and remove button; “Hidden” does not paint their lines in the cart at all. They are still charged and still appear at checkout and on the order: the frame’s line shows the frame’s price while the cart total includes them, and what the customer chose stays readable under the frame.
• Hide the remove button of accessories (cart_accessory_remove) — off. They still go when the frame is removed.
• Hide the quantity selector of contact lenses (cart_contact_lens_selector) — off. Their boxes per eye are chosen in the configurator and the app puts the quantity back if anything changes it in the cart; this only hides the selector.
• Custom CSS — rules to override any drawer or button style. It loads on every storefront page, so it can also restyle how your theme prints the form’s line item properties in the cart.

Cart integration

• After add to cart (cart_after_add): open the cart drawer, redirect to /cart, or do nothing. “Do nothing” only means the bridge opens nothing itself: the theme still receives the standard shopify:cart:lines-update (action: 'add'), and Horizon 4.x opens its drawer on it whenever its cart-drawer-component carries auto-open (its own “Add to cart” auto-opens drawer setting, under Theme settings › Cart; off by default on Horizon 4.2.0). The theme wins. Since 1.5 the cart lines travel in the same request as the add and in the event’s promise (detail.sections), so Horizon paints them before opening.
• Keep the cart in sync (cart_intercept) — on by default. On themes with Shopify’s standard cart events it listens passively; on older themes it monitors cart API calls.
• Set quantity from the cart (cart_set_quantity) — “Scale” by default: when the customer raises the frame’s quantity in the cart, the add-ons multiply with it (two lenses per frame, one treatment per frame…). “Lock” puts it back to 1 with a short notice under the line. In both modes an add-on changed on its own goes back to its place, and contact lenses are never scaled: their boxes per eye are set in the configurator and any change goes back to them with its own notice. Both notices are translated and can be changed in the app’s locales.
• Accessories in the cart (cart_accessory_quantity) — “Free quantity” by default: solutions, cases and other extras are changed by the customer and do not multiply with the frame. “Follow the frame” treats them like one more add-on.

The control settings ship without effect

Everything above ships as it looked until now: nothing hidden, and the add-ons following the frame. The rules that hide controls reach the themes we measured (Horizon 2.x to 4.x, Dawn 15 and 16, Split) and, on any other, the marks the bridge leaves on the controls of each row of the set. See Tested themes.

Advanced — only if your theme isn’t picked up automatically:

• Open the drawer from the cart icon (cart_intercept_icon) — off by default. Turn it on only if clicking the icon does nothing.
• CSS selectors (empty = auto-detect): cart count, cart icon and section IDs to refresh. There is no separate cart drawer selector: it is detected automatically.
• Debug mode — logs CartBridge activity to the browser console.

Start with auto-detect

Leave the selectors empty: CartBridge auto-detects the patterns of Dawn, Horizon and most themes. Only fill them in if the cart doesn’t refresh or the drawer won’t open.