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 takich jak:
Strona główna
Strona informacyjne
Strony produktu
- Produkt
- Zestaw produktów
- Produkt w programie lojalnościowym
- Zestaw w programie lojalnościowym (dostępne w pakiecie Shoper Premium)
- Nieaktywny produkt/zestaw
Listy produktów
- Produkty producenta
- Produkty z kategorii
- Produkty z kolekcji
- Wyniki wyszukiwania
- Produkty w programie lojalnościowym
- Produkty w promocji
- Nowości
Koszyk i zamówienie (dostępne w pakiecie Shoper Premium)
- Koszyk
- Potwierdzenie zamówienia
- Potwierdzenie płatności
- Komunikat po nieudanej płatności
- Dostawa i płatność
Blog
- Wpis bloga
- Strona główna bloga
- Lista wpisów z kategorii
- Lista wpisów z tagiem
Pozostałe strony
- Komunikat o wyłączonym sklepie
- Błąd 404
- Kontakt
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 Shoper 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.
Jeśli nie znasz lub nie wiesz, gdzie szukać sprawdzonych programistów, skorzystaj z naszego katalogu partnerów i znajdź programistę, który pomoże je przenieść.
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 i własne modyfikacje wprowadzisz w pakiecie Shoper Premium. Zweryfikuj, czy moduł, którego potrzebujesz, nie znajduje się już w sklepie lub poszukaj odpowiednika w aplikacjach Shoper 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.
Darmowe szablony graficzne
Nowa technologiia to także kamień milowy w historii Shopera. Darmowe szablony graficzne dla wszystkich klientów Shoper! Aktualnie udostępniamy już 11 bezpłatnych szablonów i na pewno to nie jest nasze ostatnie słowo.
Wybierz darmowy szablon i uruchom sklep bez projektowania od zera. Sprawdź, jak Twój sklep może wyglądać już dziś.
Zobacz szablony
Szablony różnią się od siebie układami, kolorystyką, charakterystyką pod kątem różnych branż. Wiele z nich posiada unikanle moduły i rozwiązania, które są dedykowane dla danego szablonu.
Poznaj nasze darmowe szablony oglądając dedykowane wideoporadniki.
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 Aplikacje i integracje > Własne integracje.
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: Integracje 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 Integracje 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
Dowiedz się więcej na temat modułu weryfikacji witryny.
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 Aplikacje i integracje > Własne integracje, 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: Integracje 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.
SEO a przejście z RWD na Storefront – bezpieczna migracja krok po kroku
Zmiana technologii sklepu to dla Twojego biznesu krok naprzód. Wielu właścicieli sklepów obawia się jednak, czy ta zmiana nie wpłynie negatywnie na pozycję w Google.
Migracja serwisu zawsze wiąże się z ryzykiem – zmiana całego ekosystemu może być dla Google trudna. Roboty muszą na nowo odwiedzić stare linki, zarejestrować zmiany w serwisie, a w tym czasie algorytm może obniżyć ranking, by przetestować, czy nowa wersja strony jest tak samo dobra, jak stara.
Dobra wiadomość jest taka: zagrożenia zminimalizujesz, jeśli będziesz pamiętać o kilku zasadach. Przygotowaliśmy listę 6 elementów, które warto zweryfikować przed „wielkim otwarciem”.
Przekierowania 301
Jeśli przy okazji zmiany wyglądu, chcesz zmieniać też linki do podstron (adresy URL) np. produktów, kategorii, musisz pokierować klientów i roboty Google pod nowy adres. To tak, jak zostawienie informacji o nowej siedzibie na drzwiach starego biura. Dzięki temu nie tracisz ruchu.
Zmiana szablonu w obrębie danego sklepu Shoper, w zdecydowanej większości przypadków nie powoduje zmian w adresach URL. Wyjątkiem są warianty produktów oraz filtry na listach kategorii.
– Warianty produktu w szablonie Storefront zyskują własne, unikalne adresy URL
– W Storefront adresy URL aktywnych filtrów (np. kolor czy rozmiar) na listach produktów nie są indeksowane w wynikach wyszukiwania tak jak w szablonie RWD. Adresy te zazwyczaj są bezwartościowe przez co Google może obniżać jakość Twojej witryny.
Przykładowy adres URL listry produktów z aktywnymi filtrami: https://mojsklep.pl/pl/c/Akcesoria/374/1/default/1/f_ov_89_181/1
Meta tagi i nagłówki (Tytuły i opisy)
Meta dane Twojego sklepu internetowego po włączeniu szablonu w technologii Storefront pozostają niezmienne. Mają one wpływ na pozycjonowanie Twojego sklepu, dlatego jeśli do tej pory korzystały z domyślnych ustawień, zastanów się, czy przy okazji zmiany szablonu nie warto o nie zadbać.
Hierarchia treści na stronach sklepu również się nie zmienia. Nagłówek H1 domyślnie ustawiony jest w: nazwie produktów, nazwie kategorii, kolekcji, strony informacyjnej itd. W opisach produktów czy kategorii kolejne nagłówki powinny być niższe w hierarchii (H2-H6).
W edytorze szablonu Storefront możesz dodawać na dowolną stronę sklepu nagłówki o dowolnym poziomie, za pomocą modułu: Nagłówek.
Linkowanie wewnętrzne
Linki, które znajdują się w twoich wpisach blogowych, stronach informacyjnych czy nawet opisach kategorii również się nie zmieniają. Przejście na nowy szablon to jednak dobry moment, aby je zoptymalizować. Sprawdź czy linki w obrębie Twojego sklepu są dodane jako względne.
Link bezwzględny: https://mojsklep.pl/p/produkt-w-moim-sklepie
Link względny: /p/produkt-w-moim-sklepie
Linkowanie dodane w ten sposób pozostanie aktywne nawet jeśli zmienisz domenę Twojego sklepu.
Dane strukturalne
To techniczny element, który pomaga Google zrozumieć, co jest produktem, jaka jest jego cena i dostępność, ale i odczytać dane adresowe sklepu, opinie o produktach i wiele więcej. Warto potwierdzić, czy są one poprawnie wdrożone w nowym szablonie.
Dlaczego dane strukturalne są tak ważne przy migracji? Dane strukturalne to dla robotów Google „instrukcja obsługi” Twojej strony – to one ułatwiają robotom zrozumienie treści strony i zrozumienie, co się w niej znajduje. Dzięki nim wyszukiwarka zyskuje informacje o najważniejszych faktach z Twojego sklepu. Na przykład o cenie produktów, o ich dostępności, opiniach czy po prostu o danych firmowych.
Co zyskujesz? Poprawne wdrożenie tych danych (np. schematów Product czy Breadcrumbs) zwiększa szansę na to, że Twoja oferta w Google będzie bogatsza o zdjęcia, ceny i opinie. To z kolei zwiększa zaufanie i zachęca do kliknięcia (zwiększa CTR).
Co sprawdzić? Nowoczesne szablony Storefront mają to zazwyczaj w standardzie, ale warto skorzystać z darmowych narzędzi Google (np. Test wyników z elementami rozszerzonymi), aby potwierdzić, że po migracji wszystko „świeci się na zielono”.
Czy mój sklep nadal będzie się dobrze pozycjonował?
Tak, Twój sklep będzie nadal widoczny. Jeśli zadbasz o powyższe elementy, zmiana technologii nie powinna wpłynąć negatywnie na pozycjonowanie.
Musisz jednak wiedzieć, że przy każdej dużej zmianie serwisu (nawet przy samej zmianie szaty graficznej) mogą wystąpić chwilowe wahania pozycji. Możesz obserwować zarówno spadki, jak i wzrosty. To całkowicie normalny proces „przeindeksowania”, czyli zapoznawania się Google z nowym układem Twojego sklepu. Jeśli jednak zadbałeś o punkty z listy powyżej (a zwłaszcza o zachowanie treści), sytuacja szybko się ustabilizuje.
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.
Obserwuj nasz blog produktowy, w którym opisujemy zmiany i nowości, pojawiające się w oprogramowaniu Shoper, a tym samym w technologii Storefront.
Jeśli wolisz oglądać materiały wideo, zapoznaj się naszymi miesięcznymi podsumowaniami.
Zapoznaj się także w z wideoporadnikiem, który pokazuje możliwości nowego edytora szablonu, a także tłumaczy logikę jego działania.
Panel Twojego sklepu może różnić się kolorystycznie od panelu zaprezentowanego w materiale wideo. Dowiedz się więcej na temat zmian w panelu administracyjnym.
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?
Wybierz darmowy szablon i uruchom sklep bez projektowania od zera. Sprawdź, jak Twój sklep może wyglądać już dziś.
Zobacz szablony