Guía de configuración de imágenes de variantes en Shopify
Configurar imágenes de variantes en Shopify debería ser sencillo. Subes las fotos, las asignas a cada color y la galería se filtra sola. Pero la realidad es diferente: Shopify solo permite una imagen por variante, no filtra la galería y los dropdowns no muestran ninguna vista previa del color.
Con Rubik Variant Images puedes asignar múltiples imágenes por variante, filtrar la galería de forma automática y mostrar muestras de color visuales. En esta guía te llevo paso a paso por todo el proceso.
Contenido
- Antes de empezar
- Paso 1: Instalación
- Paso 2: Activar el app embed
- Paso 3: Asignar imágenes a variantes
- Paso 4: Configurar muestras de color
- Paso 5: Asignación con IA (opcional)
- Paso 6: Imágenes compartidas
- Paso 7: Verificación
- Errores comunes
- Preguntas frecuentes
- Lectura adicional
Antes de empezar
Antes de configurar la app, prepara tus imágenes de producto. Lo ideal es tener entre 3 y 6 fotos por variante: vista frontal, trasera, detalle, comparación de tamaño y una foto lifestyle. Sube todas las imágenes al producto en Shopify. No necesitas asignarlas a variantes en el admin de Shopify; eso lo hará Rubik.
Si usas nombres de archivo descriptivos (como “camiseta-roja-frontal.jpg” o “camiseta-azul-detalle.jpg”), la asignación con IA será más precisa. Lo mismo aplica para el texto alternativo de cada imagen.
Paso 1: Instalación
Ve a la página de Rubik Variant Images en la App Store de Shopify y haz clic en “Add app”. Sigue el proceso de instalación estándar de Shopify. El plan gratuito incluye 1 producto para que puedas probar antes de decidir.
La instalación no modifica tu theme. Rubik funciona como app embed, lo que significa que se activa y desactiva desde el editor del theme sin tocar código.
Paso 2: Activar el app embed
Después de instalar la app, activa el embed en tu theme:
- Ve a tu admin de Shopify > Tienda online > Personalizar.
- En el editor del theme, haz clic en “App embeds” (en la barra lateral izquierda).
- Busca “Rubik Variant Images” y actívalo.
- Guarda los cambios.
Esto permite que la app reemplace los selectores de variantes nativos y filtre la galería en las páginas de producto.
Paso 3: Asignar imágenes a variantes
Abre la app de Rubik desde tu admin de Shopify. Selecciona el producto que quieres configurar. Verás una lista de todas las variantes con las imágenes del producto disponibles.
Haz clic en una variante (por ejemplo, “Rojo”). Selecciona las imágenes que corresponden a esa variante. Arrastra para reordenar si necesitas un orden específico. La primera imagen será la imagen principal que se muestra al seleccionar esa variante.
Repite para cada variante. Cuando termines, haz clic en “Guardar”. La galería de tu tienda ahora filtrará las imágenes según la variante seleccionada.
Consejo: asigna al menos 3 imágenes por variante. Lo ideal son 5 a 6 para darle al cliente una vista completa del producto. Más detalles en nuestro artículo sobre múltiples imágenes por variante.
Paso 4: Configurar muestras de color
Rubik reemplaza los dropdowns nativos de Shopify por muestras visuales. En la configuración de la app, elige el tipo de swatch para cada opción del producto:
- Círculos de color: ideales para la opción “Color”. Muestra el tono exacto.
- Thumbnails de imagen: perfectos cuando el producto cambia visualmente entre variantes (ropa, muebles).
- Botones tipo pastilla: útiles para “Talla”, “Material” y opciones no visuales.
Puedes mezclar tipos. Por ejemplo, círculos de color para “Color” y pastillas para “Talla” en el mismo producto. La personalización de las muestras se explica a fondo en nuestra guía de personalización de muestras.
Paso 5: Asignación con IA (opcional)
Si tienes decenas o cientos de productos, asignar imágenes a mano toma demasiado tiempo. Rubik ofrece dos funciones para acelerar el proceso:
IA Auto-Assign: La app analiza cuatro datos por imagen: nombre del producto, nombre de la variante, nombre del archivo y texto alternativo. Con eso asigna cada foto a la variante que le corresponde. Tú revisas el resultado y confirmas. Menos de un minuto por producto.
Asignación masiva: Para catálogos donde las imágenes ya están ordenadas por variante en la galería de Shopify. La app reconoce el patrón y asigna todo automáticamente en segundo plano. Funciona con cientos de productos a la vez.
Paso 6: Imágenes compartidas
Algunas fotos aplican para todas las variantes: tabla de tallas, instrucciones de lavado, foto del empaque, imagen lifestyle general. Marca estas imágenes como compartidas en la app. Se mantienen visibles en la galería sin importar la variante seleccionada, siempre después de las fotos específicas de cada variante.
Paso 7: Verificación
Abre la página del producto en tu tienda (no en el editor del theme, sino en la URL real de la tienda). Verifica lo siguiente:
- Las muestras de color aparecen en lugar del dropdown.
- Al hacer clic en una muestra, la galería se filtra y solo muestra las fotos de esa variante.
- Las imágenes compartidas permanecen visibles con cualquier variante.
- En móvil, el comportamiento es el mismo.
Si algo no funciona como esperas, revisa nuestra guía de solución de problemas.
Errores comunes
No activar el app embed. Si instalas la app pero no activas el embed en el editor del theme, las muestras no aparecerán. Es el paso que más gente se salta.
Olvidar guardar. Después de asignar imágenes en la app, haz clic en “Guardar”. Los cambios no se aplican hasta que guardas.
Probar en el editor del theme. El editor del theme no ejecuta las apps de la misma forma que la tienda real. Siempre verifica en la URL de tu tienda, no en el personalizador.
Imágenes sin subir a Shopify. Rubik trabaja con las imágenes que están en tu producto de Shopify. Si las fotos no están subidas al producto, la app no puede asignarlas.
Preguntas frecuentes
¿Cuánto tiempo toma configurar un producto?
De forma manual, entre 2 y 5 minutos dependiendo del número de variantes e imágenes. Con la asignación por IA, menos de un minuto.
¿Necesito conocimientos técnicos?
No. Todo se hace desde la interfaz de la app y el editor del theme. No necesitas escribir código ni editar archivos del theme.
¿La app modifica mi theme?
No. Rubik funciona como app embed. Se activa y desactiva desde el editor del theme. Si desinstalas la app, tu theme vuelve a su estado original.
¿Puedo reordenar las imágenes dentro de cada variante?
Sí. Arrastra las imágenes en la app para definir el orden. La primera imagen será la vista principal al seleccionar esa variante.
¿Qué pasa si agrego nuevas imágenes después de configurar?
Las nuevas imágenes aparecen como no asignadas. Puedes asignarlas manualmente o ejecutar el Auto-Assign con IA para que la app las distribuya.
¿Funciona con themes personalizados?
Rubik es compatible con más de 350 themes, incluyendo todos los gratuitos de Shopify y los premium más populares. Si tu theme usa una galería de producto estándar de Shopify, la compatibilidad es muy probable.
Lectura adicional
