PayPal 
Przelew Kowal_ProductGalleryHover is een module die aan productlijsten (categorieoverzicht) in Magento 2 een moderne hover gallery-functie toevoegt — een voorbeeldweergave van extra productfoto’s direct op categorieniveau. De gebruiker kan extra foto’s bekijken door met de cursor te hoveren of met de vinger te swipen (op mobiele apparaten), zonder naar de productpagina te hoeven gaan.
WhatsApp
+48608012047
view.xml zijn gedefinieerd) om dataverkeer te minimaliseren.De module is ontworpen met maximale prestaties in gedachten. Ze wijzigt de Magento-layout of de DOM-structuur niet – ze werkt als een lichtgewicht JS-script dat:
mouseenter- / touchstart-events voor productelementen.Daarnaast gebruikt de module IntersectionObserver – een mechanisme voor native lazy loading dat automatisch galerijen laadt voor producten die zichtbaar zijn in de viewport. Daardoor ziet de gebruiker direct kant-en-klare galerijen, terwijl de pagina haar prestaties behoudt.
De module is zo geoptimaliseerd dat deze geen negatieve invloed heeft op crawl budget, LCP, CLS of TBT. Alle dynamische afbeeldingen worden geladen nadat de hoofdinhoud van de pagina is geladen (initialisatie in before.body.end), waardoor de module volledig veilig is voor SEO en prestaties.
Moderne e-commercewinkels moeten snelle en intuïtieve toegang tot productinformatie bieden. De module Kowal_ProductGalleryHover doet precies dat — een interactieve preview zonder vertraging, zonder risico op prestatieverlies, volledig compatibel met Magento 2 en SEO-richtlijnen.
SMMASH is een winkel voor sportkleding, waarin het product niet alleen wordt verkocht door snit en maat, maar ook door de energie van het ontwerp, kleur, print en aansluiting op een specifieke activiteit. Het merk communiceert via krachtige visuele collecties en een brede sportindeling: MMA, OCR, Crossfit, hardlopen, BJJ, Muay Thai, judo, boksen en kickboksen.
De winkel is actief in de kledingbranche, maar de catalogus vereist een dynamischere presentatie dan een klassieke fashionwebshop. Producten verschillen vaak in grafische details, constructie, trainingsdoel en draagwijze. Voor de gebruiker kan een snelle preview van een tweede aanzicht, kleur of visuele variant belangrijker zijn dan alleen de productnaam.
SMMASH combineert de verkoop van technische kleding met een sterk visueel merkkarakter. Het aanbod omvat producten voor mannen, vrouwen en kinderen, maar ook clubkleding en gepersonaliseerde ontwerpen. Op de website zijn lifestyle- en sportcategorieën zichtbaar, waaronder Combat, OCR, Training en Hardlopen, wat laat zien dat de klant producten vaak bekijkt op basis van activiteitsstijl en niet alleen op kledingtype.
Een belangrijk onderdeel van de winkel is ook de presentatie van ontwerpen en visualisaties. Bij sportkleding is de aankoopbeslissing sterk verbonden met het uiterlijk van het product: intense kleuren, patronen, contrasten en de plaatsing van de print moeten al op listingniveau zichtbaar zijn.
De grootste uitdaging in zo'n catalogus is het combineren van twee behoeften:
Bij sportkleding is één statische afbeelding in de listing vaak niet genoeg. De klant wil snel zien hoe het product er vanuit een ander perspectief uitziet, hoe de print valt, of de kleur uitgesproken genoeg is en of het product past bij een specifieke trainingsstijl.
Tegelijkertijd kan een winkel met een uitgebreide catalogus niet meteen te veel afbeeldingen bijladen, omdat dit de pagina zou belasten, de mobiele ervaring zou verslechteren en een negatieve invloed zou kunnen hebben op Core Web Vitals.
Voor dit type winkel werkt een productgalerij die wordt geactiveerd bij hoveren of aanraken van het product bijzonder goed. De listing blijft licht bij de eerste render, maar de gebruiker kan snel de volgende foto bekijken zonder de categorie te verlaten.
Belangrijkste uitgangspunten:
Bij SMMASH maakt zo'n mechanisme het mogelijk om al in de listing meer productwaarde te tonen: print, kleurstelling, detail, alternatief aanzicht of de manier waarop het product op een silhouet wordt gepresenteerd.
De gebruiker kan producten sneller vergelijken zonder veel productpagina's te openen. Dit is vooral belangrijk wanneer de catalogus veel vergelijkbare kledingtypes bevat, maar elk product een ander grafisch ontwerp heeft.
Voordelen:
SMMASH verkoopt producten met een sterke visuele component. Bij rashguards, T-shirts, leggings, shorts of sporttricots reageert de klant vaak eerst op het uiterlijk voordat technische details worden geanalyseerd. Daarom moet de listing niet alleen als catalogus werken, maar ook als een snel lookbook.
Het hover/swipe-mechanisme helpt om te tonen:
SMMASH is een voorbeeld van een kledingwinkel waarin de visuele presentatie onderdeel is van het product. Kleur, print en de energie van het ontwerp hebben direct invloed op de aankoopbeslissing. Een galerij die in de listing wordt geactiveerd, maakt het mogelijk deze elementen sneller te tonen zonder de eerste laadfase van de pagina te belasten.
Slumbersac is een winkel met kinderslaapzakken, waarbij het product tot de kledingbranche behoort, maar de aankoopbeslissing technischer is dan bij klassieke fashion. Een ouder kiest niet alleen het patroon en de maat, maar ook de constructie van de slaapzak, de TOG-dikte, het seizoen, het materiaal en praktische details rond de veiligheid en het comfort van het kind.
Het assortiment omvat onder andere slaapzakken met pijpen, klassieke slaapzakken, seizoensvarianten 0.5 TOG, 1.0 TOG, 2.5 TOG en 3.5 TOG, evenals oplossingen zoals afritsbare mouwen en omslagbare pijpen met ABS.
Bij Slumbersac moet het product visueel worden uitgelegd. Een ouder wil snel begrijpen waarin een specifiek model verschilt: of het pijpen heeft, of de mouwen afritsbaar zijn, welk temperatuurbereik het ondersteunt en of het geschikt is voor de zomer, winter of het hele jaar.
Op de site zijn product- en vertrouwensboodschappen zichtbaar, waaronder afritsbare mouwen, omslagbare pijpen met ABS, Google-beoordeling 4,8, snelle verzending en communicatie over de meest gekozen slaapzak. Dit laat zien dat de winkel een emotionele presentatie van patronen combineert met zeer praktische argumentatie.
In een winkel met kinderslaapzakken moet de productlijst meerdere soorten informatie tegelijk verwerken:
Eén afbeelding in de listing kan de print tonen, maar legt niet altijd de constructie uit. Voor een ouder is het belangrijk om snel het verschil te zien tussen een klassieke slaapzak en een slaapzak met pijpen of een variant met afritsbare mouwen.
De tweede uitdaging is mobiel. Aankopen van kinderproducten gebeuren vaak op de telefoon, daarom moet de interactie natuurlijk werken: het scrollen van de pagina mag niet worden geblokkeerd en naar de volgende foto gaan moet eenvoudig zijn.
Voor Slumbersac is het waardevol om de productlisting uit te breiden met een snelle preview van de volgende productfoto. Bij hover of swipen op mobiel kan de gebruiker een extra beeld zien dat de constructie van de slaapzak of een praktisch detail toont.
Belangrijkste uitgangspunten:
In zo’n winkel is een speciaal afbeeldingsattribuut bijzonder nuttig, bijvoorbeeld on_hover. Daarmee kan het winkelteam zelf bepalen welke foto het product in de listing het beste uitlegt.
Voorbeelden van gebruik:
Dit is belangrijk, omdat de automatische tweede foto uit de galerie niet altijd de beste verkoopfoto hoeft te zijn. Bij technisch-kledingachtige producten is het beter om de merchandiser controle te geven over wat de klant als eerste interactie ziet.
Een ouder kan sneller beoordelen of het product aansluit op een specifieke behoefte: een warmere slaapzak voor de winter, een licht model voor het hele jaar, een slaapzak met pijpen voor een kind dat loopt, of een model met afritsbare mouwen.
Voordelen:
Slumbersac verkoopt producten die tegelijk kleding, een slaapaccessoire en een functioneel product voor het kind zijn. De esthetiek van het patroon is belangrijk, maar een ouder let net zo sterk op praktische oplossingen.
De hover-/swipecarrousel helpt om te tonen:
on_hover om de beste functionele foto aan te wijzen,Slumbersac is een voorbeeld van een kledingwinkel waarin de productfoto de functie moet uitleggen, niet alleen het uiterlijk. Een goed gekozen tweede afbeelding in de listing kan het detail tonen dat bepalend is voor de aankoop: pijpen, mouwen, materiaal of de vorm van de slaapzak. Het hover-/swipemechanisme en de speciale afbeelding on_hover geven de winkel meer controle over hoe snel de klant het product begrijpt.
