PayPal 
Przelew Kowal_ProductGalleryHover is a module that adds a modern hover gallery feature to product listings (category view) in Magento 2 — allowing users to preview additional product photos directly at the category level. Users can view more images by hovering the cursor or swiping with a finger on mobile devices, without having to open the product page.
WhatsApp
+48608012047
view.xml) to minimize data transfer.The module was designed with maximum performance in mind. It does not modify the Magento layout or DOM structure – it works as a lightweight JS script that:
mouseenter / touchstart events on product elements.In addition, the module uses IntersectionObserver – a native lazy loading mechanism that automatically loads galleries for products visible in the viewport. As a result, users see ready-to-use galleries instantly, while the page maintains its performance.
The module has been optimized so that it does not negatively affect crawl budget, LCP, CLS, or TBT. All dynamic images are loaded after the main page content has loaded (initialization in before.body.end), which makes the module fully safe in terms of SEO and performance.
Modern e-commerce stores should offer fast and intuitive access to product information. The Kowal_ProductGalleryHover module delivers exactly that — an interactive preview without delays, without the risk of performance loss, and fully compatible with Magento 2 and SEO best practices.
SMMASH to sklep z odzieza sportowa, w ktorym produkt sprzedaje nie tylko kroj i rozmiar, ale tez energia wzoru, kolor, nadruk i dopasowanie do konkretnej aktywnosci. Marka komunikuje sie przez mocne kolekcje wizualne oraz szeroki podzial sportowy: MMA, OCR, Crossfit, bieganie, BJJ, Muay Thai, judo, boks i kickboxing.
Sklep dziala w branzy odziezowej, ale jego katalog wymaga bardziej dynamicznej prezentacji niz klasyczny sklep fashion. Produkty czesto roznia sie detalami graficznymi, konstrukcja, przeznaczeniem treningowym oraz sposobem noszenia. Dla uzytkownika szybki podglad drugiego ujecia, koloru lub wariantu wizualnego moze byc wazniejszy niz sama nazwa produktu.
SMMASH laczy sprzedaz odziezy technicznej z silnym charakterem wizualnym marki. Oferta obejmuje produkty meskie, damskie i dzieciece, a takze odziez klubowa oraz spersonalizowane projekty. Na stronie widoczne sa kategorie lifestyle i sportowe, m.in. Combat, OCR, Trening i Bieganie, co pokazuje, ze klient czesto przeglada produkty wedlug stylu aktywnosci, a nie tylko wedlug typu ubrania.
Istotnym elementem sklepu jest takze prezentacja projektow i wizualizacji. W przypadku odziezy sportowej decyzja zakupowa jest mocno zwiazana z wygladem produktu: intensywne kolory, wzory, kontrasty i uklad nadruku musza byc widoczne juz na poziomie listingu.
Najwiekszym wyzwaniem w takim katalogu jest pogodzenie dwoch potrzeb:
W odziezy sportowej jeden statyczny obraz na listingu czesto nie wystarcza. Klient chce szybko zobaczyc, jak wyglada produkt w innym ujeciu, jak uklada sie nadruk, czy kolor jest wystarczajaco wyrazisty i czy produkt pasuje do konkretnego stylu treningowego.
Jednoczesnie sklep z rozbudowanym katalogiem nie moze doladowywac zbyt wielu obrazow od razu, bo obciazyloby to strone, pogorszylo odbior na mobile i moglo negatywnie wplynac na Core Web Vitals.
Dla takiego typu sklepu szczegolnie dobrze sprawdza sie mechanizm galerii produktowej aktywowanej po najechaniu lub dotknieciu produktu. Listing pozostaje lekki przy pierwszym renderze, ale uzytkownik moze szybko podejrzec kolejne zdjecie bez opuszczania kategorii.
Kluczowe zalozenia:
W przypadku SMMASH taki mechanizm pozwala pokazac wiecej wartosci produktu juz na listingu: nadruk, kolorystyke, detal, alternatywne ujecie lub sposob prezentacji produktu na sylwetce.
Uzytkownik moze szybciej porownywac produkty bez otwierania wielu kart produktowych. To ma znaczenie szczegolnie wtedy, gdy katalog zawiera wiele podobnych typow odziezy, ale kazdy produkt ma odmienny projekt graficzny.
Korzyści:
SMMASH sprzedaje produkty, ktore maja mocny komponent wizualny. W przypadku rashguardow, koszulek, legginsow, spodenek czy trykotow sportowych klient czesto reaguje na wyglad przed analiza szczegolow technicznych. Dlatego listing powinien dzialac nie tylko jak katalog, ale rowniez jak szybki lookbook.
Mechanizm hover/swipe pomaga pokazac:
SMMASH to przyklad sklepu odziezowego, w ktorym prezentacja wizualna jest czescia produktu. Kolor, nadruk i energia projektu maja bezposredni wplyw na decyzje zakupowa. Galeria aktywowana na listingu pozwala pokazac te elementy szybciej, bez obciazania pierwszego ladowania strony.
Slumbersac to sklep z dzieciecymi spiworkami do spania, w ktorym produkt nalezy do branzy odziezowej, ale decyzja zakupowa jest bardziej techniczna niz w klasycznym fashion. Rodzic wybiera nie tylko wzor i rozmiar, ale tez konstrukcje spiworka, grubosc TOG, sezon, material oraz praktyczne detale zwiazane z bezpieczenstwem i wygoda dziecka.
Oferta obejmuje m.in. spiworki z nogawkami, klasyczne spiworki do spania, warianty sezonowe 0.5 TOG, 1.0 TOG, 2.5 TOG i 3.5 TOG, a takze rozwiazania takie jak odpinane rekawy oraz wywijane nogawki z ABS.
W Slumbersac produkt musi byc wyjasniony wizualnie. Rodzic chce szybko zrozumiec, czym rozni sie konkretny model: czy ma nogawki, czy rekawy sa odpinane, jaki zakres temperatur obsluguje, czy nadaje sie na lato, zime albo caly rok.
Na stronie widoczne sa komunikaty produktowe i zaufania, m.in. odpinane rekawy, wywijane nogawki z ABS, ocena Google 4,8, szybka wysylka i komunikacja najczesciej wybieranego spiworka. To pokazuje, ze sklep laczy emocjonalna prezentacje wzorow z bardzo praktyczna argumentacja.
W sklepie z dzieciecymi spiworkami lista produktow musi obsluzyc kilka typow informacji jednoczesnie:
Jeden obraz na listingu moze pokazac nadruk, ale nie zawsze tlumaczy konstrukcje. Dla rodzica wazne jest szybkie odroznienie spiworka klasycznego od spiworka z nogawkami albo wariantu z odpinanymi rekawami.
Drugim wyzwaniem jest mobile. Zakupy produktow dzieciecych czesto odbywaja sie na telefonie, dlatego interakcja musi dzialac naturalnie: przewijanie strony nie moze byc blokowane, a przejscie do kolejnego zdjecia powinno byc proste.
Dla Slumbersac wartosciowe jest rozszerzenie listingu produktowego o szybki podglad kolejnego zdjecia produktu. Po najechaniu lub przesunieciu na mobile uzytkownik moze zobaczyc dodatkowe ujecie, ktore pokazuje konstrukcje spiworka albo praktyczny detal.
Kluczowe zalozenia:
W takim sklepie szczegolnie przydatny jest dedykowany atrybut obrazu, np. on_hover. Dzieki niemu zespol sklepu moze sam zdecydowac, ktore zdjecie najlepiej wyjasnia produkt na listingu.
Przyklady uzycia:
To wazne, bo automatyczne drugie zdjecie z galerii nie zawsze musi byc najlepszym zdjeciem sprzedazowym. W przypadku produktow techniczno-odziezowych lepiej dac merchandiserowi kontrole nad tym, co klient zobaczy jako pierwsza interakcje.
Rodzic moze szybciej ocenic, czy produkt odpowiada konkretnej potrzebie: cieplejszy spiworek na zime, lekki model caloroczny, spiworek z nogawkami dla dziecka, ktore chodzi, albo model z odpinanymi rekawami.
Korzyści:
Slumbersac sprzedaje produkty, ktore sa jednoczesnie ubraniem, akcesorium do snu i produktem funkcjonalnym dla dziecka. Estetyka wzoru jest wazna, ale rodzic rownie mocno patrzy na praktyczne rozwiazania.
Galeria hover/swipe pomaga pokazac:
on_hover do wskazywania najlepszego zdjecia funkcjonalnego,Slumbersac to przyklad sklepu odziezowego, w ktorym zdjecie produktu musi wyjasniac funkcje, nie tylko wyglad. Dobrze dobrany drugi obraz na listingu moze pokazac detal, ktory decyduje o zakupie: nogawki, rekawy, material albo ksztalt spiworka. Mechanizm hover/swipe oraz dedykowany obraz on_hover daja sklepowi wieksza kontrole nad tym, jak szybko klient rozumie produkt.
