Diseño y carrito

La pestaña Diseño de cada formulario controla su apariencia, su comportamiento y qué información llega al carrito. Cada sección gobierna una zona concreta del drawer.

Comportamiento

Activa o desactiva secciones del drawer:

• Mostrar ajustes de precio — muestra la diferencia de precio junto a cada opción (ej. +$10.00).
• Mostrar barra de progreso — indica cuánto le queda al cliente.
• Mostrar paso de resumen — añade un último paso de revisión antes de añadir al carrito.
• Mostrar el total en el botón Siguiente — muestra el total acumulado en cada paso, no solo al final.

Drawer

Posición y forma del panel: anchura (px), posición (derecha / izquierda), opacidad del fondo (%) y radio del borde (px).

Colores

Acento, texto sobre acento, fondo, texto, texto atenuado y bordes — para encajar con tu marca. Por defecto usan un acento neutro.

Tipografía

Tamaños y grosores para encabezado, título del paso, descripción del paso, texto de las opciones (título, descripción, precio y grosor del precio) y los chips de ventaja.

Los chips vienen en automático: se colocan un punto por debajo de la descripción de la opción y la siguen si la cambias, que es lo que mantiene la jerarquía de la tarjeta. Dales un tamaño propio solo si lo necesitas; el deslizador a cero vuelve a automático.

Opciones

Estilo de cada tarjeta: padding horizontal/vertical, separación entre opciones, grosor del borde, tamaño de imagen y la etiqueta para opciones gratuitas (“Incluido”).

Navegación

Barra de progreso y botones: altura de la barra, tamaño/grosor/padding del botón, el carrusel de selecciones del pie (mostrar en escritorio/móvil, prefijar con el nombre del paso) y el contador de pasos (palabra separadora, ej. “2 de 4”).

Resumen y Total

La lista de selecciones y la línea de total: tamaños de título, items y total; fondo y color del total; una línea de envío (etiqueta + valor, ej. “Gratis (Peninsular)”); y la opción de prefijar las líneas del resumen con el nombre del paso.

Qué ve el cliente de lo que eligió

Debajo del producto, en el carrito, aparece lo que el cliente configuró: los pasos que eligió y su receta. Algo así:

Tipo de gafas: Gafas graduadas
Tipo de lente: Lentes finas estándar
OD: -2.50, -1.25, 90°, +1.50
OI: -3.00, -0.75, 180°, +2.00
DIP: 63
Accesorios: Funda rígida

Tienes dos interruptores para ocultarle esto al cliente:

• Ocultar los valores de graduación al cliente
• Ocultar las etiquetas de selección al cliente

Ojo: «ocultar» significa ocultar en todas partes

Aquí se equivoca casi todo el mundo, porque suena a que solo afecta al carrito.

Cuando activas uno de estos interruptores, esos datos desaparecen de todo lo que ve el cliente: el carrito, el checkout, la página de estado del pedido y el email de confirmación.

Tú los sigues viendo en el detalle del pedido, dentro de tu admin de Shopify, y viajan igual a tu laboratorio. Pero tu cliente ya no puede comprobar en ningún momento qué graduación pidió.

Es todo o nada: Shopify no permite mostrar un dato en el email y esconderlo en el carrito.

Nuestra recomendación: deja desactivado el de la graduación. Que el cliente reciba su receta por email es su única forma de detectar un error después de comprar, y a ti te ahorra la devolución.

Quitar un paso concreto del pedido

A veces hay un paso que no aporta nada al pedido: por ejemplo, uno que solo pregunta cómo quiere el cliente darte su graduación. Los propios valores de la receta ya lo dicen, así que esa línea solo alarga el carrito.

Dentro de cada paso, en el editor, tienes la casilla Ocultar del carrito y del pedido.

Esa casilla no aparece en los pasos que llevan la receta ni en el de subir foto: un pedido de gafas graduadas sin graduación no se puede fabricar, así que la app no te deja llegar ahí.

Cuidado con los pasos que se llaman igual

Es habitual tener varios pasos titulados «Graduación» —el que pregunta el método, el que captura los valores, el de subir la foto—. Fíjate en la etiqueta de color que hay junto al título de cada paso: te dice de qué tipo es. También puedes rellenar el ID interno de cada paso («método», «valores», «foto») para distinguirlos de un vistazo.

El bundle en el carrito

El producto principal + lentes/addons + accesorios se agrupan como un bundle bajo una sola línea, igual que se lee en el checkout. La relación se mantiene de forma nativa (parent_id) para el borrado en cascada, el checkout y los emails de pedido — si el cliente elimina el producto principal, se quitan también sus addons. Ver Integración con el tema para el detalle técnico.

Cómo se ve, lo decide tu tema

La app no aplica ni un estilo al carrito. Lo que ves ahí —el sangrado de las líneas hijas, los tamaños, los separadores— lo pinta tu tema, y así se mantiene coherente con el resto de tu tienda aunque cambies de plantilla.

Los temas modernos como Horizon anidan las líneas del bundle por su cuenta. Si el tuyo no lo hace, o si quieres afinar cómo se ve, tienes dos vías:

• Compactar las líneas de complementos — una casilla en la incrustación de la app (app embed). Deja las líneas de los complementos más pequeñas que la del producto principal, 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.
• CSS personalizado — un campo en esa misma incrustación, para cualquier ajuste que quieras hacer tú.

Por qué el botón de eliminar sigue ahí

Es tentador esconder la cantidad y la papelera de los complementos para que nadie descuadre el pedido. No sirve: esconder un control no impide la acción, y quien quiera puede cambiarlo igual. Además esa fila la comparten otras apps —garantías, seguros de envío—, y esconderles su papelera dejaría a tu cliente sin poder quitar un cargo que no es tuyo.