Aprender a activar swatches y muestras visuales transforma los menús desplegables en atractivos círculos de tono, botones de talla y muestras con fotografía. Esta mejora en la experiencia de compra agiliza la selección de opciones sin garantizar cambios en la conversión de tu tienda.
El sistema es liviano, cumple con estándares de accesibilidad web (botones con altura táctil mínima de 44 px) y funciona de forma nativa desde el plan inicial sin ralentizar el catálogo.
Antes de empezar
Los selectores visuales están disponibles desde el plan inicial para todas las tiendas.
Ten definidos atributos globales (como "Color" o "Talla") en tu catálogo y los códigos de color hexadecimales o miniaturas de cada variante.
Paso 1: Configura swatches y muestras visuales en atributos globales
Define el formato visual que representará a cada grupo de opciones:
- En el panel de control, dirígete a Productos > Atributos.
- En la tabla de la derecha, localiza el atributo que deseas personalizar (por ejemplo, "Color" o "Talla").
- Haz clic en "Editar" y ubica el selector "Cómo mostrar este atributo".
- Selecciona la modalidad correspondiente:
- Color: muestra círculos con el tono exacto.
- Forma o texto: botones rectangulares compactos con texto legible (S, M, L, XL).
- Imagen: miniaturas de textura o estampado.
- Haz clic en el botón "Actualizar atributo" (sin confirmar).
Qué deberías ver: La tabla de atributos indicando el tipo visual asignado en la columna correspondiente.
Paso 2: Asigna colores o imágenes a cada término
Personaliza el tono o textura específica para cada valor de la lista:
- Regresa a Productos > Atributos y pulsa "Configurar términos" junto al atributo (por ejemplo, en "Color").
- En la lista de términos, haz clic en "Editar" sobre uno de los valores (por ejemplo, "Azul Marino" (sin confirmar)).
- Localiza el campo "Color" y selecciona el tono deseado en la paleta o anota el código (ejemplo:
#001F3F[EJEMPLO]). - Si el tipo es imagen, pulsa "Subir o elegir imagen" y selecciona la foto de muestra.
- Haz clic en el botón "Guardar cambios".
Qué deberías ver: La muestra de color o textura visible junto al nombre del término en la tabla de gestión.
Paso 3: Comprueba la experiencia de compra en la tienda
Verifica cómo interactúa el comprador con los botones interactivos en la página del producto:
- Abre en tu navegador cualquier producto variable que utilice los atributos configurados.
- Observa el selector: el desplegable fue sustituido por botones táctiles limpios y círculos de color.
- Haz clic sobre uno de los círculos; el sistema seleccionará la variante y actualizará la foto principal y el precio de inmediato.
- Si una combinación de talla y color está agotada, el botón aparecerá atenuado automáticamente.
Qué deberías ver: Los selectores respondiendo al tacto de forma ágil, con foco visual claro para navegación cómoda.
Problemas comunes
- Los colores siguen viéndose como lista desplegable: El atributo se creó como personalizado dentro del producto; conviértelo en atributo global en Productos > Atributos.
- El círculo de color se ve blanco o transparente: Comprueba haber incluido el símbolo numeral (
#) en el código hexadecimal de 6 caracteres (ejemplo:#D92D20[EJEMPLO]). - Al hacer clic en un color no cambia la foto: Abre la pestaña Variaciones dentro de la edición del producto y asigna la foto correspondiente a cada variante.
Preguntas frecuentes
¿Puedo combinar círculos de color y botones de talla a la vez?
Sí, puedes mostrar círculos de color para el tono y botones de pastilla para las tallas en el mismo producto sin ningún inconveniente.
¿Los swatches afectan la velocidad de carga en celulares?
No. El módulo opera con CSS nativo y JavaScript ultraliviano, sin garantizar el rendimiento de todas las instalaciones.
¿Qué pasa con las tallas agotadas?
El botón de la talla sin existencias permanece visible con opacidad reducida y una línea diagonal suave, evitando que el usuario intente comprarla por error.