Co muszę wiedzieć przed przejściem na szablon Storefront?
Myśląc o przejściu na szablon działający w technologii Storefront, możesz rozważyć dwa podejścia. Pierwsze to odwzorowanie możliwie jak najwierniej, ale jednak z lekkim odświeżeniem, dotychczasowego szablonu RWD. Z drugiej strony możesz też zaskoczyć klientów i zaprezentować im całkowicie nową odsłonę ich ulubionego sklepu! Z technologią Storefront otwierają się przed Tobą zupełnie nowe możliwości niż dotychczas.
Więcej typów stron do edycji
W szablonie Storefront masz możliwość wpływania na wygląd dużo większej liczby rodzajów stron np. strony kolekcji, strony z produktami danego producenta, strony z wynikami wyszukiwania produktów, strona zestawu produktów, strona produktu nieaktywnego, strona główna bloga, wpis bloga, strona sklepu wyłączonego i wiele, wiele innych.
Dostosujesz sklep pod każde urządzenie
Zastanów się, które elementy strony sklepu chcesz wyświetlać na mobile, a które na laptopach bądź na komputerach stacjonarnych. Możesz także wyświetlać dany element na każdym urządzeniu, ale w nieco zmienionej formie. W szablonie Storefront decydujesz o tym samodzielnie. Zmian dokonasz za pomocą kilku kliknięć myszką.
Dostępność aplikacji w technologii Storefront
Sprawdź, czy aplikacje, które do tej pory były używane w sklepie są już przystosowane do pracy na szablonie Storefront. Jak to zrobić? Przejdź do App Store i szukaj aplikacji oznaczonych jako „Storefront”.
Większość aplikacji jest dostarczana przez partnerów zewnętrznych. To kiedy dana aplikacja, z której korzystasz, będzie dostosowana do Storefronta, zależy więc od nich.
Własne modyfikacje szablonu i nietypowe rozwiązania
W swoim starym szablonie posiadasz modyfikacje w stylach CSS lub w JavaScript? Jeśli ich przeniesienie do szablonu Storefront nie jest możliwe przy użyciu standardowych narzędzi, skontaktuj się z wykonawcą modyfikacji lub znajdź programistę, który pomoże je przenieść.
Jeśli nie znasz lub nie wiesz, gdzie szukać sprawdzonych programistów, odezwij się do nas, a skontaktujemy Cię z jednym z naszych autoryzowanych partnerów.
Modernizacja sklepu może nie być jednak konieczna. Porządki w modułach mogą doprowadzić Cię do wniosku, że wszystko (a nawet więcej), czego potrzebujesz, masz już w Storefroncie!
Dodatkowe integracje wprowadzisz w pakiecie Premium. Zweryfikuj, czy moduł, którego potrzebujesz, nie znajduje się już w sklepie lub poszukaj odpowiednika w aplikacjach App Store.
Nowoczesne gotowe szablony
Znany Ci już sklep z szablonami graficznymi, udostępnia nowoczesne i funkcjonalne szablony działające w technologii Storefront. Wiele z nich posiada unikatowe moduły, które zostały specjalne zaprojektowane po to, aby podkreślić ich wyjątkowość.
Wraz z pojawieniem się nowej technologii, jeszcze szerzej otworzyliśmy drzwi dla naszych partnerów, którzy również dostarczają piękne i profesjonalne szablony. Dzięki temu liczba szablonów stale rośnie, dając Tobie coraz większy wybór.
Jak zmienić szablon sklepu z RWD na Storefront?
Zmiana starego szablonu na nowy to szansa na odświeżenie wyglądu sklepu i skorzystanie z nowoczesnych narzędzi do jego personalizacji. Proces ten, choć wymaga pewnego nakładu pracy, to pozwala na stworzenie sklepu idealnie dopasowanego do potrzeb Twoich klientów. Poniżej znajdziesz przewodnik, który krok po kroku pomoże Ci zmienić wygląd Twojego sklepu na lepsze!
Zanim rozpoczniesz pracę z nowym szablonem, ważne jest, aby zabezpieczyć wszystkie elementy graficzne wykorzystywane w obecnym szablonie.
Zapisz grafiki
Pobierz na dysk komputera zdjęcia, banery, grafiki, które aktualnie znajdują się w Twoim sklepie. Skoncentruj się na elementach graficznych szablonu, takich jak banery na stronie, grafiki w slajderach, logo sklepu itp.
Nie musisz zabezpieczać zdjęć produktów. Te pozostają niezmienne bez względu na to, z którego szablonu korzystasz.
Format plików
Nie musisz przejmować się konwersją grafik do formatu WebP. Szablony Storefront automatycznie konwertują dodawane grafiki do tego formatu, co przyczynia się do szybszego ładowania strony.
Przed przystąpieniem do projektowania nowego wyglądu sklepu, poświęć czas na zapoznanie się z możliwościami edytora Shoper Visual Editor w technologii Storefront. Zyskujesz w nim dziesiątki bezpłatnych modułów, wiele szans personalizacji za pomocą opcji przeciągnij i upuść, a także fajniejszą nawigację po stronach sklepu.
Kluczowe jest zrozumienie sposobu budowania struktury strony w technologii Storefront.
Sekcje, wiersze i kolumny
To pozwoli Ci sprawnie tworzyć i modyfikować układ strony.
Nigdy nie wprowadzaj zmian bezpośrednio w aktywnym (widocznym dla kupujących) szablonie.To zawsze rozważna opcja, która pozwala uniknąć wpadek w wyglądzie i działaniu sklepu. PS. Dokładnie tę samą poradę daliśmy Ci na starcie działania Twojego e-commerce’u!
Wykonaj kopię szablonu Storefront
Będziesz pracować na tej kopii, co pozwoli Ci na spokojne testowanie i wprowadzanie zmian, bez wpływu na działający szablon, który widzą Twoi klienci.
W momencie kiedy uznasz, że szablon Storefront jest dopracowany w 100%, aktywujesz go w sklepie jednym kliknięciem.
Zamiast próbować stworzyć całą stronę na raz, podejdź do tego etapami. Zacznij od strony głównej, projektuj sekcje tematycznie. Pamiętaj, że każda z nich powinna mieć jasno określony cel.
Wyobraź sobie, że Twój sklep to muzeum. Każda strona sklepu to osobna epoka w historii sztuki. Każda sekcja na stronie to osobna tematyczna sala w muzeum. Sale mogą różnić się od siebie układem czy rozmieszczeniem regałów i gablot, które prezentują ekspozycję.
Trzymaj się logicznego porządku. Twórz sekcje po kolei, od góry do dołu strony. To ułatwi Ci zachowanie spójności i kontrolę nad wyglądem.
Wyobraź sobie, w jaki sposób Twój klient będzie korzystał ze strony sklepu. W nowym Shoper Visual Editorze masz pełną kontrolę zmian. Dlatego w każdej chwili możesz zmienić kolejność sekcji, przesuwając je w górę lub w dół.
Kluczowym elementem projektowania stron internetowych jest ich responsywność. Regularnie sprawdzaj, jak strona czy poszczególne sekcje wyglądają na różnych urządzeniach (komputery, tablety, smartfony).
W razie potrzeby dostosuj ustawienia sekcji, wierszy i kolumn, aby strona prezentowała się idealnie na każdym ekranie.
W starym szablonie spora część integracji opiera się na dodawaniu skryptów czy tagów html do sekcji head lub body strony całego sklepu. Dostęp do tych sekcji znajduje się w panelu administracyjnym w zakładce Dodatki i integracje > Integracje własne.
W szablonie Storefront nie musisz już wklejać żadnych skryptów i zastanawiać się jak je zmodyfikować, aby uzyskać pożądany efekt, lub włączyć konkretną funkcję. W Shoper Visual Edior w zakładce: Pop-upy i dodatki znajdziesz szereg predefiniowanych modułów, w których wystarczy podać identyfikator danego narzędzia i z poziomu edytora skonfigurować integrację tak jak chcesz.
W zakładce Pop-upy i dodatki masz możliwość uruchomienia integracji z następującymi narzędziami:
- Google Analytics
- Google Tag Manager
- Google Remarketing
- Weryfikacja witryny w Google Merchant Center
- Weryfikacja witryny w Google Search Console
- Weryfikacja witryny w META (Facebook, Instagram)
- Weryfikacja witryny w Microsoft
- Weryfikacja witryny w Pinterest
- Opinie konsumenckie Google
- TikTok Piksel
Szablon w technologii Storefront nie uwzględnia treści wprowadzonych do Integracji własnych, z których korzysta szablon w starej technologii. Przenieś integracje do aktywnego szablonu Storefront jeśli zależy Ci na ich dalszym działaniu.
Wiele integracji z popularnymi narzędziami, których uruchomienie również wymagało dodania skryptu do Integracji własnych, aktualnie w technologii Storefront przyjęło formę łatwych do instalacji i konfiguracji aplikacji.
Po zainstalowaniu aplikacji, cały skrypt jest automatycznie instalowany w odpowiednim fragmencie kodu strony, a Ty w Shoper Visual Editor w zakładce: Pop-upy i dodatki, wygodnie konfigurujesz aplikację z poziomu przyjaznego i intuicyjnego formularza.
Przykładowe integracje dla sklepów korzystających z szablonów w technologii Storefront dostępne w formie darmowych aplikacji:
Dodatkowe wskazówki podczas projektowania szablonu sklepu
- Spójność wizualna: Utrzymuj spójność kolorystyki, czcionek i stylu grafik w całym sklepie.
- Funkcjonalność: Pamiętaj, że wygląd to nie wszystko. Strona musi być funkcjonalna i łatwa w nawigacji.
- Testowanie: Po zakończeniu projektowania, dokładnie przetestuj działanie wszystkich elementów strony (linki, formularze, filtry, itp.).
- Opinia: Poproś kogoś o opinię na temat nowego wyglądu sklepu. Świeże spojrzenie może pomóc wychwycić potencjalne problemy.
Wybór nowego silnika to inwestycja w przyszłość Twojego sklepu. Poświęć czas na dokładne zaplanowanie i wykonanie wszystkich kroków, a efekt z pewnością da ci jeszcze więcej szans na rozwój.
Skąd czerpać wiedzę na temat możliwości i konfiguracji szablonu Storefront?
Na łamach naszego serwisu pomocy Shoper Learn znajdziesz osobną kategorię, która poświęcona jest w 100% zagadnieniom związanym z technologią Storefront. Dzięki artykułom dowiesz się m.in.: jak dodać moduł do strony, jak ustawić dany element na całą szerokość ekranu, czy chociażby jak stworzyć pasek informacyjny w nagłówku.
Jeśli lepiej przyswajasz wiedzę poprzez materiały audiowizualne, to koniecznie odwiedź naszą playlistę na Youtube poświęconą szablonom Storefront. Dowiesz się z nich m.in.: jak zarządzać sekcjami, wierszami i kolumnami, jak dodać slajdy w różnych wersjach językowych oraz jak edytować strony koszyka.
Warto zapamiętać!
- O czym należy pamiętać przed zmianą szablonu na Storefront?
- Jak przygotować się do pracy z szablonem Storefront?
- Wskazówki, o których należy pamiętać podczas projektowania szablonu.
- Gdzie szukać informacji i instrukcji dla szablonów w technologii Storefront?