Temas probados

Optical Form añade la montura y cada complemento como líneas separadas del carrito, agrupadas bajo la montura. Cómo se ve ese grupo depende del tema: cada uno pinta sus líneas a su manera, y no todos saben anidarlas.

Aquí están los temas en los que nuestro equipo ha probado el carrito de principio a fin —añadir desde el formulario, panel del carrito abierto, líneas visibles, receta legible— y lo que hay que ajustar en cada uno para que quede pulido.

La tabla

Tema	Versiones	Estado	Qué hacer
Horizon	2.0.1 · 4.1 – 4.2.0	✅ Es nuestra referencia: complementos anidados, sin controles propios. 4.1 probado en escritorio y móvil; 4.2.0 (septiembre de 2026) en escritorio; 2.0.1 en una tienda real	Activar la casilla Compact the add-on lines in the cart del app embed
Dawn	15.2 – 16.0	✅ Probado en escritorio y móvil	Pegar el CSS de abajo en Custom CSS del app embed
Split (KrownThemes)	4.4	✅ Probado en escritorio en una tienda real: el panel del carrito se abre con la montura y sus complementos, y al borrar la montura se van con ella	Activar la casilla Compact the add-on lines in the cart del app embed; CSS opcional abajo para afinar
Glassglow	9.0	🟠 En curso: el panel del carrito se abre y se actualiza con las funciones del propio tema y nuestras líneas caen en él; nos falta verlo con el formulario activo en la tienda. Su mini-cart no enseña las propiedades de línea (la configuración y la receta salen en la página del carrito y en el checkout) y lista como mucho 5 líneas	Escríbenos antes de activarlo

Horizon

No hace falta CSS. En Tema › App embeds › Optical Form Drawer, activa Compact the add-on lines in the cart: Horizon ya anida las líneas del conjunto bajo la montura, y esa casilla las hace más pequeñas para que las gafas sean el titular.

Dos cosas de Horizon 4.2.0 que conviene saber:

Si actualizas desde la Theme Store, el tema nuevo llega sin el bloque «Optical Form» en la plantilla de producto (el app embed sí se conserva, porque es un ajuste de la app). Vuelve a colocarlo en Personalizar › Plantilla de producto › Añadir bloque › Apps.
Su ajuste «“Add to cart” auto-opens drawer» (Ajustes del tema › Cart) viene apagado. Con él apagado, el panel del carrito lo abre Optical Form cuando el tema ya ha pintado las líneas; con él encendido lo abre el tema al instante, y las líneas van en la misma petición que el añadido, así que también se abre lleno.

Dawn 15.x

Dawn pinta cada complemento como una línea igual que la montura, con su selector de cantidad y su papelera. Este CSS las anida bajo la montura, las reduce y deja la cantidad como un número:

Ve a Tienda online › Temas › Personalizar › App embeds › Optical Form Drawer.
Pega esto en Custom CSS y guarda:

/* Optical Form · Dawn 15.x/16.x — complementos anidados bajo la montura, como en Horizon */
/* la montura: el conjunto es una unidad, sin selector de cantidad; la papelera se queda */
.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; }
/* cantidad solo lectura: se queda el número, se van los botones */
.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; }
/* sin papelera en los complementos: al borrar la montura se van con ella */
.cart-item.ofd-bundle-child cart-remove-button { display: none; }

Split (KrownThemes)

Split tiene su propio panel de carrito y la app lo reconoce sola: no hay que tocar selectores. Dos cosas:

En Tema › App embeds › Optical Form Drawer, activa Compact the add-on lines in the cart. En Split esa casilla quita a los complementos el selector de cantidad y el enlace «Eliminar», y también el selector de cantidad de la montura, porque el conjunto se compra y se borra como una unidad: la montura conserva «Eliminar» y al borrarla se lleva las lentes.
Si quieres las líneas hijas más pequeñas y sangradas bajo la montura, pega esto en Custom CSS del mismo app embed:

/* Optical Form · Split — complementos compactos bajo la montura (cajón y página del carrito) */
#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 imprime en el carrito todas las propiedades de línea, también las técnicas que empiezan por _ (les quita el guion bajo), así que bajo la montura y bajo cada complemento verás líneas como ofd_type: main. Dos formas de quitarlas:

La limpia, en el tema: en snippets/cart-form.liquid, la condición que decide qué propiedad se imprime ({%- if p.last != blank and p_first_char != '_p_' -%}) pasa a {%- if p.last != blank and p_first_char != '_p_' and p.first contains '_ofd_' == false -%}. Sirve para cualquier orden y cualquier ajuste del formulario.
Solo con CSS, pegando esto debajo del bloque anterior. Vale mientras tengas activa Unir las selecciones en una sola línea (Diseño › Líneas del carrito): esa línea va la primera y las técnicas ocupan la segunda, la tercera y la última. Si desactivas la unión, cambia las dos primeras reglas de la montura por span:nth-child(-n+2).

/* Propiedades técnicas (ofd_*): en los complementos, todas; en la montura, la 2.ª, la 3.ª y la última */
#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; }

Lo que verá tu cliente en cualquiera de los temas

La montura con su foto, su precio y la configuración elegida.
La graduación etiquetada, con los mismos nombres de campo que el formulario: OD: SPH -2.25 · CYL -0.75 · AX 90°, OI: …, DIP: 63.
Los complementos debajo, con su precio y su cantidad.

Las propiedades técnicas que van al laboratorio (empiezan por _) no se ven en ningún tema de Shopify: ni en el carrito, ni en el checkout, ni en el email.

Tu tema no está en la lista

El formulario y el cobro funcionan igual en cualquier tema: los ajustes automáticos del app embed detectan el carrito de la mayoría. Lo que no podemos garantizar sin verlo es el acabado del panel del carrito —que los complementos salgan anidados y pulidos como en Horizon—, porque cada tema pinta sus líneas con su propio código.

Si quieres ese acabado en un tema que no está aquí, escríbenos a support@getoptical.app con el nombre y la versión del tema. Lo normal es que te pidamos acceso de colaborador a la tienda (permiso de Temas) o, como mínimo, un enlace de vista previa del tema con el formulario activo en un producto. Con eso ajustamos el carrito, te dejamos el CSS listo para pegar y el tema pasa a esta tabla.