Project

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.

Business context

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.

Challenge

The biggest challenge in this type of catalog is balancing two needs:

• fast loading of product listings,
• attractive visual presentation without the need to open each product page.

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.

Solution

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:

• the initial category load remains as lightweight as possible,
• additional images are fetched only after the page loads or when the product approaches the viewport,
• the second image is prepared in advance before the customer hovers over the product,
• the gallery also works for product lists loaded during scrolling,
• on mobile, gallery handling does not block natural page scrolling.

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.

Effect for the user

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:

• faster collection scanning,
• better exposure of colors and patterns,
• fewer clicks needed to compare products,
• a more dynamic store feel,
• maintaining a lightweight initial category load.

Why it fits SMMASH

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:

• intense patterns and colors,
• alternative product shots,
• print details,
• differences between products in the same category,
• the visual character of the collection.

Recommended development directions

• a dedicated hover image attribute for products, so the store team can indicate the best shot for the listing,
• separate logic for sports and lifestyle collections,
• click analysis after hover interaction,
• A/B test: classic listing vs. listing with an active second image,
• refining prefetch priority for the first products in view.

Summary

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.

In the smmash.pl store, customers browse sportswear categories where the purchase decision often starts with a quick choice: discipline, collection, purpose (e.g., “BJJ,” “MMA,” “gym,” “outdoor”). Classic layered navigation works correctly, but it requires opening side filters and making several clicks.

Implementing Kowal Tags Bar added a “tags” bar above the listing, based on a dropdown attribute (e.g., “Sport / Collection”). Results:

• users immediately see the most important options and filter the list with one click,

• frustration from clicking filters with no results was eliminated (tags without products are not displayed),

• in Amasty mode, links are SEO-friendly and consistent with the existing URL structure,

• mobile listings are easier to read because the key filter is “above the products” rather than hidden in a side panel.