Muestra más del producto con un solo movimiento del cursor.
Kowal Catalog Hover Image
Cambia la imagen en el listado de productos al pasar el cursor sobre ella. Muestra una segunda vista, un detalle u otra cara del producto sin abrir su ficha.
Segunda imagen · Vista previa de detalles · Ajustes por producto
CÓMO FUNCIONA EN LA PRÁCTICA
01 · Eliges la segunda imagen En la galería del producto asignas una imagen al rol hover.
02 · El cliente pasa el cursor sobre la imagen El listado muestra la imagen alternativa asignada.
03 · El cursor sale del producto Se vuelve a mostrar la imagen original.
¿Qué gana tu tienda?
Descubre las funciones, el uso y la configuración del módulo.
Conoce el módulo
Catalog Hover Image es un módulo para Magento 2 (versiones 2.3.* y 2.4.*) que enriquece el listado de productos con una funcionalidad interactiva. Al pasar el cursor sobre cualquier producto de la lista, se muestra una segunda imagen, la llamada hover image, que puede configurarse individualmente para cada producto en el panel de administración.
Funciones clave del módulo
Navegación interactiva por los productos: Permite a los clientes previsualizar rápidamente una imagen alternativa del producto sin tener que acceder a la página de detalles.
Configuración sencilla: En el panel de administración de Magento se puede asignar una hover image para cada producto, lo que ofrece un control completo sobre la presentación del catálogo.
Mayor atractivo visual de la tienda: El efecto dinámico de cambio de imagen al pasar el ratón atrae la atención de los clientes y puede aumentar la interacción y las tasas de conversión.
Ventajas de utilizar el módulo
Mejora de la experiencia de usuario: Facilita que los clientes conozcan el producto, lo que puede ayudarles a tomar decisiones de compra más rápidas.
Personalización de la presentación de productos: Permite mostrar distintos aspectos del producto, como otros colores, patrones o detalles.
Compatibilidad y fiabilidad: El módulo ha sido probado y es totalmente compatible con las versiones Magento 2.3.* y 2.4.*.
Cómo funciona
Instalación del módulo: El proceso de instalación es sencillo y no requiere conocimientos técnicos avanzados.
Configuración de la hover image: En el panel de administración, accede a la edición del producto y añade una imagen adicional como hover image.
Efecto en la tienda: Al pasar el cursor sobre un producto en el listado, se mostrará automáticamente la segunda imagen configurada.
Soporte y documentación
Instrucciones de instalación: Los pasos detallados de instalación están disponibles en la documentación incluida.
Soporte técnico: En caso de dudas o problemas con el módulo, ofrecemos soporte técnico profesional.
El uso del módulo Catalog Hover Image es una forma sencilla de mejorar la funcionalidad de la tienda y aumentar la satisfacción de los clientes mediante una presentación de productos más interactiva y atractiva.
Rol de la imagen y comportamiento del listado
El módulo se activa en Stores → Configuration → Kowal → Hover Catalog Image. La imagen asignada se guarda en el atributo hover_catalog. Si no existe, el código comprueba la miniatura del producto como imagen de sustitución.
Al salir de la imagen, se restaura la imagen original. El script también gestiona la actualización del contenido del listado. La implementación utiliza jQuery y RequireJS; la integración con otro método de renderizado de listados de productos debe adaptarse al tema.
Instalación mediante Composer
Paquete: kowal/hover-image; módulo: Kowal_CatalogHoverImage. Después de configurar el acceso al repositorio Kowal, instala el paquete, activa el módulo, realiza la actualización de Magento y limpia la caché. Para el modo de producción, ten en cuenta la compilación y el despliegue de contenido estático adecuados para el entorno.
De la configuración al resultado
1. Eliges la segunda imagen En la galería del producto asignas una imagen al rol hover.
2. El cliente pasa el cursor sobre la imagen El listado muestra la imagen alternativa asignada.
3. El cursor sale del producto Se vuelve a mostrar la imagen original.
El detalle visible ya en el catálogo
Ejemplo: la imagen principal muestra el producto de frente, y la imagen hover muestra su parte trasera o un primer plano del material. El cliente descubre más detalles mientras navega por el listado.
El efecto se activa con el cursor. En dispositivos táctiles, la forma de presentación debe comprobarse en el tema utilizado.
Enriquece la presentación de productos en el catálogo
* En el entorno de producción, utiliza la opción --keep-generated
Tipo: Composer
El módulo está disponible en el repositorio composer:
Repositorio Composer de Kowal: https://repo.kowal.store
Añade el repositorio composer a la configuración:
Recibirás por correo electrónico los datos de acceso al repositorio Composer (dirección de e-mail del cliente y token de licencia) después de la compra. También están disponibles en el panel de cliente tras iniciar sesión en kowal.store. Sustituye TWOJ_EMAIL_KLIENTA por la dirección de e-mail de tu cuenta y TWOJ_TOKEN por el token recibido. Ejecuta los comandos en el directorio raíz de Magento.
¿El módulo permite mostrar la segunda imagen del producto al pasar el cursor sobre la miniatura en la lista de productos (catálogo)?
Respuesta
Sí — el módulo permite asignar a cada producto en Magento 2 la llamada «hover image» (segunda imagen), que se muestra al pasar el cursor sobre el producto en la lista.
Pregunta
¿En qué versiones de Magento 2 funciona este módulo?
Respuesta
El módulo es compatible con las versiones Magento 2.3.* y Magento 2.4.*.
Pregunta
¿La instalación del módulo requiere modificar los archivos del núcleo de Magento o del tema?
Respuesta
No: la instalación del módulo no requiere editar los archivos core de Magento 2; funciona como una extensión de acuerdo con la arquitectura de Magento.
Pregunta
¿Cómo es la configuración? ¿Tengo que asignar manualmente la segunda imagen para cada producto?
Respuesta
Sí: el administrador en el panel de Magento puede asignar a cada producto una imagen «hover image», que se mostrará al pasar el cursor por encima.
Pregunta
¿El módulo afecta al rendimiento de la tienda?
Respuesta
El impacto es mínimo: aunque añade el efecto visual “hover”, no requiere una gran carga y no provoca una ralentización significativa de la tienda si las imágenes están optimizadas. (Conocimiento general sobre este tipo de extensiones)
Pregunta
¿El efecto hover funciona también en dispositivos móviles?
Respuesta
Normalmente, el efecto hover puede resultar menos intuitivo en pantallas táctiles (teléfonos, tablets); conviene comprobar si el módulo tiene un comportamiento adecuado «al tocar» o mantener un comportamiento alternativo en dispositivos móviles.
Pregunta
¿Puedo configurar el efecto hover para que funcione solo en determinadas categorías o para determinados grupos de productos?
Respuesta
Aunque la descripción principal del módulo habla de asignar una imagen hover a un producto, si necesitas un funcionamiento condicional (por ejemplo, solo para categorías concretas), conviene consultar la documentación o preguntar al fabricante sobre la disponibilidad de filtros.
Pregunta
¿Este efecto visual puede ayudar a la conversión y al engagement de los usuarios?
Respuesta
Sí — la imagen adicional al pasar el cursor permite al cliente ver más rápidamente una perspectiva alternativa del producto (por ejemplo, otro color, diseño o detalle), lo que puede mejorar la experiencia del usuario y aumentar la probabilidad de compra.
Pregunta
¿La imagen hover tiene que ser un archivo nuevo o puede ser una de las imágenes del producto ya subidas?
Respuesta
Normalmente puedes usar las imágenes existentes como imagen hover; es decir, no necesariamente tienes que subir un archivo nuevo si ya tienes la imagen en la galería del producto. (Funcionalidad habitual en este tipo de módulos)
Pregunta
¿Después de comprar el módulo recibo soporte técnico y actualizaciones?
Respuesta
Sí — el fabricante del módulo declara que ofrece actualizaciones gratuitas y soporte técnico para sus extensiones.
