La mayoría de las tiendas Shopify tienen productos disponibles en varios colores, pero esas opciones no siempre son visibles cuando los clientes navegan por una colección.
Un producto puede estar disponible en Negro, Blanco, Oliva y Azul marino, mientras que la página de colección solo muestra una imagen del producto. Los clientes tienen que abrir la página del producto solo para descubrir los demás colores.
Añadir muestras de color (swatches) a las páginas de colección de Shopify resuelve este problema mostrando los colores de las variantes disponibles directamente debajo de cada tarjeta de producto.
Cómo hacerlo depende de tu tema de Shopify. Dawn y Horizon gestionan las muestras de color de forma diferente, y no todos los temas pueden mostrar muestras de forma nativa en las tarjetas de producto de las colecciones.
En esta guía te explicamos la diferencia y te mostramos cómo añadir muestras de color, de imagen o de botón a las páginas de colección con Stamp — Show Variants on Collection.
¿Qué son las muestras de color en una página de colección de Shopify?
Las muestras de color son pequeños selectores visuales que se muestran debajo de una tarjeta de producto.
En lugar de ver una sola imagen del producto, los compradores ven al instante que el producto también está disponible en otros colores.
Por ejemplo, una chaqueta podría aparecer como una sola tarjeta de producto con:
- Negro
- Oliva
- Arena
- Azul marino
mostrados como cuatro pequeñas muestras de color debajo.
Así los clientes obtienen más información sin tener que abrir cada producto por separado.
Muestras de color vs. mostrar variantes como productos separados
Hay dos formas habituales de hacer más visibles las variantes de Shopify en las páginas de colección.
Las muestras de color mantienen una sola tarjeta de producto y muestran las opciones de variante debajo.
Las variantes como productos muestran las variantes seleccionadas como tarjetas individuales dentro de la cuadrícula de la colección.
Por ejemplo:
- Con muestras: una sola tarjeta «Camiseta Clásica» con muestras Negro, Blanco y Verde debajo.
- Con variantes como productos: Camiseta Clásica Negra, Camiseta Clásica Blanca y Camiseta Clásica Verde aparecen por separado en la colección.
Si prefieres mostrar las variantes como tarjetas de producto individuales, lee nuestra guía:
Cómo mostrar variantes en la página de colección en Shopify
¿Puede Shopify mostrar muestras de color en las páginas de colección?
Depende de tu tema.
Shopify admite datos de muestras (swatch) para las opciones de producto, pero es tu tema el que decide dónde y cómo se muestran esos datos.
Esto significa que tener muestras de color en tu página de producto no implica automáticamente que esas mismas muestras aparezcan en las tarjetas de producto de las colecciones.
¿Puede Dawn mostrar muestras de color en las páginas de colección?
No de forma nativa en las tarjetas de producto de las colecciones.
El tema Dawn de Shopify admite muestras a través del selector de variantes de la página de producto. Si la opción de color de un producto tiene configurados datos de muestra de Shopify, Dawn puede mostrarla como muestra de color o de imagen en la página de producto.
Sin embargo, Dawn no ofrece un ajuste nativo en el editor de temas para mostrar esas muestras de variantes debajo de las tarjetas de producto en las páginas de colección.
Si abres:
Tienda online → Temas → Personalizar → Colección
no encontrarás ningún ajuste integrado como «Mostrar muestras de color» para las tarjetas de producto de colección de Dawn.
Técnicamente, un desarrollador podría crear código Liquid, CSS y JavaScript personalizado para añadir esta funcionalidad a Dawn. Sin embargo, esto requiere modificar la implementación de las tarjetas de producto del tema y mantener esos cambios cada vez que el tema se actualice.
Si quieres mostrar muestras en las páginas de colección de Dawn sin desarrollar ni mantener código personalizado del tema, puedes usar Stamp — Show Variants on Collection.
¿Puede Horizon mostrar muestras de color?
Sí. Horizon admite muestras de color de forma nativa.
Horizon forma parte de la nueva arquitectura de temas de Shopify e incluye compatibilidad nativa con muestras de color y filtros por muestras.
Si usas Horizon, primero configura la opción de color de tu producto con los datos de muestras de Shopify.
Para ello, conecta la opción de producto al metacampo de categoría «Color» de Shopify y asigna el color o la imagen adecuados a cada valor de la opción.
Una vez configurados los datos de muestras, abre:
Tienda online → Temas → Personalizar
y revisa los ajustes disponibles para las tarjetas de producto y la cuadrícula de productos en tu tema Horizon.
Horizon utiliza la nueva arquitectura de temas basada en bloques de Shopify, por lo que las muestras pueden integrarse de forma más natural en el tema que con Dawn.
Aun así, las muestras nativas del tema y una aplicación como Stamp resuelven problemas ligeramente distintos.
¿Cuándo usar Stamp en lugar de las muestras nativas de Horizon?
Si las muestras nativas de Horizon ya te ofrecen exactamente el diseño de colección que necesitas, puedes usarlas.
Pero Stamp resulta útil cuando necesitas más control sobre cómo se muestran las variantes en tu tienda.
Por ejemplo, con Stamp puedes configurar muestras de variantes para estas ubicaciones compatibles:
- Páginas de colección
- Resultados de búsqueda
- Secciones de productos de Stamp
También puedes elegir distintos estilos visuales y fuentes de datos, en lugar de depender por completo de lo que ofrece tu tema.
Esto es especialmente útil si quieres la misma presentación de variantes tanto si tu tienda usa Dawn, Horizon u otro tema de Shopify.
Cómo mostrar muestras de color en las páginas de colección de Shopify con Stamp
La opción más sencilla e independiente del tema es Stamp — Show Variants on Collection.
Stamp está diseñada específicamente para mostrar variantes de Shopify dentro de las cuadrículas de productos.
En lugar de reescribir las tarjetas de producto de tu tema, configuras la visualización de variantes desde la aplicación.
Paso 1: Instala Stamp
Instala Stamp — Show Variants on Collection desde la Shopify App Store.
Paso 2: Activa la incrustación de la aplicación Stamp
Ve a:
Panel de control de Shopify → Tienda online → Temas → Personalizar → Incrustaciones de aplicaciones
Activa la incrustación de la aplicación Stamp y guarda tu tema.
Paso 3: Activa las muestras de variantes
Abre Stamp y activa la funcionalidad de muestras para tus páginas de colección.
Tus productos seguirán siendo tarjetas de producto normales, mientras que sus opciones de variante se mostrarán debajo.
Elige cómo se muestran tus muestras de Shopify
Stamp admite varios estilos de muestra según el tipo de opción que quieras mostrar.
Muestras de color
Las muestras de color son ideales para opciones de color sencillas.
Por ejemplo:
- Negro
- Blanco
- Azul
- Verde
- Rojo
pueden mostrarse como muestras de color visuales en lugar de texto plano.
Muestras de imagen
A veces un color plano no basta para representar una variante.
Las muestras de imagen funcionan mejor para:
- Estampados
- Texturas de tela
- Prints
- Acabados de madera
- Materiales
- Diseños multicolor
En lugar de un simple círculo de color, el comprador ve una imagen que representa esa opción.
Muestras de botón
No todas las variantes necesitan representarse con un color.
Stamp también puede mostrar los valores de las variantes como botones.
Esto es útil para opciones como:
- S / M / L / XL
- 25 cm / 30 cm / 35 cm
- 250 ml / 500 ml / 1 L
Elige de dónde procede el valor de la muestra
Stamp también te permite controlar la fuente que se usa para generar tus muestras.
Variante
Puedes generar la muestra directamente a partir del valor de la opción de variante del producto.
Muestra del tema
Si ya has configurado datos de muestras de Shopify para tus productos, Stamp puede usar esos valores existentes.
Esto es útil cuando tu página de producto ya tiene muestras de color o de imagen correctamente configuradas y quieres reutilizarlas en las páginas de colección.
Metacampo
Para configuraciones de catálogo más avanzadas, puedes usar datos de metacampos como fuente de tus muestras.
Personaliza el aspecto de las muestras en la colección
Las muestras deben integrarse de forma natural en el diseño de tu tienda.
Stamp ofrece controles para personalizar cómo aparecen debajo de las tarjetas de producto.
Según tu configuración, puedes ajustar opciones como:
- Forma de la muestra
- Tamaño de la muestra
- Altura
- Grosor del borde
- Color del borde
- Alineación
- Márgenes y espaciado
Por ejemplo, una tienda de ropa podría usar pequeñas muestras circulares, mientras que una tienda de muebles o telas podría preferir muestras de imagen más grandes.
Muestra las variantes agotadas
Un producto puede tener seis colores, aunque solo cuatro estén disponibles en este momento.
En lugar de ocultar por completo los colores no disponibles, puedes diferenciarlos visualmente de las variantes disponibles.
Así los clientes entienden que el producto existe en ese color, sin que la opción no disponible parezca seleccionable.
Muestras en Dawn con Stamp
Para las tiendas con Dawn, Stamp es especialmente útil porque Dawn no tiene un ajuste nativo de muestras en las tarjetas de colección.
Puedes conservar tus tarjetas de producto de Dawn y usar Stamp para añadir muestras de variantes debajo, sin tener que reconstruir manualmente el código de las tarjetas de producto de colección de Dawn.
Así puedes añadir:
- Muestras de color
- Muestras de imagen
- Muestras de botón
sin dejar de usar tu diseño de colección actual de Dawn.
Muestras en Horizon con Stamp
Horizon ya admite de forma nativa las muestras de color de Shopify, así que no siempre necesitarás una aplicación para funciones básicas de muestras.
Aun así, Stamp puede ser útil si quieres un control más coherente sobre cómo se muestran las variantes en las páginas de colección, los resultados de búsqueda y otras secciones de productos compatibles.
Esto también significa que la presentación de tus variantes no queda completamente ligada a un solo tema.
Si más adelante cambias de Horizon a otro tema, puedes seguir gestionando la visualización de variantes de tus colecciones con Stamp, en lugar de reconstruir toda la configuración para el nuevo tema.
Combina variantes de color y muestras
No tienes que elegir entre mostrar las variantes como productos y mostrar muestras de variantes.
Stamp también te permite combinar ambos enfoques.
Por ejemplo, imagina una chaqueta con:
- 5 colores
- 4 tallas
Podrías mostrar cada variante de Color como su propia tarjeta de producto en la colección y luego mostrar la Talla como muestras de botón debajo de cada tarjeta.
Tu colección podría verse así:
Chaqueta Clásica — Negro
S M L XL
Chaqueta Clásica — Oliva
S M L XL
Chaqueta Clásica — Azul marino
S M L XL
Así los clientes obtienen mucha más información sobre las variantes directamente desde la página de colección, sin necesidad de crear productos separados en Shopify.
¿Qué método deberías usar?
Si usas Dawn y quieres muestras de color debajo de las tarjetas de producto de la colección, no existe un ajuste nativo para ello. Necesitas un desarrollo personalizado del tema o una aplicación como Stamp.
Si usas Horizon, Shopify ya incluye muestras de color nativas, así que comprueba si la implementación nativa del tema ofrece la experiencia que buscas.
Si quieres más control sobre la presentación de las variantes o la misma funcionalidad en distintos temas y cuadrículas de productos, Stamp ofrece una opción independiente del tema.
Resultado final
Mostrar los colores de las variantes directamente en la página de colección ayuda a los compradores a entender qué productos están realmente disponibles antes de abrir la página del producto.
Con Stamp — Show Variants on Collection, puedes añadir muestras de color, de imagen y de botón a las páginas de colección de Shopify y controlar cómo se muestran tus variantes en toda tu tienda.
¿Usas Dawn? Stamp puede añadir muestras en la colección que no están disponibles como ajuste nativo de las tarjetas de producto.
¿Usas Horizon? Puedes usar la compatibilidad nativa de Shopify con las muestras, o Stamp cuando necesites más control sobre la presentación de las variantes en tus colecciones.
¿Prefieres que cada variante aparezca como un artículo independiente en la colección?
Lee nuestra guía completa: Cómo mostrar variantes en la página de colección en Shopify.
