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: it does not hide the quantity or the remove button. Verified on Horizon 4.x; on themes that don’t print that class it does nothing.
• 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.
• 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.

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.