Shoper Storefront: jak dostosować szablon sklepu i nie stracić aktualizacji

Storefront to nowy silnik szablonów Shopera i domyślny wybór dla każdego nowego sklepu. Problem w tym, że po uruchomieniu większość sklepów na Storefront wygląda niemal identycznie: ten sam układ strony głównej, te same kafelki produktów, te same zaokrąglone przyciski. Dobra wiadomość jest taka, że szablon da się przebudować bardzo mocno i wciąż korzystać z aktualizacji platformy. Trzeba tylko wiedzieć, które warstwy wolno ruszać, a które lepiej zostawić w spokoju. Poniżej opisujemy to na przykładzie sklepu demo HALNY, który zbudowaliśmy od zera na Storefront.

Cztery poziomy dostosowania szablonu Storefront

Zakres zmian w Storefront układa się w cztery poziomy. Każdy kolejny daje więcej swobody, ale też wymaga więcej wiedzy technicznej.

Edytor wizualny: więcej niż się wydaje

Edytor wizualny Storefront to w praktyce kreator stron metodą przeciągnij i upuść. Ustawisz w nim kolejność sekcji na każdym typie strony (strona główna, lista produktów, karta produktu, koszyk), podmienisz moduły, dodasz banery i zmienisz podstawowe kolory oraz fonty. Na tym poziomie da się już sporo, ale wszystkie sklepy korzystają z tych samych klocków, więc efekt nadal przypomina domyślny szablon.

Warto pamiętać o jednej rzeczy: układ sekcji w edytorze ustawia się osobno dla każdego typu strony. Moduł dodany do strony głównej nie pojawi się sam w promocjach ani w wynikach wyszukiwania. Przy dużej przebudowie łatwo o to, że połowa podstron wygląda po nowemu, a wyszukiwarka dalej ma domyślny wygląd.

Własny CSS: zmienne zamiast walki z szablonem

Pole z własnym CSS w panelu to w rzeczywistości plik LESS. To ważne, bo szablon Storefront opiera się na zmiennych: kolor główny, font, szerokość kontenera, odstępy w siatce produktów. Zamiast nadpisywać setki selektorów, można po prostu zadeklarować zmienną na nowo i szablon sam przeliczy wszystkie miejsca, w których jej używa. Tak w HALNY zmieniliśmy paletę i typografię w kilkunastu liniach.

Pliki stylów bazowych szablonu są tylko do odczytu i tak powinno zostać. Każda zmiana ląduje w jednym pliku stylów własnych, dzięki czemu po aktualizacji Storefront nic się nie nadpisuje i nie trzeba niczego scalać ręcznie. Fonty spoza listy wbudowanej w Shopera (w HALNY to Unbounded) dodaje się przez deklarację @font-face w tym samym pliku.

Moduły własne: tu kończy się szablon, a zaczyna projekt

Moduł własny to osobna sekcja z własnym szablonem HTML, stylami, skryptem i polami ustawień, które potem wypełnia się w edytorze wizualnym. Dostęp do modułów własnych zależy od pakietu Shopera. To najważniejsze narzędzie przy przebudowie: w HALNY powstało ich trzynaście, od hero z wideo i paska z korzyściami, przez lookbook i manifest marki, aż po własny header, listę produktów i kartę produktu.

Moduły mają dostęp do danych sklepu: produktów, kategorii, wariantów, filtrów, cen promocyjnych z najniższą ceną z 30 dni. Nie trzeba więc niczego wpisywać ręcznie. Moduł listy produktów w HALNY korzysta z tych samych filtrów, które sklepikarz ustawia w panelu, tylko prezentuje je w wysuwanym panelu zamiast stale rozłożonego bocznego menu.

Moduły własne to też właściwe miejsce na skrypty. Kod, który w starym szablonie RWD wklejało się do integracji własnych albo plików szablonu, na Storefront przepisuje się właśnie na moduły. To jeden z głównych punktów każdej migracji z RWD na Storefront.

Shoper CLI: szablon w edytorze kodu i w Git

Przy większym projekcie klikanie w panelu szybko przestaje wystarczać. Shoper udostępnia narzędzie wiersza poleceń, które pobiera pliki szablonu na komputer, a w trybie podglądu wysyła każdą zapisaną zmianę na sklep. Dostęp nadaje się tokenem wygenerowanym w panelu. Dwie zasady, które oszczędzają nerwów: głównego szablonu nie edytuje się bezpośrednio, tylko jego kopię, a przed każdym wysłaniem zmian warto sprawdzić, do którego sklepu przypisany jest aktywny token. Przy kilku sklepach pomyłka oznacza zmianę na produkcji niewłaściwego klienta.

