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.

Panel

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

Pantalla completa (escritorio)

Con la posición en Pantalla completa, en escritorio el configurador ocupa toda la pantalla dividida a partes iguales: a la izquierda, la imagen del producto — con el nombre y la variante — y el resumen en vivo de lo que el cliente lleva configurado, con su total; a la derecha, los pasos. Si el cliente cambia de variante dentro del formulario (un color de montura, un pack), la foto y el nombre de la izquierda cambian con él.

Ancho máximo (visible al elegir esta posición): en 0 el área usa toda la pantalla; por encima de 0 el contenido se centra y lo que sobra se convierte en márgenes laterales — para que en un monitor muy ancho el configurador no se desparrame.

Fondo de la columna de la imagen (también solo en esta posición): el color de toda la mitad izquierda — foto, resumen y su margen lateral. Vacío sigue al fondo de las tarjetas.

Animación de entrada: la pantalla completa no entra deslizándose como el panel lateral; aparece con un fundido y un gesto corto que eliges aquí — zoom, subida, dos mitades (la foto desde la izquierda y los pasos desde la derecha) o solo el fundido. Quien tiene activado «reducir movimiento» en su dispositivo ve siempre el fundido a secas — y lo mismo en el panel lateral: aparece con un fundido en vez de deslizarse, y los pasos cambian sin desplazarse. No hay que configurar nada: la app obedece la preferencia del dispositivo del cliente.

En móvil se mantiene el panel lateral de siempre: una pantalla partida necesita anchura para existir. No cambia nada más — mismos pasos, mismos precios, mismo carrito.

Accesibilidad: el panel es un diálogo modal de verdad. Mientras está abierto, el resto de la página queda inerte para el teclado y los lectores de pantalla; el foco entra al abrir, no se escapa con Tab y vuelve al botón al cerrar. La barra de progreso anuncia en qué paso va («paso 2 de 5»), todo lo enfocable lleva un anillo de foco de dos capas que se ve sobre cualquier color de fondo, y el botón «Atrás» del navegador retrocede un paso (en el primero, cierra el panel sin salir de la ficha). No hay nada que configurar.

Tooltips y ayuda

Cada opción (y cada grupo de colores) admite un texto de ayuda: si lo rellenas, aparece un «?» junto al título que el cliente abre para leer una explicación más larga, con lo que la descripción puede quedarse en una línea. Se muestra al pasar el ratón o al pulsarlo, y se cierra tocando fuera.

Esta sección viste esa burbuja, los «?» de los campos de la receta y el tooltip con el nombre de cada color: fondo y texto (vacíos, siguen a los colores del formulario: blanco y negro de fábrica, con un filo fino), radio (0 de fábrica), relleno horizontal y vertical, tamaño de letra, ancho máximo de la burbuja de ayuda (0 = tan ancha como la columna de texto) y color y tamaño del icono «?».

Si no quieres que el tooltip del color diga también el recargo («Gris (+€80,00)»), apágalo en Diseño › Opciones › Mostrar el recargo en el tooltip del color: queda solo el nombre, y el precio sigue bajo la fila al elegir un color.

Plantilla de diseño

Un aspecto completo en un clic, antes de tocar nada más:

Clásica — el panel de siempre, pegado al borde y compacto.
Moderna — más aire, esquinas suaves, bordes finos y una escala de tipografía pensada; el panel flota como una tarjeta separada del borde. Es la que traen los formularios de ejemplo.
Oscura — la misma disposición que Moderna sobre fondo carbón, tarjetas grafito, tinta clara y acento bermellón. Pensada para gafas de sol y monturas premium: un configurador que parece parte del producto. Es la única plantilla que trae sus propios colores.

Clásica y Moderna cambian espaciado, esquinas y tamaños de texto, nunca tus colores. Oscura sí los escribe al elegirla, y al volver a otra plantilla los devuelve a los de fábrica — el panel te avisa si has cambiado algo desde que la aplicaste, con un botón para volver a aplicarla.

