Storefront: Shoper Visual Editor
Nowa wersja Shoper Visual Editor odpowiada bezpośrednio za wszelkie ustawienia w szablonach typu Storefront.
Nowy edytor daje ci jeszcze więcej możliwości edycji szablonu sklepu, w obszarach, które do tej pory były niedostępne. Przeczytaj poniższy artykuł, aby zapoznać się ze wszystkimi funkcjami nowego edytora.
Dlaczego szablony Storefront są lepsze od dotychczasowych szablonów sklepów Shoper: Najważniejsze funkcje szablonów Storefront.
Jak uruchomić nową wersję Shoper Visual Editor?
W Panelu administracyjnym sklepu Shoper przejdź do sekcji menu: Wygląd i treści (A) > Wygląd sklepu (B) > Twoje szablony graficzne (C), a następnie w sekcji: Szablony Storefront (D) przejdź do edycji danego szablonu, klikając ikonę palety (E).
Jeśli szablon został wcześniej ustawiony jako aktywny, to przejdź do sekcji: Wygląd i treści > Wygląd sklepu > Obecny szablon graficzny.
Sugerujemy wszelkie zmiany w szablonie wprowadzać na nieaktywnej jego kopii. W przypadku nieudanych modyfikacji eliminujesz ryzyko, że zobaczą je twoi klienci.
Po wprowadzeniu wszelkich zmian, oznacz edytowaną kopię szablonu jako aktywną.
Jakie elementy znajdują się w nowej wersji Shoper Visual Editor?
Po uruchomieniu Shoper Visual Editor zobaczysz jego panel z domyślnie wyświetlonym widokiem edytora układu strony. Zapoznaj się poniższą strukturą edytora, aby poznać jego wszystkie możliwości.
- A. Główne menu edytora
- B. Wybór edytowanej strony
- C. Struktura strony oraz edycja modułów
- D. Wizualny edytor strony z podglądem na żywo
- E. Podgląd edytowanej strony (widok klienta)
- F. Zmiana szerokości ekranu w podglądzie na żywo
- G. Nazwa i status edytowanego szablonu
- H. Zmiana edytowanej wersji językowej sklepu
- I. Powrót do panelu administracyjnego sklepu
Główne menu edytora Shoper Visual Editor
W głównym menu edytora znajdziesz ustawienia takie jak:
- Edytor układu strony (dowiedz się więcej)
- Edycja nagłówków strony (dowiedz się więcej)
- Edycja stopki strony (dowiedz się więcej)
- Pop-upy i dodatki (dowiedz się więcej)
- Kolory i style (dowiedz się więcej)
- Ustawienia szablonu (dowiedz się więcej)
Wybór edytowanej strony
W tym miejscu możesz przełączać się pomiędzy poszczególnymi typami stron widocznych w twoim sklepie, aby wprowadzać na nich odpowiednie zmiany. Jak korzystać z edytora układu strony w Shoper Storefront?
Struktura strony oraz edycja modułów
W tej sekcji sprawdzisz, które moduły zostały użyte w danym typie strony – a to wszystko dzięki uproszczonej strukturze modułów (A). Znajdziesz tutaj możliwość edycji użytych modułów (B) oraz tworzenia nowych (C).
Wizualny edytor strony z podglądem na żywo
Jest to najważniejszy element Shoper Visual Editor. Dzięki niemu skontrolujesz aktualny wygląd edytowanej strony.
Za pomocą metody drag & drop (przeciągnij i upuść) możesz zmieniać układ modułów, edytować je, a także tworzyć zupełnie nowe siatki elementów z wykorzystaniem sekcji, wierszy i kolumn.
Podgląd edytowanej strony (widok klienta)
Korzystając z przycisku Podgląd zlokalizowanym w prawym górnym rogu edytora, możesz zobaczyć, jak wprowadzone przez ciebie zmiany będą prezentowały się klientom twojego sklepu, wyświetlając je w “naturalnym środowisku”, czyli bez elementów edytora.
Zmiana szerokości ekranu w podglądzie na żywo
Dzięki tej funkcji masz możliwość szybkiej zmiany szerokości ekranu w wizualnym edytorze, aby tworzyć unikatowe układy modułów dla urządzeń typu: monitor, laptop, tablet, telefon.
Nazwa i status edytowanego szablonu
W tym miejscu będzie wyświetlana nazwa edytowanego szablonu oraz informacja, czy jest on aktywny czy nieaktywny.
Aktywny szablon to taki, który wyświetlany jest klientom twojego sklepu, zatem wszelkie zmiany będą dla nich od razu widoczne.
Nieaktywny szablon to ten, który jako administrator sklepu możesz edytować bez pokazywania go klientom.
Zmiana edytowanej wersji językowej sklepu
W tym miejscu możesz przełączać między aktywnymi w sklepie wersjami językowymi i ustawiać dla nich różne, niezależne od siebie treści.
Powrót do panelu administracyjnego sklepu
Dzięki tej funkcji możesz szybko wrócić do panelu administracyjnego sklepu Shoper. Jest to szczególnie przydatne kiedy pracujesz na przeglądarce w trybie pełnoekranowym.
Warto zapamiętać!
- jak uruchomić nową wersję edytora Shoper Visual Editor,
- z jakich narzędzi i funkcji zbudowany jest interfejs nowego edytora.