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

Comportamiento

Activa o desactiva secciones del panel:

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 página de producto). No hay nada que configurar.

Ayuda emergente

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 la ayuda emergente con el nombre de cada color: fondo y texto (vacíos, siguen a los colores del formulario: blanco y negro por defecto, con un borde fino), radio (0 por defecto), 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 la ayuda emergente del color diga también el recargo («Gris (+€80,00)»), desactívalo en Diseño › Opciones › Mostrar el recargo en la ayuda emergente 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 espacio, 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 valores por defecto — 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 las ventajas. Bajo el título del paso, Separación entre título y descripción (8 px por defecto) mueve solo ese hueco; la distancia de la cabecera a las opciones no cambia.

Las ventajas 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”). En un paso donde ninguna opción tiene precio —cómo nos envías la graduación, por ejemplo— las tarjetas no muestran esa etiqueta: «Incluido» solo aparece junto a un recargo. Y el espacio dentro de la tarjeta: espacio a la derecha del texto antes del precio (24 px en escritorio y 0 en móvil por defecto), separación entre el título y la descripción de la opción (2 px por defecto) y espacio sobre las ventajas (12 px por defecto). También el hueco entre la imagen y el texto y el redondeo de la imagen de la opción; el encaje de la imagen: Entera (por defecto) la enseña completa dentro de su cuadrado, y si no es cuadrada quedan márgenes; Recortar para llenar ocupa todo el cuadrado y corta los bordes, útil con fotos; las ventajas (relleno, forma píldora / redondeada / recta y separación entre ventajas); 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 por defecto con los valores que el panel usaba hasta ahora: no cambia nada hasta que los toques. La excepción es el encaje: antes la imagen se recortaba siempre, y ahora por defecto se ve entera. Con una imagen cuadrada, que es lo habitual, se ve igual.

Para las opciones con colores seleccionables: el tamaño de las muestras de color (por debajo de 32 px cuesta acertarles en el móvil), si la ayuda emergente que aparece al pasar por una muestra de color 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» (por defecto; en los colores, la muestra de color 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. Por defecto es 0 y el pie no cambia.

Mostrar la atribución de GetOptical en la cabecera — desactivado por defecto en el plan de pago. Si lo activas, en la esquina superior izquierda del configurador aparece un icono de 24 píxeles (solo el icono, sin texto) que enlaza a la página de la app en el App Store. Es el patrón de atribución que Shopify permite a las apps en la tienda. En el plan gratuito de cortesía el icono forma parte del plan y se muestra siempre; el ajuste no aparece.

Recordar la configuración a medias — desactivado por defecto; 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 vuelve al 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. Desactívalo si varios clientes comparten un mismo dispositivo (un quiosco en tienda). Debajo, «Ofrecer continuar a partir de N pasos completados» (2 por defecto): 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 desactivada: si la única opción está ahí a propósito —un precio que enseñar, una condición que leer—, déjala desactivada. 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/complementos + 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 complementos. 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 de complemento, los tamaños, los separadores— lo muestra 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 tres ajustes en la incrustación de la app:

Compactar las líneas de complementos — 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 desactivada, y activada solo cambia tamaños.
Qué controles enseña cada línea del conjunto — tres ajustes, todos por defecto como hasta ahora (nada oculto): Complementos en el carrito (con sus controles, sin controles u ocultos del carrito), Ocultar el botón de eliminar de los accesorios y Ocultar el selector de cantidad de las lentillas. Ver Botón y carrito.
CSS personalizado — para cualquier ajuste que quieras hacer tú. En Temas probados están las clases que la integración con el carrito deja en cada fila.

La cantidad, desde el carrito

Si el cliente sube la cantidad de la montura en el carrito de tu tema, las lentes y los tratamientos se multiplican con ella; los accesorios van libres; y las lentillas vuelven a sus cajas, porque esas se eligen en el configurador. Cantidad del conjunto desde el carrito, en la incrustación de la app, elige entre «Escalar» (por defecto) y «Bloquear» (siempre 1 por conjunto, con un aviso). Detalle en Temas probados.