Muestras de color en la página de colección de Shopify
Un cliente navega tu página de colección. Ve una camiseta que le gusta, pero solo aparece en negro. No sabe que también viene en rojo, azul y verde hasta que hace clic y entra a la página de producto. Si no le gusta el negro, tal vez nunca haga clic.
Las muestras de color en la página de colección resuelven eso. Pequeños círculos de color debajo de cada tarjeta de producto muestran todas las variantes disponibles. El cliente ve de un vistazo que hay 4 colores y puede incluso cambiar la imagen de la tarjeta al pasar el cursor sobre un color diferente.
En este artículo te explico cómo agregar muestras de color a las tarjetas de producto en las páginas de colección de Shopify.
Contenido
- Por qué importan las muestras en la colección
- Diferencia entre muestras en producto y colección
- Cómo funciona Rubik Combined Listings
- Configuración paso a paso
- Cambio de imagen al pasar el cursor
- SEO y productos combinados
- Preguntas frecuentes
- Lectura adicional
Por qué importan las muestras en la colección
La página de colección es donde la mayoría de los clientes descubren tus productos. Antes de llegar a una página de producto, el cliente escanea decenas de tarjetas de producto. Si cada tarjeta solo muestra un color, el cliente se pierde la variedad que ofreces.
Las muestras de color en las tarjetas de producto resuelven tres problemas. Primero, muestran la variedad disponible sin necesidad de hacer clic. Segundo, permiten al cliente filtrar visualmente por color antes de entrar a la página de producto. Tercero, reducen la cantidad de clics necesarios para encontrar el producto en el color deseado.
Marcas como Zara y H&M usan muestras en sus grids de colección. El efecto es que el cliente siente que hay más opciones y pasa más tiempo navegando la tienda.
Diferencia entre muestras en producto y colección
Es importante entender que las muestras de color en la página de producto y las de la página de colección son funcionalidades diferentes que requieren herramientas distintas.
Página de producto: Rubik Variant Images reemplaza los dropdowns por muestras visuales y filtra la galería de imágenes por variante. Funciona dentro de la página de un solo producto. Aprende a personalizar las muestras en esa página.
Página de colección: Rubik Combined Listings agrega muestras de color a las tarjetas de producto en el grid de la colección. Conecta productos individuales (cada color es un producto separado) con muestras visuales que cambian la imagen de la tarjeta.
¿Por qué son apps separadas? Porque resuelven problemas diferentes con enfoques técnicos distintos. Las muestras en la página de producto trabajan con variantes dentro de un solo producto. Las muestras en la colección trabajan con múltiples productos conectados.
Cómo funciona Rubik Combined Listings
Rubik Combined Listings usa la funcionalidad de Combined Listings de Shopify para conectar productos individuales. Cada color es un producto separado en Shopify, con su propio conjunto de imágenes, precio y disponibilidad. La app los agrupa bajo una sola tarjeta de producto en la colección y muestra muestras de color.
Cuando el cliente pasa el cursor sobre una muestra de color en la colección, la imagen de la tarjeta cambia al producto correspondiente. Si hace clic en la muestra, va directamente a la página de ese producto. Si hace clic en la tarjeta, va al producto principal con las muestras disponibles.
Esta estructura tiene ventajas para el SEO: cada color tiene su propia URL, sus propias imágenes y su propio título optimizable. Google puede indexar cada variante de color como un producto independiente. Más detalles en rubikify.com.
Configuración paso a paso
- Crear productos individuales. Cada color es un producto separado en Shopify. “Camiseta Roja”, “Camiseta Azul”, “Camiseta Verde”. Cada uno con sus propias imágenes.
- Instalar Rubik Combined Listings desde la App Store de Shopify.
- Conectar los productos. En la app, agrupa los productos que representan el mismo artículo en diferentes colores.
- Activar el app embed en el editor del theme.
- Verificar. Abre tu página de colección y comprueba que las muestras de color aparecen debajo de las tarjetas de producto.
Cambio de imagen al pasar el cursor
Una de las funciones más valiosas de las muestras en la colección es el cambio de imagen. Cuando el cliente pasa el cursor sobre el círculo azul, la foto de la tarjeta cambia a la camiseta azul. Sin hacer clic. Sin cargar otra página.
Eso permite al cliente “probarse” visualmente cada color desde la colección. Es una experiencia similar a la de las grandes tiendas online y reduce significativamente la fricción en el proceso de descubrimiento.
SEO y productos combinados
Al tener cada color como un producto independiente, cada uno tiene su propia URL y puede aparecer en los resultados de búsqueda de Google. “Camiseta roja” y “camiseta azul” pueden ser resultados separados. Eso amplía tu presencia en búsquedas de long tail.
Además, cada producto puede tener su propio título, descripción y etiquetas optimizados para su color específico. Eso es algo que las variantes dentro de un solo producto no permiten.
Para optimizar las imágenes de variantes dentro de cada producto individual, usa Rubik Variant Images. Así cada color tiene su propia galería filtrada cuando el cliente entra a la página de producto.
Preguntas frecuentes
¿Rubik Variant Images muestra muestras en la página de colección?
No. Rubik Variant Images funciona en la página de producto. Para muestras en la página de colección necesitas Rubik Combined Listings, una app separada diseñada para las tarjetas de producto del grid.
¿Necesito crear un producto por cada color?
Sí. Rubik Combined Listings conecta productos individuales. Cada color es un producto separado en Shopify con sus propias imágenes. La app los agrupa bajo una sola tarjeta con muestras de color.
¿La imagen de la tarjeta cambia al pasar el cursor sobre una muestra?
Sí. Al pasar el cursor sobre una muestra de color, la imagen de la tarjeta de producto cambia al producto correspondiente. En móvil, el cambio ocurre al tocar la muestra.
¿Tener cada color como producto separado afecta el SEO?
De forma positiva. Cada color tiene su propia URL, título y descripción que Google puede indexar. Eso amplía tu presencia en búsquedas de long tail como “camiseta roja” o “camiseta azul”.
¿Puedo usar Combined Listings y Variant Images juntas?
Sí. Combined Listings maneja las muestras en la página de colección. Variant Images maneja la galería filtrada y las muestras dentro de la página de producto. Se complementan.
¿Cuántos themes soporta Rubik Combined Listings?
Compatible con la mayoría de los themes de Shopify, incluyendo todos los gratuitos (Dawn, Horizon, Sense, Craft) y los premium más populares.
¿Puedo personalizar la apariencia de las muestras en la colección?
Sí. Puedes configurar la forma (círculo, cuadrado), el tamaño y el comportamiento de las muestras desde la app.
Lectura adicional
