Projekt

SMMASH ist ein Shop für Sportbekleidung, in dem nicht nur Schnitt und Größe das Produkt verkaufen, sondern auch die Energie des Musters, die Farbe, der Aufdruck und die Eignung für eine bestimmte Aktivität. Die Marke kommuniziert über starke visuelle Kollektionen sowie eine breite sportliche Unterteilung: MMA, OCR, Crossfit, Laufen, BJJ, Muay Thai, Judo, Boxen und Kickboxen.

Der Shop ist in der Bekleidungsbranche tätig, aber sein Katalog erfordert eine dynamischere Präsentation als ein klassischer Fashion-Shop. Die Produkte unterscheiden sich oft in grafischen Details, Konstruktion, Trainingszweck und Trageweise. Für den Nutzer kann die schnelle Vorschau einer zweiten Ansicht, Farbe oder visuellen Variante wichtiger sein als der Produktname selbst.

Geschäftskontext

SMMASH verbindet den Verkauf technischer Bekleidung mit einem starken visuellen Markencharakter. Das Angebot umfasst Produkte für Herren, Damen und Kinder sowie Vereinsbekleidung und personalisierte Projekte. Auf der Website sind Lifestyle- und Sportkategorien sichtbar, darunter Combat, OCR, Training und Laufen, was zeigt, dass der Kunde Produkte oft nach Aktivitätsstil durchsucht und nicht nur nach Bekleidungsart.

Ein wichtiges Element des Shops ist auch die Präsentation von Designs und Visualisierungen. Bei Sportbekleidung ist die Kaufentscheidung stark mit dem Aussehen des Produkts verbunden: intensive Farben, Muster, Kontraste und die Anordnung des Drucks müssen bereits auf Listing-Ebene sichtbar sein.

Herausforderung

Die größte Herausforderung in einem solchen Katalog ist die Verbindung von zwei Anforderungen:

• schnelles Laden der Produktlisten,
• attraktive visuelle Präsentation, ohne jede Produktseite öffnen zu müssen.

Bei Sportbekleidung reicht ein statisches Bild im Listing oft nicht aus. Der Kunde möchte schnell sehen, wie das Produkt aus einer anderen Perspektive aussieht, wie der Druck fällt, ob die Farbe ausdrucksstark genug ist und ob das Produkt zu einem bestimmten Trainingsstil passt.

Gleichzeitig kann ein Shop mit umfangreichem Katalog nicht zu viele Bilder sofort nachladen, weil dies die Seite belasten, die Nutzung auf Mobilgeräten verschlechtern und sich negativ auf die Core Web Vitals auswirken könnte.

Lösung

Für diesen Shoptyp eignet sich besonders gut ein Mechanismus für eine Produktgalerie, die beim Überfahren oder Berühren des Produkts aktiviert wird. Das Listing bleibt beim ersten Rendern leicht, aber der Nutzer kann schnell ein weiteres Bild ansehen, ohne die Kategorie zu verlassen.

Zentrale Annahmen:

• das erste Laden der Kategorie bleibt möglichst leicht,
• zusätzliche Bilder werden erst nach dem Laden der Seite oder wenn sich das Produkt dem Sichtbereich nähert, abgerufen,
• das zweite Bild wird vorbereitet, bevor der Kunde mit der Maus über das Produkt fährt,
• die Galerie funktioniert auch für Produktlisten, die beim Scrollen nachgeladen werden,
• auf Mobilgeräten blockiert die Bedienung der Galerie nicht das natürliche Scrollen der Seite.

Bei SMMASH ermöglicht ein solcher Mechanismus, bereits im Listing mehr vom Produktwert zu zeigen: Druck, Farbgebung, Detail, alternative Ansicht oder die Art der Präsentation des Produkts am Körper.

Effekt für den Nutzer

Der Nutzer kann Produkte schneller vergleichen, ohne viele Produktseiten zu öffnen. Das ist besonders wichtig, wenn der Katalog viele ähnliche Bekleidungsarten enthält, aber jedes Produkt ein anderes grafisches Design hat.

Vorteile:

• schnelleres Scannen der Kollektion,
• bessere Präsentation von Farben und Mustern,
• weniger Klicks zum Vergleichen von Produkten,
• ein dynamischerer Eindruck des Shops,
• Beibehaltung eines leichten ersten Ladens der Kategorie.

Warum es zu SMMASH passt

SMMASH verkauft Produkte mit einer starken visuellen Komponente. Bei Rashguards, T-Shirts, Leggings, Shorts oder Sporttrikots reagiert der Kunde oft auf das Aussehen, bevor er die technischen Details analysiert. Deshalb sollte das Listing nicht nur wie ein Katalog funktionieren, sondern auch wie ein schneller Lookbook.

Der Hover/Swipe-Mechanismus hilft zu zeigen:

• intensive Muster und Farben,
• alternative Produktansichten,
• Details des Drucks,
• Unterschiede zwischen Produkten aus derselben Kategorie,
• den visuellen Charakter der Kollektion.

Empfohlene Entwicklungsrichtungen

• ein dediziertes Hover-Bildattribut für Produkte, damit das Shop-Team die beste Ansicht für das Listing festlegen kann,
• eine separate Logik für Sport- und Lifestyle-Kollektionen,
• Analyse von Klicks nach der Interaktion mit dem Hover,
• A/B-Test: klassisches Listing versus Listing mit aktivem zweitem Bild,
• Optimierung der Prefetch-Priorität für die ersten Produkte im Sichtbereich.

Zusammenfassung

SMMASH ist ein Beispiel für einen Bekleidungsshop, in dem die visuelle Präsentation Teil des Produkts ist. Farbe, Druck und die Energie des Designs haben direkten Einfluss auf die Kaufentscheidung. Eine im Listing aktivierte Galerie ermöglicht es, diese Elemente schneller zu zeigen, ohne das erste Laden der Seite zu belasten.

Im Shop smmash.pl gelangt der Kunde zu Kategorien mit Sportbekleidung, in denen die Kaufentscheidung häufig mit einer schnellen Auswahl beginnt: Disziplin, Kollektion, Verwendungszweck (z. B. „BJJ“, „MMA“, „Fitnessstudio“, „Outdoor“). Die klassische Layered Navigation ist korrekt, erfordert jedoch das Öffnen der Seitenfilter und mehrere Klicks.

Die Implementierung von Kowal Tags Bar ergänzte oberhalb des Listings eine auf einem Dropdown-Attribut basierende „Tag“-Leiste (z. B. „Sport / Kollektion“). Ergebnisse:

• Nutzer sehen die wichtigsten Optionen sofort und filtern die Liste mit einem Klick,

• Frustrationen durch Klicks auf Filter ohne Ergebnisse entfallen (Tags ohne Produkte werden nicht angezeigt),

• im Amasty-Modus sind die Links SEO-freundlich und konsistent mit der bestehenden URL-Struktur,

• die Übersichtlichkeit des Listings auf Mobilgeräten steigt, da der wichtigste Filter „über den Produkten“ liegt und nicht in einem Seitenpanel verborgen ist.