Kowal_ProductGalleryHover est un module qui ajoute aux listes de produits (vue catégorie) dans Magento 2 une fonctionnalité moderne de galerie au survol : un aperçu des photos supplémentaires du produit directement depuis la page de catégorie. L’utilisateur peut voir les images suivantes au passage de la souris ou par glissement du doigt sur les appareils mobiles, sans avoir à accéder à la page produit.
WhatsApp
+48608012047view.xml) afin de réduire le transfert de données.Le module a été conçu pour offrir des performances maximales. Il ne modifie ni le layout Magento ni la structure DOM – il fonctionne comme un script JS léger qui :
mouseenter / touchstart des éléments produits.De plus, le module utilise IntersectionObserver – un mécanisme natif de lazy loading qui charge automatiquement les galeries pour les produits visibles dans la fenêtre d’affichage. Ainsi, l’utilisateur voit immédiatement des galeries prêtes à l’emploi, sans perte de performance pour la page.
Le module a été optimisé afin de ne pas avoir d’impact négatif sur le budget de crawl, le LCP, le CLS ni le TBT. Toutes les images dynamiques sont chargées après le chargement du contenu principal de la page (initialisation dans before.body.end), ce qui rend le module entièrement sûr du point de vue du SEO et des performances.
Les boutiques e-commerce modernes doivent offrir un accès rapide et intuitif aux informations produit. Le module Kowal_ProductGalleryHover répond précisément à ce besoin : un aperçu interactif sans délai, sans risque de baisse des performances, entièrement compatible avec Magento 2 et les bonnes pratiques SEO.
SMMASH est une boutique de vêtements de sport dans laquelle le produit se vend non seulement par sa coupe et sa taille, mais aussi par l’énergie du motif, la couleur, l’imprimé et l’adaptation à une activité précise. La marque communique à travers des collections visuelles fortes et une large segmentation sportive : MMA, OCR, Crossfit, course à pied, BJJ, Muay Thai, judo, boxe et kickboxing.
La boutique évolue dans le secteur de l’habillement, mais son catalogue nécessite une présentation plus dynamique qu’une boutique fashion classique. Les produits se distinguent souvent par des détails graphiques, leur construction, leur usage à l’entraînement et leur manière d’être portés. Pour l’utilisateur, un aperçu rapide d’une deuxième vue, d’une couleur ou d’une variante visuelle peut être plus important que le nom du produit lui-même.
SMMASH associe la vente de vêtements techniques à une forte identité visuelle de marque. L’offre comprend des produits pour hommes, femmes et enfants, ainsi que des vêtements de club et des projets personnalisés. Le site présente des catégories lifestyle et sportives, notamment Combat, OCR, Entraînement et Course à pied, ce qui montre que le client parcourt souvent les produits selon le style d’activité, et pas uniquement selon le type de vêtement.
La présentation des designs et des visualisations est également un élément important de la boutique. Dans le cas des vêtements de sport, la décision d’achat est fortement liée à l’apparence du produit : les couleurs intenses, les motifs, les contrastes et la disposition de l’imprimé doivent être visibles dès le niveau de la liste.
Le principal défi dans ce type de catalogue consiste à concilier deux besoins :
Dans les vêtements de sport, une seule image statique sur la liste ne suffit souvent pas. Le client veut voir rapidement à quoi ressemble le produit sous un autre angle, comment l’imprimé est disposé, si la couleur est suffisamment marquée et si le produit correspond à un style d’entraînement précis.
Dans le même temps, une boutique avec un catalogue étendu ne peut pas charger trop d’images immédiatement, car cela alourdirait la page, dégraderait l’expérience sur mobile et pourrait avoir un impact négatif sur les Core Web Vitals.
Pour ce type de boutique, un mécanisme de galerie produit activée au survol ou au toucher du produit est particulièrement adapté. La liste reste légère lors du premier rendu, mais l’utilisateur peut rapidement prévisualiser la photo suivante sans quitter la catégorie.
Principes clés :
Dans le cas de SMMASH, ce mécanisme permet de montrer davantage de valeur produit dès la liste : l’imprimé, la palette de couleurs, le détail, une vue alternative ou la manière dont le produit est présenté sur une silhouette.
L’utilisateur peut comparer les produits plus rapidement sans ouvrir de nombreuses fiches produit. C’est particulièrement important lorsque le catalogue contient de nombreux types de vêtements similaires, mais que chaque produit possède un design graphique différent.
Avantages :
SMMASH vend des produits qui ont une forte composante visuelle. Dans le cas des rashguards, t-shirts, leggings, shorts ou maillots de sport, le client réagit souvent à l’apparence avant d’analyser les détails techniques. La liste doit donc fonctionner non seulement comme un catalogue, mais aussi comme un lookbook rapide.
Le mécanisme hover/swipe aide à montrer :
SMMASH est un exemple de boutique de vêtements où la présentation visuelle fait partie du produit. La couleur, l’imprimé et l’énergie du design ont un impact direct sur la décision d’achat. Une galerie activée sur la liste permet de montrer ces éléments plus rapidement, sans alourdir le premier chargement de la page.
Slumbersac est une boutique de gigoteuses pour enfants, dans laquelle le produit appartient au secteur de l’habillement, mais la décision d’achat est plus technique que dans la mode classique. Le parent choisit non seulement le motif et la taille, mais aussi la construction de la gigoteuse, l’épaisseur TOG, la saison, la matière ainsi que les détails pratiques liés à la sécurité et au confort de l’enfant.
L’offre comprend notamment des gigoteuses à jambes, des gigoteuses classiques, des variantes saisonnières 0.5 TOG, 1.0 TOG, 2.5 TOG et 3.5 TOG, ainsi que des solutions telles que des manches amovibles et des jambes retroussables avec ABS.
Chez Slumbersac, le produit doit être expliqué visuellement. Le parent veut comprendre rapidement ce qui distingue un modèle donné : s’il possède des jambes, si les manches sont amovibles, quelle plage de températures il couvre, s’il convient à l’été, à l’hiver ou à toute l’année.
La page affiche des messages produit et de confiance, notamment les manches amovibles, les jambes retroussables avec ABS, la note Google de 4,8, l’expédition rapide et la mise en avant de la gigoteuse la plus souvent choisie. Cela montre que la boutique associe une présentation émotionnelle des motifs à une argumentation très pratique.
Dans une boutique de gigoteuses pour enfants, la liste des produits doit gérer plusieurs types d’informations à la fois :
Une seule image dans le listing peut montrer l’imprimé, mais n’explique pas toujours la construction. Pour un parent, il est important de distinguer rapidement une gigoteuse classique d’une gigoteuse à jambes ou d’une variante avec manches amovibles.
Le deuxième défi concerne le mobile. Les achats de produits pour enfants se font souvent sur téléphone, l’interaction doit donc être naturelle : le défilement de la page ne doit pas être bloqué, et le passage à la photo suivante doit être simple.
Pour Slumbersac, il est pertinent d’enrichir le listing produit avec un aperçu rapide de la photo suivante du produit. Au survol ou par glissement sur mobile, l’utilisateur peut voir une vue supplémentaire qui montre la construction de la gigoteuse ou un détail pratique.
Principes clés :
Dans ce type de boutique, un attribut d’image dédié, par exemple on_hover, est particulièrement utile. Grâce à lui, l’équipe de la boutique peut décider elle-même quelle photo explique le mieux le produit dans le listing.
Exemples d’utilisation :
C’est important, car la deuxième photo automatique de la galerie n’est pas toujours la meilleure photo pour la vente. Dans le cas de produits à la fois techniques et vestimentaires, il vaut mieux donner au merchandiser le contrôle sur ce que le client verra lors de la première interaction.
Le parent peut évaluer plus rapidement si le produit répond à un besoin précis : une gigoteuse plus chaude pour l’hiver, un modèle léger utilisable toute l’année, une gigoteuse à jambes pour un enfant qui marche, ou un modèle avec manches amovibles.
Avantages :
Slumbersac vend des produits qui sont à la fois un vêtement, un accessoire de sommeil et un produit fonctionnel pour l’enfant. L’esthétique du motif est importante, mais le parent accorde tout autant d’attention aux solutions pratiques.
La galerie hover/swipe aide à montrer :
on_hover pour indiquer la meilleure photo fonctionnelle,Slumbersac est un exemple de boutique d’habillement dans laquelle la photo produit doit expliquer la fonction, et pas seulement l’apparence. Une deuxième image bien choisie dans le listing peut montrer le détail qui influence l’achat : les jambes, les manches, la matière ou la forme de la gigoteuse. Le mécanisme hover/swipe et l’image dédiée on_hover donnent à la boutique un meilleur contrôle sur la rapidité avec laquelle le client comprend le produit.
