Polnisch 
English 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
+48608012047view.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 is a sportswear store where the product is sold not only by its cut and size, but also by the energy of the pattern, color, print, and fit for a specific activity. The brand communicates through strong visual collections and a broad sports division: MMA, OCR, Crossfit, running, BJJ, Muay Thai, judo, boxing, and kickboxing.
The store operates in the apparel industry, but its catalog requires a more dynamic presentation than a classic fashion store. Products often differ in graphic details, construction, training purpose, and how they are worn. For the user, a quick view of a second shot, color, or visual variant may be more important than the product name itself.
SMMASH combines technical apparel sales with a strong visual brand identity. The offering includes men's, women's, and children's products, as well as club apparel and personalized designs. The website features lifestyle and sports categories, including Combat, OCR, Training, and Running, which shows that customers often browse products by activity style, not only by clothing type.
An important element of the store is also the presentation of designs and visualizations. In sportswear, the purchase decision is strongly linked to the product's appearance: intense colors, patterns, contrasts, and print layout need to be visible already at the listing level.
The biggest challenge in this type of catalog is balancing two needs:
In sportswear, one static image on the listing is often not enough. The customer wants to quickly see what the product looks like from another angle, how the print is arranged, whether the color is bold enough, and whether the product fits a specific training style.
At the same time, a store with an extensive catalog cannot preload too many images at once, because that would burden the page, worsen the mobile experience, and could negatively affect Core Web Vitals.
For this type of store, a product gallery mechanism activated on hover or touch works particularly well. The listing remains lightweight on first render, but the user can quickly preview the next image without leaving the category page.
Key assumptions:
In the case of SMMASH, this mechanism makes it possible to show more product value already on the listing: print, color scheme, detail, an alternative shot, or the way the product is presented on the body.
The user can compare products faster without opening many product pages. This is especially important when the catalog contains many similar types of apparel, but each product has a different graphic design.
Benefits:
SMMASH sells products with a strong visual component. In the case of rashguards, T-shirts, leggings, shorts, or sports singlets, the customer often reacts to appearance before analyzing technical details. That is why the listing should work not only as a catalog, but also as a quick lookbook.
The hover/swipe mechanism helps show:
SMMASH is an example of an apparel store where visual presentation is part of the product. Color, print, and the energy of the design have a direct impact on the purchase decision. A listing-activated gallery makes it possible to show these elements faster, without burdening the initial page load.
Slumbersac is a store specializing in children's sleeping bags, where the product belongs to the apparel category, but the purchase decision is more technical than in classic fashion. A parent chooses not only the pattern and size, but also the sleeping bag construction, TOG rating, season, material, and practical details related to the child's safety and comfort.
The range includes, among others, sleeping bags with legs, classic sleeping bags, seasonal variants in 0.5 TOG, 1.0 TOG, 2.5 TOG, and 3.5 TOG, as well as solutions such as detachable sleeves and fold-over leg cuffs with ABS.
At Slumbersac, the product needs to be explained visually. A parent wants to quickly understand how a specific model differs: whether it has legs, whether the sleeves are detachable, what temperature range it covers, and whether it is suitable for summer, winter, or year-round use.
The site features product and trust messages, including detachable sleeves, fold-over leg cuffs with ABS, a Google rating of 4.8, fast shipping, and messaging about the most frequently chosen sleeping bag. This shows that the store combines emotional presentation of patterns with very practical arguments.
In a children's sleeping bag store, the product list must handle several types of information at the same time:
One image on the listing may show the print, but it does not always explain the construction. For a parent, it is important to quickly distinguish a classic sleeping bag from a sleeping bag with legs or a variant with detachable sleeves.
The second challenge is mobile. Shopping for children's products often takes place on a phone, so the interaction must feel natural: page scrolling cannot be blocked, and moving to the next image should be simple.
For Slumbersac, it is valuable to extend the product listing with a quick preview of the next product image. On hover or swipe on mobile, the user can see an additional shot that shows the sleeping bag construction or a practical detail.
Key assumptions:
In such a store, a dedicated image attribute, e.g. on_hover, is especially useful. Thanks to it, the store team can decide for themselves which image best explains the product on the listing.
Examples of use:
This is important because the automatic second image from the gallery is not always the best sales image. In the case of technical-apparel products, it is better to give the merchandiser control over what the customer sees as the first interaction.
A parent can more quickly assess whether the product meets a specific need: a warmer sleeping bag for winter, a lightweight year-round model, a sleeping bag with legs for a child who walks, or a model with detachable sleeves.
Benefits:
Slumbersac sells products that are simultaneously clothing, a sleep accessory, and a functional product for a child. The pattern aesthetics are important, but the parent pays just as much attention to practical solutions.
The hover/swipe gallery helps show:
on_hover attribute to indicate the best functional image,Slumbersac is an example of an apparel store where the product image must explain the function, not just the look. A well-chosen second image on the listing can show the detail that determines the purchase: legs, sleeves, material, or the shape of the sleeping bag. The hover/swipe mechanism and the dedicated on_hover image give the store greater control over how quickly the customer understands the product.
