Proiect

SMMASH este un magazin de îmbrăcăminte sport, în care produsul se vinde nu doar prin croială și mărime, ci și prin energia modelului, culoare, imprimeu și potrivirea cu o anumită activitate. Brandul comunică prin colecții vizuale puternice și o segmentare sportivă amplă: MMA, OCR, Crossfit, alergare, BJJ, Muay Thai, judo, box și kickboxing.

Magazinul operează în industria de îmbrăcăminte, dar catalogul său necesită o prezentare mai dinamică decât un magazin fashion clasic. Produsele diferă adesea prin detalii grafice, construcție, destinație de antrenament și mod de purtare. Pentru utilizator, o previzualizare rapidă a unei a doua imagini, a culorii sau a variantei vizuale poate fi mai importantă decât denumirea produsului.

Context de business

SMMASH combină vânzarea de îmbrăcăminte tehnică cu un caracter vizual puternic al brandului. Oferta include produse pentru bărbați, femei și copii, precum și îmbrăcăminte de club și proiecte personalizate. Pe site sunt vizibile categorii lifestyle și sportive, printre care Combat, OCR, Antrenament și Alergare, ceea ce arată că clientul navighează adesea produsele după stilul activității, nu doar după tipul de îmbrăcăminte.

Un element important al magazinului este și prezentarea proiectelor și a vizualizărilor. În cazul îmbrăcămintei sport, decizia de cumpărare este strâns legată de aspectul produsului: culorile intense, modelele, contrastele și dispunerea imprimeului trebuie să fie vizibile deja la nivelul listării.

Provocarea

Cea mai mare provocare într-un astfel de catalog este echilibrarea a două nevoi:

• încărcarea rapidă a listelor de produse,
• o prezentare vizuală atractivă fără a fi necesară intrarea pe pagina fiecărui produs.

În îmbrăcămintea sport, o singură imagine statică în listare de multe ori nu este suficientă. Clientul vrea să vadă rapid cum arată produsul din alt unghi, cum este poziționat imprimeul, dacă nuanța este suficient de expresivă și dacă produsul se potrivește unui anumit stil de antrenament.

În același timp, un magazin cu un catalog extins nu poate încărca din start prea multe imagini, deoarece acest lucru ar încărca pagina, ar afecta experiența pe mobile și ar putea influența negativ Core Web Vitals.

Soluția

Pentru acest tip de magazin funcționează foarte bine un mecanism de galerie de produs activată la hover sau la atingerea produsului. Listarea rămâne ușoară la prima randare, dar utilizatorul poate previzualiza rapid următoarea imagine fără a părăsi categoria.

Principalele premise:

• prima încărcare a categoriei rămâne cât mai ușoară posibil,
• imaginile suplimentare sunt încărcate doar după încărcarea paginii sau când produsul se apropie de zona vizibilă,
• a doua imagine este pregătită în avans, înainte ca utilizatorul să treacă cu cursorul peste produs,
• galeria funcționează și pentru listele de produse încărcate suplimentar în timpul scroll-ului,
• pe mobile, utilizarea galeriei nu blochează derularea naturală a paginii.

În cazul SMMASH, un astfel de mecanism permite prezentarea unei valori mai mari a produsului deja în listare: imprimeul, cromatica, detaliul, unghiul alternativ sau modul de prezentare a produsului pe siluetă.

Efectul pentru utilizator

Utilizatorul poate compara produsele mai rapid fără a deschide multe pagini de produs. Acest lucru este important mai ales atunci când catalogul conține multe tipuri similare de îmbrăcăminte, dar fiecare produs are un design grafic diferit.

Beneficii:

• scanare mai rapidă a colecțiilor,
• o mai bună expunere a culorilor și modelelor,
• mai puține clickuri necesare pentru compararea produselor,
• o senzație mai dinamică a magazinului,
• menținerea unei prime încărcări ușoare a categoriei.

De ce se potrivește cu SMMASH

SMMASH vinde produse care au o componentă vizuală puternică. În cazul rashguard-urilor, tricourilor, colanților, șorturilor sau tricoturilor sportive, clientul reacționează adesea la aspect înainte de a analiza detaliile tehnice. De aceea, listarea ar trebui să funcționeze nu doar ca un catalog, ci și ca un lookbook rapid.

Mecanismul hover/swipe ajută la prezentarea:

• modelelor și culorilor intense,
• unghiurilor alternative ale produsului,
• detaliilor imprimeului,
• diferențelor dintre produsele din aceeași categorie,
• caracterului vizual al colecției.

Direcții recomandate de dezvoltare

• atribut dedicat pentru imaginea hover a produsului, astfel încât echipa magazinului să poată indica cel mai bun cadru pentru listare,
• logică separată pentru colecțiile sportive și lifestyle,
• analiza clickurilor după interacțiunea cu hover-ul,
• test A/B: listare clasică versus listare cu a doua imagine activă,
• optimizarea priorității de prefetch pentru primele produse din zona vizibilă.

Rezumat

SMMASH este un exemplu de magazin de îmbrăcăminte în care prezentarea vizuală face parte din produs. Culoarea, imprimeul și energia designului au un impact direct asupra deciziei de cumpărare. Galeria activată în listare permite prezentarea mai rapidă a acestor elemente, fără a încărca prima încărcare a paginii.

În magazinul smmash.pl, clientul ajunge în categorii cu îmbrăcăminte sportivă, unde decizia de cumpărare începe adesea cu o alegere rapidă: disciplină, colecție, utilizare (de ex. „BJJ”, „MMA”, „sală de fitness”, „outdoor”). Navigarea stratificată clasică este corectă, dar necesită accesarea filtrelor laterale și câteva clicuri.

Implementarea Kowal Tags Bar a adăugat deasupra listării o bară de „taguri” bazată pe un atribut dropdown (de ex. „Sport / Colecție”). Rezultate:

• utilizatorul vede imediat cele mai importante opțiuni și filtrează lista cu un singur clic,

• au dispărut frustrările legate de clicurile pe filtre fără rezultate (tagurile fără produse nu sunt afișate),

• în modul Amasty, linkurile sunt SEO-friendly și coerente cu structura existentă a adreselor,

• crește lizibilitatea listării pe mobil, deoarece filtrul principal este „deasupra produselor”, nu ascuns într-un panou lateral.