Punkt wyjścia
Sklep w Emiratach nie wyglądał jak VOX
Kiedy zaczynaliśmy, voxfurniture.ae działał na starym motywie Shopify, który wyglądem odbiegał od vox.pl. Typografia, układy stron i karty produktu wyglądały inaczej niż na stronie marki, więc klient znający VOX trafiał do sklepu, który przypominał ją głównie logo. Motyw był też ciężki. Ładował dużo skryptów, przez co pierwsze wyświetlenie strony trwało długo, a najmocniej odczuwali to użytkownicy telefonów. Do tego katalog jest spory: dziś to ponad 700 produktów w około 80 kolekcjach, więc każda zmiana w szablonie listingu albo karty produktu działa na setkach stron jednocześnie. Przebudowa musiała objąć zarówno wygląd, jak i kod pod spodem.
Co zrobiliśmy
Front przepisany na Alpine.js i Tailwind CSS
Całą przebudowę frontu zrobiliśmy po naszej stronie, na szablonach Liquid. Punktem odniesienia był wygląd i zachowanie oficjalnej strony vox.pl.
- 1
Język wizualny przeniesiony z vox.pl
Rozłożyliśmy stronę vox.pl na elementy: typografię, siatkę, odstępy, przyciski i sposób pokazywania zdjęć aranżacji. Na tej podstawie zbudowaliśmy zestaw komponentów dla Shopify, od hero na stronie głównej, przez listing kolekcji, po kartę produktu. Sklep w Emiratach wygląda dzięki temu jak część tej samej marki.
- 2
Motyw bez zbędnego JavaScriptu
Stary kod motywu zastąpiliśmy szablonami Liquid z interakcjami na Alpine.js i stylami w Tailwind CSS. Elementy interaktywne działają na małych komponentach zamiast na ciężkich skryptach poprzedniego motywu. Taki kod łatwiej czytać i rozwijać, a dodanie nowej sekcji nie wymaga dokładania kolejnej aplikacji do sklepu.
- 3
Mniej skryptów, szybsze ładowanie
Przejrzeliśmy wszystko, co ładowało się na stronie, i zostawiliśmy tylko to, czego sklep faktycznie potrzebuje. Liczba ładowanych skryptów spadła o 95%, czas ładowania skrócił się o połowę, a wynik mobile w Lighthouse wzrósł o 30 punktów. Mniej kodu do pobrania oznacza krótsze czekanie przede wszystkim na telefonach.
- 4
Szablony pod duży katalog
Listing kolekcji i kartę produktu zbudowaliśmy tak, żeby działały tak samo dla jednego produktu, jak dla setek. Dziś obsługują ponad 700 produktów w około 80 kolekcjach, a nowe pozycje pojawiają się w sklepie od razu w docelowym wyglądzie, bez dodatkowej pracy po stronie frontu.
Efekt
Sklep wygląda jak VOX i ładuje się dwa razy szybciej
Po przebudowie voxfurniture.ae ma ten sam język wizualny co vox.pl, więc klient w Emiratach widzi markę, którą zna z innych kanałów. Strona ładuje o 95% mniej skryptów, wczytuje się dwa razy szybciej, a wynik mobile w Lighthouse jest wyższy o 30 punktów. Front oparty na Liquid, Alpine.js i Tailwind CSS jest prosty w utrzymaniu: nowe sekcje składa się z gotowych komponentów, bez aplikacji, które spowalniają sklep.
- Wygląd zgodny z oficjalną stroną vox.pl
- Ponad 700 produktów w około 80 kolekcjach na nowych szablonach
- Interakcje na Alpine.js, style w Tailwind CSS
- Wynik mobile w Lighthouse wyższy o 30 punktów
