Polonais 
Anglais 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 est vendu non seulement par sa coupe et sa taille, mais aussi par l’énergie du motif, la couleur, l’imprimé et son adaptation à une activité donnée. 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 opère dans le secteur de l’habillement, mais son catalogue exige une présentation plus dynamique qu’une boutique de mode classique. Les produits diffèrent souvent par des détails graphiques, leur construction, leur usage pour l’entraînement et la manière de les porter. 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 seul nom du produit.
SMMASH associe la vente de vêtements techniques à un fort caractère visuel 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 Running, ce qui montre que le client parcourt souvent les produits selon le style d’activité, et pas seulement selon le type de vêtement.
La présentation des designs et des visuels constitue é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 du listing.
Le principal défi dans un tel catalogue consiste à concilier deux besoins :
Dans le vêtement de sport, une seule image statique dans le listing ne suffit souvent pas. Le client veut voir rapidement à quoi ressemble le produit sous un autre angle, comment l’imprimé se place, si la couleur est suffisamment expressive et si le produit correspond à un style d’entraînement donné.
En 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é au survol ou au toucher du produit est particulièrement adapté. Le listing reste léger au premier rendu, mais l’utilisateur peut consulter rapidement la photo suivante sans quitter la catégorie.
Principes clés :
Dans le cas de SMMASH, un tel mécanisme permet de montrer davantage de valeur produit dès le listing : l’imprimé, la palette de couleurs, le détail, une vue alternative ou la manière dont le produit est présenté sur la silhouette.
L’utilisateur peut comparer plus rapidement les produits 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 tenues de sport, le client réagit souvent à l’apparence avant d’analyser les détails techniques. Le listing 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 dans laquelle 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 le listing 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 où 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 conception de la gigoteuse, l’épaisseur TOG, la saison, le matériau ainsi que des détails pratiques liés à la sécurité et au confort de l’enfant.
L’offre comprend notamment des gigoteuses avec 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 comme 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 précis : s’il a 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 présente des messages produit et de réassurance, notamment des manches amovibles, des jambes retroussables avec ABS, une note Google de 4,8, une expédition rapide et l’indication de la gigoteuse la plus 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 de produits doit gérer plusieurs types d’informations à la fois :
Une seule image sur la liste peut montrer l’imprimé, mais n’explique pas toujours la conception. Pour le parent, il est important de distinguer rapidement une gigoteuse classique d’une gigoteuse avec jambes ou d’une variante avec manches amovibles.
Le deuxième défi est le mobile. Les achats de produits pour enfants se font souvent sur téléphone, c’est pourquoi l’interaction doit fonctionner naturellement : le défilement de la page ne doit pas être bloqué et le passage à la photo suivante doit être simple.
Pour Slumbersac, il est utile d’étendre la liste de produits avec un aperçu rapide de la photo suivante du produit. Au survol ou au glissement sur mobile, l’utilisateur peut voir une vue supplémentaire qui montre la conception de la gigoteuse ou un détail pratique.
Principales hypothèses :
Dans une telle boutique, un attribut d’image dédié, par ex. on_hover, est particulièrement utile. Grâce à lui, l’équipe de la boutique peut décider elle-même quelle image explique le mieux le produit sur la liste.
Exemples d’utilisation :
C’est important, car la deuxième image automatique de la galerie n’est pas toujours la meilleure image de vente. Dans le cas de produits techniques d’habillement, il vaut mieux laisser 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 pour toute l’année, une gigoteuse avec jambes pour un enfant qui marche, ou un modèle avec manches amovibles.
Avantages :
Slumbersac vend des produits qui sont à la fois des vêtements, des accessoires de sommeil et des produits fonctionnels pour l’enfant. L’esthétique du motif est importante, mais le parent regarde tout autant les solutions pratiques.
La galerie hover/swipe aide à montrer :
on_hover pour indiquer la meilleure image fonctionnelle,Slumbersac est un exemple de boutique d’habillement dans laquelle l’image produit doit expliquer la fonction, pas seulement l’apparence. Une deuxième image bien choisie sur la liste peut montrer le détail qui décide de l’achat : jambes, manches, matériau ou 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.
