Case study
HALNY - sklep demo na Shoper Storefront
Marka streetwear zbudowana od zera, żeby pokazać, jak daleko można odejść od domyślnego wyglądu szablonu Storefront - bez łamania platformy i bez utraty aktualizacji.
Zakres prac
Co powstało w tym projekcie
- Marka HALNY od podstaw: nazwa, podmarki, czarno-kremowa paleta z sygnałowym pomarańczem i typografia Unbounded + Archivo
- 13 modułów własnych Storefront: hero z wideo, pasek USP, lookbook, manifest marki, newsletter, stopka, własny header, listing i karta produktu
- Katalog 55 produktów z wariantami rozmiaru i koloru, filtrami atrybutów przypisanymi per kategoria i promocjami z najniższą ceną z 30 dni
- Listing z wysuwanym panelem filtrów i karta produktu z galerią-sceną, lightboxem i półprzezroczystym panelem zakupu
- Każdy wariant pod własnym adresem URL - osobna warstwa na Cloudflare Workers, bez ingerencji w silnik sklepu
- Ostylowana ścieżka zakupowa: koszyk, dane, dostawa i płatność, logowanie i rejestracja
- Responsywność od 320 px i poprawki natywnych zachowań platformy, które psuły konwersję
Decyzje projektowe
Dlaczego wygląda i działa tak, a nie inaczej
Moduły własne zamiast łatania szablonu
Wszystko, czego edytor wizualny nie potrafi, siedzi w modułach własnych i jednym pliku stylów. Pliki bazowe Storefront zostają nietknięte, więc sklep dalej dostaje aktualizacje platformy - to najczęstszy błąd przy dostosowywaniu szablonów.
Warianty, które da się wysłać linkiem
Shoper trzyma wybrany rozmiar i kolor w pamięci strony, więc link do "bluzy M, niebieskiej" nie istnieje. Worker na Cloudflare serwuje każdy wariant pod adresem /v/, z jego ceną, dostępnością i danymi strukturalnymi dla Google - a sam sklep o tym nie wie.
Marka aż do płatności
W wielu sklepach na Storefront marka kończy się na karcie produktu, a koszyk wygląda jak w każdym innym sklepie. Tutaj koszyk, dane, dostawa, płatność, logowanie i rejestracja mają te same kolory, typografię i przyciski co reszta - a działają na natywnych mechanizmach Shopera, więc płatności i integracje zostają nietknięte.
Strona główna jak lookbook
Streetwear kupuje się oczami. Strona główna pokazuje markę jak lookbook: wideo, duża typografia, manifest z detalem tkaniny. Katalog i filtry czekają tam, gdzie klient już szuka konkretu.
Pod lupą
Najważniejsze ekrany, punkt po punkcie
Karta produktu
Własny moduł zamiast domyślnej karty Storefront - zdjęcia grają pierwsze skrzypce, a zakup jest zawsze w zasięgu ręki.
-
1
Wariant w adresie URL
Kliknięcie rozmiaru zmienia adres na /v/ z numerem wariantu. Taki link można wysłać znajomemu albo wrzucić do kampanii - otworzy się dokładnie ten rozmiar i kolor.
-
2
Kolor, który zostaje
Platforma po zmianie rozmiaru kasowała wybrany kolor. Dopisaliśmy przywracanie po odpowiedzi API sklepu - klient nie dostaje błędu przy dodawaniu do koszyka.
-
3
Galeria jak wybieg
Zdjęcia przesuwają się same przez całą szerokość ekranu, z pauzą i podglądem pełnoekranowym. Panel zakupu jest półprzezroczysty, więc nie zasłania produktu.
Listing z filtrami
Filtry Shopera w nowym opakowaniu - te same dane z panelu, ale bez wiecznie rozłożonego bocznego menu.
-
1
Filtry na żądanie
Panel filtrów wysuwa się po kliknięciu, a na telefonie jest wysuwanym od dołu arkuszem. Siatka produktów dostaje całą szerokość, dopóki klient nie zechce zawęzić wyników.
-
2
Atrybuty per kategoria
Rozmiar, kolor, fason czy materiał pochodzą z atrybutów przypisanych do kategorii w panelu - sklepikarz sam decyduje, po czym da się filtrować.
-
3
Omnibus w kafelku
Przy każdej promocji stoi najniższa cena z 30 dni, już na liście produktów. Zgodność z dyrektywą Omnibus bez dopisywania przypisów ręcznie.
Wydajność
Zmierzone, nie obiecane
Pomiar Lighthouse na produkcji (strona główna, desktop, mediana z trzech pomiarów). Punkt w praktykach odbiera natywny skrypt platformy, który dla niezalogowanego gościa loguje błąd 401 - jest poza zasięgiem szablonu.
- Wydajność
- 94
- Dostępność
- 100
- Praktyki
- 96
- SEO
- 100
Stack
Technologie
Chcesz taki sklep dla swojej marki?
Napisz, co sprzedajesz i czego potrzebujesz. Wycena wraca do ciebie w 24 godziny, bez zobowiązań.