Tested themes

Optical Form adds the frame and each add-on as separate cart lines, grouped under the frame. How that group looks depends on the theme: each one prints its lines its own way, and not all of them know how to nest them.

These are the themes where our team has tested the cart end to end — adding from the form, drawer open, lines visible, readable prescription — and what to adjust in each so it looks polished.

The table

Theme	Versions	Status	What to do
Horizon	2.0.1 · 4.1 – 4.2.0	✅ Our reference: add-ons nested, no controls of their own. 4.1 tested on desktop and mobile; 4.2.0 (September 2026) on desktop; 2.0.1 in a live store	Turn on Compact the add-on lines in the cart in the app embed
Dawn	15.2 – 16.0	✅ Tested on desktop and mobile	Paste the CSS below into the app embed’s Custom CSS
Split (KrownThemes)	4.4	✅ Tested on desktop on a live store: the cart drawer opens with the frame and its add-ons, and deleting the frame takes them along	Turn on Compact the add-on lines in the cart in the app embed; optional CSS below to polish
Glassglow	9.0	🟠 In progress: the drawer opens and refreshes through the theme’s own functions and our lines land in it; we still need to see it with the form enabled on the store. Its mini-cart shows no line properties (the configuration and prescription appear on the cart page and at checkout) and lists at most 5 lines	Write to us before enabling it

Horizon

No CSS needed. In Theme › App embeds › Optical Form Drawer, turn on Compact the add-on lines in the cart: Horizon already nests the set’s lines under the frame, and that setting makes them smaller so the glasses stay the headline.

Two things worth knowing about Horizon 4.2.0:

• If you update from the Theme Store, the new theme arrives without the “Optical Form” block on the product template (the app embed is kept, because it is an app setting). Place it again under Customize › Product template › Add block › Apps.
• Its “Add to cart” auto-opens drawer setting (Theme settings › Cart) ships off. Off, Optical Form opens the cart drawer once the theme has painted the lines; on, the theme opens it at once, and the lines travel in the same request as the add, so it opens filled either way.

Dawn 15.x

Dawn prints every add-on as a line just like the frame, with its own quantity stepper and remove button. This CSS nests them under the frame, shrinks them and shows the quantity as a plain number:

1. Go to Online Store › Themes › Customize › App embeds › Optical Form Drawer.
2. Paste this into Custom CSS and save:

/* Optical Form · Dawn 15.x/16.x — add-on lines nested under the frame, like Horizon */
/* the frame: the set is one unit, so no quantity stepper; the remove button stays */
.cart-item.ofd-bundle-parent .quantity { display: none; }
.cart-item.ofd-bundle-child td { padding-top: .8rem; padding-bottom: .8rem; border-top: 0; }
.cart-item.ofd-bundle-child .cart-item__media { padding-left: 3.2rem; }
.cart-item.ofd-bundle-child .cart-item__image-container { width: 100%; max-width: 5.2rem; }
.cart-item.ofd-bundle-child .cart-item__name { font-size: 1.3rem; line-height: 1.35; }
.cart-item.ofd-bundle-child .product-option,
.cart-item.ofd-bundle-child .cart-item__totals .price { font-size: 1.2rem; }
/* read-only quantity: the number stays, the buttons go */
.cart-item.ofd-bundle-child .cart-item__quantity { padding-top: 0; }
.cart-item.ofd-bundle-child .quantity__button { display: none; }
.cart-item.ofd-bundle-child .quantity { width: auto; min-height: 0; min-width: 0; }
.cart-item.ofd-bundle-child .quantity::before,
.cart-item.ofd-bundle-child .quantity::after { display: none; }
.cart-item.ofd-bundle-child .quantity__input { pointer-events: none; width: 3rem; padding: 0; text-align: left; font-size: 1.2rem; opacity: .75; }
.cart-item.ofd-bundle-child .quantity-popover__info-button { display: none; }
/* no remove button on add-ons: deleting the frame removes them too */
.cart-item.ofd-bundle-child cart-remove-button { display: none; }

If you’d rather let customers change quantities or remove a single add-on

Drop the first rule (the frame gets its quantity stepper back) or the last two (add-ons get their quantity and remove button back). The frame always keeps its remove button, and deleting it removes the whole set.

Split (KrownThemes)

Split has its own cart drawer and the app recognises it on its own: no selectors to set. Two things:

1. Under Theme › App embeds › Optical Form Drawer, turn on Compact the add-on lines in the cart. On Split that box removes the quantity stepper and the “Remove” link from the add-ons, and the frame’s quantity stepper too, because the set is bought and deleted as one unit: the frame keeps “Remove”, and deleting it takes the lenses along.
2. If you want the child lines smaller and indented under the frame, paste this into the same app embed’s Custom CSS:

/* Optical Form · Split — compact add-ons under the frame (drawer and cart page) */
#AjaxCartForm .cart-item.ofd-bundle-child { padding-left: 24px !important; margin-top: -8px !important; }
#AjaxCartForm .cart-item.ofd-bundle-child .thumbnail { width: 56px !important; flex: 0 0 56px !important; }
#AjaxCartForm .cart-item.ofd-bundle-child .item-title { font-size: 13px !important; line-height: 1.35 !important; }
#AjaxCartForm .cart-item.ofd-bundle-child .item-price { font-size: 12px !important; }
#AjaxCartForm .cart-item.ofd-bundle-child .actions { display: none !important; }

Split prints every line property in the cart, including the technical ones that start with _ (it strips the underscore), so under the frame and under each add-on you will see lines like ofd_type: main. Two ways to remove them:

• The clean one, in the theme: in snippets/cart-form.liquid, the condition that decides which property is printed ({%- if p.last != blank and p_first_char != '_p_' -%}) becomes {%- if p.last != blank and p_first_char != '_p_' and p.first contains '_ofd_' == false -%}. Works for any order and any form setting.
• CSS only, pasted under the block above. Valid as long as Merge the selections into one line (Design › Cart lines) is on: that line comes first and the technical ones sit second, third and last. If you turn merging off, change the frame’s first two rules to span:nth-child(-n+2).

/* Technical properties (ofd_*): all of them on add-ons; the 2nd, 3rd and last on the frame */
#AjaxCartForm .cart-item.ofd-bundle-child .margin-top-xs { display: none !important; }
#AjaxCartForm .cart-item.ofd-bundle-parent .margin-top-xs > span:nth-child(2),
#AjaxCartForm .cart-item.ofd-bundle-parent .margin-top-xs > span:nth-child(3),
#AjaxCartForm .cart-item.ofd-bundle-parent .margin-top-xs > span:last-child { display: none !important; }

What your customer sees in any of these themes

• The frame with its photo, its price and the chosen configuration.
• The labelled prescription, with the same field names as the form: OD: SPH -2.25 · CYL -0.75 · AX 90°, OS: …, PD: 63.
• The add-ons underneath, each with its price and quantity.

The technical properties that go to the lab (they start with _) are not shown by any Shopify theme: not in the cart, not at checkout, not in the email.

Your theme is not on the list

The form and the charging work the same on any theme: the app embed’s automatic settings detect the cart of most of them. What we can’t guarantee without seeing it is the finish of the drawer — add-ons nested and polished as in Horizon — because every theme prints its lines with its own code.

If you want that finish on a theme that isn’t here, write to support@getoptical.app with the theme’s name and version. We’ll usually ask for collaborator access to the store (Themes permission) or, at the very least, a preview link of the theme with the form enabled on a product. With that we adjust the cart, hand you the CSS ready to paste, and the theme joins this table.