Ajustes en el editor de temas

Optical Form pone ajustes en dos sitios distintos del editor de temas, y confundirlos es la causa número uno de «lo he activado y no se ve nada».

	Dónde está	Qué controla
La incrustación (app embed)	Personalizar → Incrustaciones de la aplicación	El motor: el carrito, el CSS personalizado. Una vez para toda la tienda
El bloque	Personalizar → plantilla Producto → Añadir bloque	El botón: cómo se ve y dónde va

La regla corta: la incrustación hace que funcione, el bloque hace que se vea. Con solo la incrustación, la ficha de producto no muestra nada.

---

La incrustación (Apps)

Personalizar → Incrustaciones de la aplicación → Optical Form Drawer.

Aspecto del carrito

Compactar las líneas de complementos. Tu tema imprime cada complemento como una línea más, del mismo tamaño que el producto principal. Esta casilla las hace más pequeñas, para que las gafas sigan siendo la protagonista y los extras se lean como parte de ellas.

Nace apagada, y encendida solo cambia tamaños: no esconde la cantidad ni el botón de eliminar. Está probada en Horizon 4.x; en otros temas no hace nada, porque el marcado al que se agarra no existe ahí.

Por qué no esconde el botón de eliminar

Es tentador esconderlo para que nadie descuadre el pedido. No sirve: esconder un control no impide la acción. Y esa fila la comparten otras apps —garantías, seguros de envío—, así que esconderles su papelera dejaría a tu cliente sin poder quitar un cargo que no es tuyo.

CSS personalizado

Un campo de texto para tus propias reglas. Se cargan después de las de la app y del tema, así que ganan sin que tengas que pelearte con la especificidad.

Para qué se usa normalmente:

/* Achicar la fila de un complemento en el carrito (Horizon 4.x) */
.cart-items__nested-line .cart-items__title { font-size: 13px; }
.cart-items__nested-line .cart-items__details { font-size: 12px; }

Es CSS de TU tema, no de la app

Estas reglas apuntan a las clases que pinta tu tema, y esas clases cambian de un tema a otro. Una regla escrita para Horizon puede no casar con nada en Dawn. Si cambias de tema, revisa este campo.

Y no hace falta para el caso más común: la casilla de arriba ya trae la receta de Horizon hecha.

Integración con el carrito

Después de añadir al carrito — qué pasa al terminar el formulario: abrir el cajón del carrito de tu tema, ir a la página del carrito, o no hacer nada.

Mantener el carrito sincronizado — cuando el cliente borra las gafas, se van también sus lentes y complementos. Déjalo encendido salvo que sepas por qué lo apagas: sin esto tu cliente puede quedarse con unas lentes sueltas en el carrito, sin montura.

Avanzado

Solo hacen falta si tu tema no es estándar y el ajuste automático falla:

	Para qué
Abrir el cajón desde el icono del carrito	Si tu tema no abre su propio cajón al pulsar el icono
Selector del contador del carrito (CSS)	El número que va sobre el icono, si no lo encuentra solo
Selector del icono del carrito (CSS)	El icono, si no lo encuentra solo
IDs de secciones a refrescar	Las secciones del tema que deben repintarse al añadir
Modo depuración	Escribe en la consola del navegador lo que va haciendo. Para pasárnoslo si algo falla

Déjalos vacíos primero

Todos se detectan solos en la mayoría de temas. Rellénalos solo si algo no funciona, y de uno en uno: así sabes cuál era.

---

El bloque (ficha de producto)

Personalizar → cambia la vista a Producto → Añadir bloque → Optical Form.

Este bloque dibuja el botón que abre el formulario. Colócalo donde quieras, normalmente junto al de añadir al carrito.

Contenido del botón

Texto (déjalo vacío para usar el traducido por defecto), icono (opcional, desde tus archivos), posición del icono (izquierda o derecha) y separación entre icono y texto.

Colores

Fondo, texto y borde, cada uno con su versión al pasar el ratón. Seis en total, para que encaje con tu marca en los dos estados.

Forma y tipografía

Radio de las esquinas, grosor del borde, grosor de la letra, espaciado entre letras y mayúsculas (normal, TODO MAYÚSCULAS, Tipo Título).

Escritorio y Móvil

Los mismos siete ajustes, por separado para cada tamaño de pantalla:

• Ajustar al texto — el botón ocupa solo lo que necesita, en vez de todo el ancho
• Anchura, relleno vertical y horizontal
• Tamaño de letra
• Alineación del contenido — centrado, o texto e icono separados a los extremos
• Tamaño del icono

Empieza por móvil

Más de la mitad de tus clientes compran ahí, y un botón que en escritorio se ve bien puede quedar apretado en un teléfono. El editor te deja alternar entre las dos vistas sin salir.

Avanzado — integración con el tema

Selector del campo de variante (CSS) — solo si tu tema no usa el campo de variante estándar. Le dice al formulario dónde leer qué variante ha elegido el cliente, para llevarse la correcta al carrito.

Déjalo vacío salvo que el formulario esté añadiendo la variante equivocada.

---

Cuando algo no encaja

1. No se ve el botón → falta el bloque, o el formulario no está Activo + Sincronizado. Ver Instalar.
2. El carrito se ve raro → mira primero la casilla de compactar; el CSS personalizado es el último recurso.
3. Se añade la variante equivocada → el selector de variante del bloque.
4. Nada de lo anterior → enciende el modo depuración, reproduce el problema y mándanos lo que salga en la consola.