PayPal 
Przelew 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
+48608012047
view.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 adaptación a una actividad concreta. La marca se comunica mediante colecciones visuales potentes y una amplia división deportiva: MMA, OCR, Crossfit, running, BJJ, Muay Thai, judo, boxeo y kickboxing.
La tienda opera en el sector de la ropa, pero su catálogo requiere una presentación más dinámica que una tienda de moda clásica. Los productos suelen diferenciarse por detalles gráficos, construcción, finalidad de entrenamiento y forma de uso. 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 marcado carácter visual de marca. La oferta incluye productos para hombre, mujer y niños, así como ropa de club y proyectos personalizados. En la página se muestran categorías lifestyle y deportivas, entre ellas Combat, OCR, Training y Running, lo que demuestra que el cliente suele explorar los productos por estilo de actividad, y no solo por 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á estrechamente relacionada con el aspecto del producto: los colores intensos, los diseños, los contrastes y la disposición del estampado deben ser visibles ya desde el listado.
El mayor reto en un catálogo de este tipo es conciliar dos necesidades:
En la ropa deportiva, una única imagen estática en el listado a menudo no es suficiente. El cliente quiere ver rápidamente cómo es el producto desde otro ángulo, cómo queda el estampado, si el color es suficientemente 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 adicionales de inmediato, porque esto 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 activada 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.
Principales supuestos:
En el caso de SMMASH, este mecanismo permite mostrar más valor del producto ya en el listado: estampado, paleta de colores, detalle, toma 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 relevante cuando el catálogo contiene muchos tipos de prendas similares, pero cada producto tiene un diseño gráfico diferente.
Beneficios:
SMMASH vende productos que tienen un fuerte componente visual. En el caso de rashguards, camisetas, leggings, pantalones cortos o maillots deportivos, el cliente suele reaccionar al aspecto antes de analizar los detalles técnicos. Por eso, el listado debe funcionar no 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 ropa 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 primera carga de la página.
Slumbersac es una tienda de sacos de dormir infantiles en la que el producto pertenece al sector de la moda, pero la decisión de compra es más técnica que en la moda clásica. El padre o la madre no elige solo el diseño y la talla, sino también la construcción del saco, 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 perneras, 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 perneras 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 perneras, si las mangas son desmontables, qué rango de temperaturas 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 ellos mangas desmontables, perneras plegables con ABS, valoración de Google 4,8, envío rápido y comunicación del saco de dormir elegido con mayor frecuencia. Esto demuestra que la tienda combina una presentación emocional de los diseños con argumentos muy prácticos.
En una tienda de sacos de dormir infantiles, el listado 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 un saco con perneras o de una variante con mangas desmontables.
El segundo reto es el móvil. Las compras de productos infantiles suelen realizarse desde el teléfono, por lo que la interacción debe funcionar de forma natural: el desplazamiento de la página no debe bloquearse y pasar a la siguiente foto debe ser sencillo.
Para Slumbersac resulta valioso ampliar el listado de productos con una vista rápida de la siguiente foto del producto. Al pasar el cursor o deslizar en móvil, el usuario puede ver una imagen adicional que muestra la construcción del saco de dormir o un detalle práctico.
Supuestos clave:
En una tienda de este tipo resulta especialmente útil un atributo de imagen dedicado, por ejemplo on_hover. Gracias a él, el equipo de la tienda puede decidir por sí mismo qué foto explica mejor el producto en el listado.
Ejemplos de uso:
Esto es importante porque la segunda foto automática de la galería no siempre tiene por qué ser la mejor imagen de venta. En el caso de productos técnicos de confección, es mejor dar al merchandiser 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 con perneras para un niño que camina o un modelo con mangas desmontables.
Beneficios:
Slumbersac vende productos que son a la vez una prenda, un accesorio para dormir y un producto funcional para el niño. La estética del diseño es importante, pero el padre o la madre presta la misma atención a las soluciones prácticas.
La galería hover/swipe ayuda a mostrar:
on_hover para indicar la mejor foto funcional,Slumbersac es un ejemplo de tienda de moda en la que la foto 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: perneras, 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.