Para un panel oscuro conviene usar los iconos del juego on-dark/ del pack de iconos: sobre fondo oscuro, los de fondo claro desaparecen.

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. Bajo el título del paso, Separación entre título y descripción (8 px de fábrica) mueve solo ese hueco; la distancia de la cabecera a las opciones no cambia.

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”). Y el aire dentro de la tarjeta: aire a la derecha del texto antes del precio (24 px en escritorio y 0 en móvil de fábrica), separación entre el título y la descripción de la opción (2 px de fábrica) y espacio sobre los chips de ventaja (12 px de fábrica). También el hueco entre la imagen y el texto y el redondeo de la imagen de la opción; los chips de ventaja (relleno, forma píldora / redondeada / recta y separación entre chips); la separación entre las muestras de color; y la tarjeta de accesorio (su relleno y el hueco de la imagen al texto). Todos vienen de fábrica con los valores que el panel usaba hasta ahora: no cambia nada hasta que los toques.

Para las opciones con colores seleccionables: el tamaño de las bolitas (por debajo de 32 px cuesta acertarles en el móvil), si el tooltip que aparece al pasar por una bolita muestra también el recargo («Gris (+€80,00)») o solo el nombre, y el texto «Elige un color para continuar» — puedes reescribirlo, y decidir si se muestra bajo la fila de colores o solo como aviso sobre el botón Siguiente.

Complementos, colores y accesorios agotados: qué hace el panel con lo que no se puede vender ahora mismo — mostrarlo desactivado con «Agotado» (de fábrica; en los colores, la bolita tachada) u ocultarlo. Si ocultar dejara un paso sin opciones, se muestran desactivadas. Ver lo agotado se ve antes de elegirlo.

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”).

Espacio libre a la derecha del pie — si tu tienda tiene un botón de chat en la esquina inferior derecha (WhatsApp, Tidio, Gorgias…), queda justo encima del botón Siguiente del panel. Este ajuste deja ese hueco vacío para que el chat flote sobre nada: unos 72 px bastan para el botón de chat habitual. De fábrica es 0 y el pie no cambia.

Recordar la configuración a medias — apagado de fábrica; actívalo tú si lo quieres. Si el cliente cierra el configurador sin terminar y vuelve al mismo producto en los 7 días siguientes, en vez del primer paso ve «Tenías una configuración a medias» con dos botones: Continuar donde lo dejaste y Empezar de nuevo. Al continuar recupera lo que había elegido (con los precios de hoy, y solo las opciones que sigan existiendo) y aterriza en el primer paso que le falte. Lo que no se recuerda: la graduación, la receta de lectura, las lentillas y los archivos, que vuelve a introducir. El borrador vive en el navegador del cliente, nunca en nuestros servidores, y se borra al añadir al carrito, al empezar de nuevo o a los 7 días. Apágalo si varios clientes comparten un mismo dispositivo (un quiosco en tienda). Debajo, «Ofrecer continuar a partir de N pasos completados» (2 de fábrica): con menos pasos hechos no se guarda nada, porque rehacer uno cuesta lo mismo que responder al aviso; súbelo si solo quieres rescatar a quien casi terminó. Los textos del aviso se cambian en Diseño › Textos, y en Analítica ves cuántos retoman.

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: ESF -2.50 · CIL -1.25 · EJE 90° · ADD +1.50
OI: ESF -3.00 · CIL 0.00 · EJE — · ADD +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

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.

Y al lado, en los pasos de elección única, Si este paso solo tiene una opción, elegirla y saltar el paso: el cliente no ve esa pantalla, la opción va igualmente al pedido con su etiqueta, y el botón Atrás vuelve a la última pantalla que sí vio. Viene apagada: si la única opción está ahí a propósito —un precio que enseñar, una condición que leer—, déjala apagada. Un paso cuya única opción tenga colores seleccionables o un enlace externo se enseña siempre.

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í.

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ú.