Polaco 
Inglés Kowal_ProductGalleryHover es un módulo que añade a los listados de productos, en la vista de categoría de Magento 2, una función moderna de hover gallery, es decir, una vista previa de fotos adicionales del producto ya desde el nivel de la categoría. El usuario puede ver las siguientes fotos al pasar el cursor o deslizar con el dedo, en dispositivos móviles, sin necesidad de acceder a la página del producto.
WhatsApp
+48608012047view.xml, para minimizar la transferencia de datos.El módulo se ha diseñado pensando en el máximo rendimiento. No modifica el layout de Magento ni la estructura DOM: funciona como un script JS ligero que:
mouseenter / touchstart de los elementos de producto.Además, el módulo utiliza IntersectionObserver, es decir, un mecanismo de lazy loading nativo que carga automáticamente las galerías de los productos visibles en el viewport. De este modo, el usuario ve galerías listas al instante y la página no pierde rendimiento.
El módulo se ha optimizado para no afectar negativamente al crawl budget, LCP, CLS ni TBT. Todas las imágenes dinámicas se cargan después de cargar el contenido principal de la página, con inicialización en before.body.end, por lo que el módulo es completamente seguro desde el punto de vista del SEO y del rendimiento.
Las tiendas e-commerce modernas deben ofrecer un acceso rápido e intuitivo a la información del producto. El módulo Kowal_ProductGalleryHover proporciona precisamente eso: una vista previa interactiva sin retrasos, sin riesgo de pérdida de rendimiento, totalmente compatible con Magento 2 y con las prácticas SEO.
SMMASH es una tienda de ropa deportiva en la que el producto no se vende solo por el corte y la talla, sino también por la energía del diseño, el color, el estampado y la adecuación a una actividad concreta. La marca se comunica a través de colecciones visuales potentes y una amplia división por disciplinas deportivas: MMA, OCR, Crossfit, running, BJJ, Muay Thai, judo, boxeo y kickboxing.
La tienda opera en el sector de la moda, pero su catálogo requiere una presentación más dinámica que una tienda fashion clásica. Los productos a menudo se diferencian por detalles gráficos, construcción, uso de entrenamiento y forma de llevarlos. Para el usuario, una vista rápida de una segunda toma, color o variante visual puede ser más importante que el propio nombre del producto.
SMMASH combina la venta de ropa técnica con un fuerte carácter visual de marca. La oferta incluye productos para hombre, mujer y niños, así como ropa para clubes y proyectos personalizados. En el sitio se muestran categorías lifestyle y deportivas, entre ellas Combat, OCR, Training y Running, lo que demuestra que el cliente a menudo navega por los productos según el estilo de actividad, y no solo por el tipo de prenda.
Un elemento importante de la tienda es también la presentación de diseños y visualizaciones. En el caso de la ropa deportiva, la decisión de compra está muy relacionada con el aspecto del producto: los colores intensos, los diseños, los contrastes y la disposición del estampado deben ser visibles ya a nivel del listado.
El mayor reto en un catálogo de este tipo es conciliar dos necesidades:
En ropa deportiva, una sola imagen estática en el listado a menudo no es suficiente. El cliente quiere ver rápidamente cómo se ve el producto desde otra perspectiva, cómo queda el estampado, si el color es lo bastante expresivo y si el producto encaja con un estilo de entrenamiento concreto.
Al mismo tiempo, una tienda con un catálogo amplio no puede cargar demasiadas imágenes de inmediato, porque sobrecargaría la página, empeoraría la experiencia en móvil y podría afectar negativamente a Core Web Vitals.
Para este tipo de tienda funciona especialmente bien un mecanismo de galería de producto activado al pasar el cursor o tocar el producto. El listado sigue siendo ligero en el primer renderizado, pero el usuario puede previsualizar rápidamente la siguiente imagen sin salir de la categoría.
Supuestos clave:
En el caso de SMMASH, este mecanismo permite mostrar más valor del producto ya en el listado: estampado, colorido, detalle, perspectiva alternativa o forma de presentar el producto sobre la silueta.
El usuario puede comparar productos más rápido sin abrir muchas fichas de producto. Esto es especialmente importante cuando el catálogo contiene muchos tipos de prendas similares, pero cada producto tiene un diseño gráfico diferente.
Beneficios:
SMMASH vende productos con un fuerte componente visual. En el caso de rashguards, camisetas, leggings, pantalones cortos o maillots deportivos, el cliente a menudo reacciona a la apariencia antes de analizar los detalles técnicos. Por eso, el listado no debería funcionar solo como catálogo, sino también como un lookbook rápido.
El mecanismo hover/swipe ayuda a mostrar:
SMMASH es un ejemplo de tienda de moda en la que la presentación visual forma parte del producto. El color, el estampado y la energía del diseño influyen directamente en la decisión de compra. La galería activada en el listado permite mostrar estos elementos más rápido, sin sobrecargar la carga inicial de la página.
Slumbersac es una tienda de sacos de dormir infantiles en la que el producto pertenece al sector de la ropa, pero la decisión de compra es más técnica que en la moda clásica. El padre o la madre elige no solo el estampado y la talla, sino también la construcción del saco de dormir, el grosor TOG, la temporada, el material y los detalles prácticos relacionados con la seguridad y la comodidad del niño.
La oferta incluye, entre otros, sacos de dormir con piernas, sacos de dormir clásicos, variantes de temporada 0.5 TOG, 1.0 TOG, 2.5 TOG y 3.5 TOG, así como soluciones como mangas desmontables y piernas plegables con ABS.
En Slumbersac el producto debe explicarse visualmente. El padre o la madre quiere entender rápidamente en qué se diferencia un modelo concreto: si tiene piernas, si las mangas son desmontables, qué rango de temperatura cubre, si es adecuado para verano, invierno o todo el año.
En la página se muestran mensajes de producto y de confianza, entre otros, mangas desmontables, piernas plegables con ABS, valoración de Google 4,8, envío rápido y comunicación del saco de dormir más elegido. Esto demuestra que la tienda combina la presentación emocional de los estampados con una argumentación muy práctica.
En una tienda de sacos de dormir infantiles, la lista de productos debe gestionar varios tipos de información al mismo tiempo:
Una sola imagen en el listado puede mostrar el estampado, pero no siempre explica la construcción. Para el padre o la madre es importante distinguir rápidamente un saco de dormir clásico de uno con piernas o de una variante con mangas desmontables.
El segundo reto es el móvil. Las compras de productos infantiles suelen hacerse en el teléfono, por lo que la interacción debe funcionar de forma natural: el desplazamiento de la página no puede bloquearse y pasar a la siguiente imagen debe ser sencillo.
Para Slumbersac es valioso ampliar el listado de productos con una vista rápida de la siguiente imagen del producto. Al pasar el cursor o deslizar en móvil, el usuario puede ver una toma adicional que muestra la construcción del saco de dormir o un detalle práctico.
Supuestos clave:
En una tienda así, un atributo de imagen dedicado, por ejemplo on_hover, resulta especialmente útil. Gracias a él, el equipo de la tienda puede decidir por sí mismo qué imagen explica mejor el producto en el listado.
Ejemplos de uso:
Esto es importante porque la segunda imagen automática de la galería no siempre tiene que ser la mejor imagen de venta. En el caso de productos técnico-textiles, es mejor dar al merchandiser el control sobre lo que el cliente verá como primera interacción.
El padre o la madre puede evaluar más rápidamente si el producto responde a una necesidad concreta: un saco de dormir más cálido para invierno, un modelo ligero para todo el año, un saco de dormir con piernas para un niño que camina o un modelo con mangas desmontables.
Beneficios:
Slumbersac vende productos que son al mismo tiempo ropa, accesorio para dormir y producto funcional para el niño. La estética del estampado es importante, pero el padre o la madre también presta mucha atención a las soluciones prácticas.
La galería hover/swipe ayuda a mostrar:
on_hover para indicar la mejor imagen funcional,Slumbersac es un ejemplo de tienda de ropa en la que la imagen del producto debe explicar la función, no solo el aspecto. Una segunda imagen bien elegida en el listado puede mostrar el detalle que decide la compra: piernas, mangas, material o forma del saco de dormir. El mecanismo hover/swipe y la imagen dedicada on_hover dan a la tienda un mayor control sobre la rapidez con la que el cliente entiende el producto.
