SHEZAMME: przebudowa sklepu Shopify

Przy tak dużym katalogu każdy dodatkowy element obciąża stronę. Menu z miniaturą przy każdym modelu to setki zdjęć, a jeden model ma nieraz ponad 130 wersji kolorystycznych. Przy prostym wdrożeniu pierwszy ekran czekałby na obrazy, których nikt jeszcze nie widzi.

1. Mega menu z 520 miniaturami, które nie spowalnia strony. Miniatury ładują się dopiero po najechaniu na kategorię.
2. Zmiana kolorystyki bez przeładowania strony. Po kliknięciu produkt podmienia się w tym samym miejscu, z animacją.
3. Dobieranie produktów do kompletu. Sekcja „Dobierz spodnie” wyszukuje drugą część kompletu po kolorze.
4. Kategorie i marki, które prowadzą do modelu: przyciski podkategorii z liczbą produktów, siatka marek i zakupy według stylu.
5. Usługa kupowana jak produkt. Czyszczenie butów ma tabelę pakietów, a wybrany pakiet widać na dolnym pasku.

Najprościej byłoby ładować wszystko od razu. Wtedy jednak przy wejściu przeglądarka pobiera setki obrazów, których klient nigdy nie zobaczy. Na telefonie z pakietem danych to realny koszt dla klienta, a dla sklepu gorsze wyniki Core Web Vitals.

Zachowaliśmy dotychczasowy styl, bo sklep ma stałych klientów od 2016 roku. Strona, której by nie rozpoznali, przyniosłaby więcej strat niż korzyści.

Wynik 95 na 100 w teście szybkości Google na komputerze mimo ponad 4 000 produktów. Przy wejściu strona pobiera 29 obrazów zamiast setek.