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 = default translated text) and style (Primary / Secondary / Outline).
Size & spacing: width (%), vertical/horizontal padding, border radius and width.
Typography: size, weight, letter-spacing and transform (UPPERCASE/Capitalize/…).
Colors (optional): background, text, border and their hover variants. Empty = the chosen style’s colors.
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.

Custom CSS — rules to override any drawer or button style.
After add to cart (cart_after_add): open the cart drawer, redirect to /cart, or do nothing.
CSS selectors (auto-detect by default; override for non-standard themes): cart count, cart drawer, cart icon, and section IDs to refresh.
Intercept all cart requests — keeps the UI in sync by monitoring cart API calls. Recommended.
Intercept cart icon clicks — clicking the icon opens the drawer instead of navigating to /cart.
Debug mode — logs CartBridge activity to the browser console.