Cómo mostrar solo las imágenes de la variante seleccionada
El cliente selecciona “Rojo” en tu página de producto. La galería se desplaza hasta la imagen roja, pero las fotos de las otras 7 variantes siguen ahí. 35 imágenes irrelevantes compitiendo con las 5 que importan. En móvil, el resultado es un scroll interminable que nadie quiere recorrer.
El comportamiento nativo de Shopify asigna una imagen por variante y desplaza la galería hasta ella. No oculta nada. No filtra nada. Para una tienda con productos de muchos colores, eso genera confusión, errores de compra y devoluciones innecesarias.
En este artículo te explico cómo lograr que tu galería solo muestre las fotos de la variante que el cliente tiene seleccionada.
Contenido
- Por qué importa filtrar la galería
- El comportamiento nativo de Shopify
- Filtrar la galería con Rubik Variant Images
- Configuración paso a paso
- Imágenes que siempre se muestran
- Filtrado con múltiples opciones
- Preguntas frecuentes
- Lectura adicional
Por qué importa filtrar la galería
Un estudio de Baymard Institute revela que el 56 % de los compradores online revisan la galería de imágenes como primer paso al evaluar un producto. Si esa galería contiene fotos de todas las variantes mezcladas, el cliente tiene que distinguir mentalmente cuáles corresponden al color que seleccionó.
Eso genera tres problemas concretos. Los clientes confunden variantes y compran el color equivocado. La tasa de devoluciones sube porque el producto “no se ve como esperaban”. Y en móvil, donde la pantalla es pequeña, deslizar 30 fotos es razón suficiente para abandonar la página.
Filtrar la galería resuelve los tres problemas. El cliente ve 5 fotos relevantes en lugar de 30 mezcladas. Cada foto muestra el producto en el color que seleccionó. La experiencia se parece a lo que ofrecen Nike o Zara.
El comportamiento nativo de Shopify
Shopify permite asignar una imagen a cada variante desde el admin. Cuando el cliente selecciona esa variante, la galería se desplaza hasta la imagen. Eso es todo. Las otras imágenes siguen visibles arriba y abajo en el carrusel.
No existe una opción nativa para ocultar las imágenes de otras variantes. Tampoco hay forma de asignar más de una imagen por variante desde el admin. Si tu producto tiene 6 colores con 5 fotos cada uno, Shopify muestra 30 imágenes sin importar la selección del cliente.
Algunos themes premium intentan resolver esto con código personalizado, pero los resultados son inconsistentes. La mayoría requiere nombres de archivo específicos o convenciones de alt text que se rompen fácilmente.
Filtrar la galería con Rubik Variant Images
Rubik Variant Images & Swatch resuelve exactamente este problema. La app te permite asignar múltiples imágenes a cada variante. Cuando el cliente selecciona un color, la galería se filtra automáticamente y solo muestra las fotos asignadas a esa variante.
El filtrado ocurre al instante, sin recargar la página. Los thumbnails de la galería se actualizan, la imagen principal cambia y el cliente solo ve lo que le importa. Funciona con más de 350 themes, incluyendo Dawn, Horizon, Sense, Craft, Impulse, Impact, Prestige, Focal y Minimog.
Además de filtrar la galería, la app reemplaza los dropdowns nativos por muestras de color visuales: círculos de color, thumbnails del producto o botones tipo pastilla.
Configuración paso a paso
- Instalar Rubik Variant Images. El plan gratuito sirve para probar con un producto.
- Activar el app embed. Entra al editor del theme, ve a App embeds y activa Rubik Variant Images.
- Abrir un producto en la app. Verás todas las variantes listadas con sus imágenes actuales.
- Seleccionar una variante (por ejemplo, “Azul”) y asignar las fotos que corresponden a ese color. Repite para cada variante.
- Guardar y verificar. Abre la página del producto en tu tienda. Al cambiar de color, la galería debería mostrar solo las fotos de la variante seleccionada.
Si tienes muchos productos, usa la función de asignación automática con IA. La app analiza nombres de archivo, nombres de variante y texto alternativo para asignar las fotos sin intervención manual.
Imágenes que siempre se muestran
No todas las imágenes son específicas de una variante. Una tabla de tallas, una guía de cuidados, una foto del empaque o un lifestyle general aplican para todos los colores. En Rubik puedes marcar estas imágenes como compartidas. Se mantienen visibles en la galería sin importar la variante seleccionada.
Las imágenes compartidas aparecen después de las fotos específicas de la variante. Así el cliente siempre ve primero las fotos del color que eligió, seguidas de la información general del producto.
Filtrado con múltiples opciones
Algunos productos tienen más de una opción visual. Por ejemplo, una funda de celular con opciones de “Color” y “Diseño”. Rubik permite filtrar la galería según la combinación de opciones seleccionada. Si el cliente elige “Negro” + “Floral”, la galería muestra solo las fotos de la funda negra con diseño floral.
Esto funciona asignando imágenes a nivel de variante (cada combinación de opciones es una variante en Shopify). La guía completa de configuración está en nuestro artículo de configuración.
Preguntas frecuentes
¿Shopify puede filtrar la galería por variante de forma nativa?
No. Shopify desplaza la galería hasta la imagen de la variante, pero no oculta las demás. Para filtrar la galería necesitas una app como Rubik Variant Images.
¿Necesito modificar el código de mi theme?
No. Rubik Variant Images funciona como app embed. Lo activas desde el editor del theme sin tocar código. Compatible con más de 350 themes.
¿Cuántas imágenes puedo asignar por variante?
No hay límite. Puedes asignar 3, 5, 10 o más fotos por variante. También soporta videos y modelos 3D.
¿El filtrado funciona en móvil?
Sí. La galería se filtra al instante en cualquier dispositivo. En móvil es donde más impacto tiene, porque evita que el cliente tenga que deslizar docenas de fotos irrelevantes.
¿Qué pasa si una imagen aplica para todas las variantes?
Márcala como imagen compartida en Rubik. Se mantendrá visible en la galería sin importar la variante que el cliente seleccione.
¿El filtrado afecta la velocidad de la página?
No. Rubik carga los datos de asignación desde metafields de Shopify con la página. El filtrado ocurre en el navegador del cliente sin llamadas a servidores externos.
¿Funciona con page builders como GemPages o PageFly?
Sí. Rubik es compatible con 7 page builders: GemPages, PageFly, EComposer, Instant, Beae, Foxify y Replo.
Lectura adicional