CLI pozwala też nadpisywać makra szablonu, czyli mniejsze fragmenty HTML używane w wielu miejscach, na przykład kafelek produktu. Dzięki temu zmiana w jednym miejscu działa na całym sklepie.

Pułapki, które wychodzą dopiero w działającym sklepie

Przejścia między stronami bez przeładowania. Storefront podmienia treść strony bez pełnego przeładowania. Skrypt, który przypina się do elementów tylko raz po wczytaniu strony, po pierwszym kliknięciu w menu przestaje działać. W HALNY przez to znikał licznik produktów w koszyku. Kod w modułach trzeba pisać tak, żeby reagował na zdarzenia na poziomie całego dokumentu i sam się odtwarzał po zmianie treści.

Warianty bez własnych adresów. Storefront trzyma wybrany wariant w pamięci strony, więc linku do konkretnego rozmiaru i koloru nie da się wysłać ani wrzucić do kampanii. W HALNY rozwiązaliśmy to osobną warstwą na Cloudflare Workers, która serwuje każdy wariant pod własnym adresem, bez ingerencji w silnik sklepu. To już rozwiązanie dla sklepów, którym na tym naprawdę zależy, ale pokazuje, że ograniczenia platformy SaaS da się obejść.

Samemu czy z wykonawcą?

Zmianę kolorów, fontów, kolejności sekcji i banerów zrobisz samodzielnie w edytorze wizualnym w jeden wieczór. Proste poprawki wyglądu w pliku CSS też są w zasięgu, jeśli ktoś w zespole zna CSS. Wykonawca ma sens, gdy sklep ma przestać wyglądać jak szablon: przy modułach własnych, przebudowie karty produktu i listy, własnej ścieżce zakupowej albo przy przenoszeniu sklepu ze starego RWD. Napisz, jaki masz sklep i co chcesz zmienić, a w 24 godziny dostaniesz bezpłatną wycenę.

Najczęstsze pytania o dostosowanie szablonu Shoper Storefront

Czy szablon Storefront można w pełni dostosować do marki?

Tak. Poza edytorem wizualnym do dyspozycji są własny plik stylów (LESS ze zmiennymi szablonu) i moduły własne z własnym HTML, stylami i JavaScriptem. Pozwala to przebudować stronę główną, listę produktów, kartę produktu i koszyk, a sklep nadal korzysta z aktualizacji platformy. Każde rozwiązanie, które zaproponujesz, od własnego układu karty produktu po niestandardowy koszyk czy integrację, możemy wdrożyć w tych warstwach.

Czy zmiany w szablonie znikną po aktualizacji Shopera?

Nie, jeśli są zrobione we właściwych warstwach: w edytorze wizualnym, we własnym pliku stylów i w modułach własnych. Pliki bazowe szablonu są tylko do odczytu, a zmiany wprowadza się obok nich, więc aktualizacje Storefront ich nie nadpisują.

Gdzie na Storefront dodać własny skrypt, na przykład piksel lub widget?

Popularne narzędzia analityczne mają gotowe moduły i integracje w panelu. Pozostałe skrypty dodaje się przez moduły własne. Skrypty wklejane do plików starego szablonu RWD trzeba przy migracji przepisać na moduły.

Czym jest Shoper CLI?

To narzędzie wiersza poleceń do pracy na plikach szablonu Storefront: pobiera szablon na komputer, wysyła zmiany na sklep i ma tryb podglądu na żywo. Dostęp nadaje się tokenem z panelu, a pracuje się na kopii szablonu, nie na szablonie głównym.

Czy można mieć osobny adres URL dla każdego wariantu produktu?

Natywnie Storefront trzyma wybrany wariant w pamięci strony, bez osobnego adresu. Da się to obejść dodatkową warstwą, na przykład na Cloudflare Workers, która serwuje każdy wariant pod własnym adresem z jego ceną i dostępnością. Tak działa nasz sklep demo HALNY.

Chcesz zobaczyć efekt, zanim zdecydujesz? Case study sklepu HALNY pokazuje przebudowany szablon Storefront z wynikami Lighthouse, a sam sklep demo można przeklikać. Jeśli twój sklep działa jeszcze na starym szablonie, zacznij od artykułu Shoper RWD czy Storefront, a więcej o naszej pracy z Shoperem znajdziesz na stronie wdrożeń Shoper.