¿Quieres mostrar una segunda imagen cuando los clientes pasen el cursor sobre un producto en tus páginas de colección de Shopify? ¿O quizás quieres mostrar diferentes imágenes de hover para cada variante? ¡Esta guía es para ti!
Activar el efecto hover en tu tema
1- Inicia sesión en tu panel de administración de Shopify y ve a Tienda online desde el menú lateral.
2- Busca tu tema activo y haz clic en el botón Personalizar.
3- En el editor del tema, selecciona una página de colección desde la barra de vista previa superior.
4- Haz clic en el icono de Inspector en la parte superior derecha.
5- Luego, haz clic en la sección de cuadrícula de productos en la página.
6- En el panel de configuración de la derecha, activa la opción Mostrar segunda imagen al pasar el cursor.
7- No olvides hacer clic en Guardar.
Presiona Enter o haz clic para ver la imagen en tamaño completo.
Cómo activar imágenes de hover para variantes de productos
Para mostrar correctamente las imágenes de las variantes al pasar el cursor, puedes usar nuestra aplicación:
Stamp — Variants on Collection
Stamp te permite mostrar las variantes de productos como elementos separados en las páginas de colección. Puedes mostrar variantes por color, talla o material, personalizarlas por colección e incluso ocultar las variantes sin stock. Además, garantiza que las imágenes de hover funcionen correctamente con la asignación adecuada de imágenes a cada variante.
Sigue estos pasos para configurarlo:
Luego, ve a la sección Medios en la parte superior y sube esas mismas imágenes en el orden correcto.
Inicia sesión en tu panel de administración de Shopify.
Abre la aplicación Stamp — Variants on Collection.
En Configuración general, selecciona la colección que deseas editar.
Ve a la sección Productos en tu panel de administración de Shopify.
Abre un producto de esa colección y desplázate hacia abajo hasta la sección Variantes.
Sube las imágenes correctas para cada variante.
❗ Consejos importantes:
- ¡El orden de las imágenes es importante!
- Las primeras dos imágenes → para la primera variante
- Las siguientes dos imágenes → para la segunda variante
- Y así sucesivamente…
Esto garantiza que cada variante esté asociada con la imagen de hover correcta.
🙏 ¡Gracias por leer!
Puedes ver el video tutorial completo aquí:
🎥 Haz clic para verlo en YouTube
