Shoper Visual Editor – edytor wyglądu sklepu

Data publikacji: 12 maja 2022 Ostatnia aktualizacja: 24 kwietnia 2024

Podstawowe informacje o edytorze wyglądu sklepu – Shoper Visual Editor

Shoper Visual Editor umożliwia zarządzanie wyglądem twojego sklepu w jeszcze łatwiejszy i bardziej intuicyjny sposób w porównaniu do dotychczasowego rozwiązania.

Edytor jest narzędziem, dzięki któremu edycja wyglądu oraz bieżący podgląd zmian widoczne są „na żywo” na tej samej stronie, bez konieczności przeglądania zmian w osobnej karcie przeglądarki.

Wygodne przenoszenie modułów metodą drag&drop (złap-przeciągnij-upuść) sprawia, że zarządzanie wizualną stroną sklepu jest jeszcze przyjemniejsze. Przeczytaj, gdzie znaleźć nową funkcjonalność i jak skonfigurować wygląd sklepu za pomocą Shoper Visual Editora.

Ze względu na złożoność Shoper Visual Editora, można korzystać z niego tylko na urządzeniach z myszką lub touchpadem (np. na laptopie).

Jak przejść do edytora wyglądu bieżącego szablonu graficznego sklepu?

Zaloguj się do Panelu administracyjnego sklepu.
W Panelu administracyjnym sklepu przejdź do zakładki: Wygląd i treści (A) > Wygląd sklepu (B) > Obecny szablon graficzny (C) > Moduły (D) i kliknij OTWÓRZ SHOPER VISUAL EDITOR (E).
Panel administracyjny > Wygląd i treści > Wygląd sklepu > Obecny szablon graficzny > Moduły > VIsual editor
Rys 1. Uruchom Shoper Visual Editor
Panel administracyjny > Wygląd i treści > Wygląd sklepu > Obecny szablon graficzny > Moduły > VIsual editor
Rys 1. Uruchom Shoper Visual Editor
Przycisk przeniesie cię w nowej karcie przeglądarki do poniższego układu Strony głównej (jeżeli układ strony głównej nie jest aktywny, zobaczysz Podstawowy układ stron – w dalszej części artykułu dowiesz się więcej o tym typie strony).
Shoper Visial Editor strona główna
Rys 2. Domyślny widok Shoper Visual Editor
Shoper Visial Editor strona główna
Rys 2. Domyślny widok Shoper Visual Editor
Jeżeli chcesz:
  • edytować układ modułów w poszczególnych układach sklepu: strona główna, strona produktu, strony z listą produktów (kategorie, nowości, promocje, wyniki wyszukiwania), kolekcje produktów, blog, koszyk, podstawowy układ stron (wyświetla się na każdej stronie, która nie ma przypisanego własnego układu), w lewym górnym rogu kliknij ikonę: EDYTOR STRON (A).
  • zmienić font, rozmiar (fontów, nagłówków) i kolory (tła, fontów, główny, linków), w lewym górnym rogu kliknij ikonę menu i wybierz: KOLORY I STYLE (B).

Po lewej stronie zobaczysz dostępne opcje wyboru – klikaj i dostosowuj. Pamiętaj o zapisaniu zmian.

Shoper Visual Editor dostępne zakładki
Rys 3. Wybierz odpowiednią grupę ustawień, w których będziesz wprowadzać zmiany
Shoper Visual Editor dostępne zakładki
Rys 3. Wybierz odpowiednią grupę ustawień, w których będziesz wprowadzać zmiany

Te ustawienia są globalne i wspólne dla wszystkich układów wyglądu.

W dalszej części instrukcji przeczytasz, jak odnaleźć się w dostępnych tutaj opcjach.

Dostępne opcje edytora stron

Edytor stron posiada szereg opcji pozwalających dostosować szablon graficzny sklepu do pożądanego efektu finalnego.

Podczas konfiguracji wyglądu strony korzystaj z podpowiedzi znajdujących się po najechaniu na ikonę znaku zapytania, wykrzyknika oraz innych ikon, pod którymi kryją się podpowiedzi.

Podgląd wyglądu układu na różnych urządzeniach

Shoper Visual Editor umożliwia podgląd edytowanego układu na różnych urządzeniach tj. smartfon, tablet, laptop, monitor (A), w ich najczęściej występujących rozdzielczościach.

Shoper Visual Editor zmiana szerokości ekranu wraz z poglądem szablonu
Rys 4. Sprawdzaj jak szablon wygląda na różnych szerokościach ekranu
Shoper Visual Editor zmiana szerokości ekranu wraz z poglądem szablonu
Rys 4. Sprawdzaj jak szablon wygląda na różnych szerokościach ekranu

Więcej urządzeń widocznych jest po kliknięciu przycisk PODGLĄD (B) w prawym górnym rogu ekranu.

Shoper Visual Editor podgląd szablonu
Rys 5. Możesz zobaczyć jak prezentuje się szablon bez widocznych elementów edytora
Shoper Visual Editor podgląd szablonu
Rys 5. Możesz zobaczyć jak prezentuje się szablon bez widocznych elementów edytora

Aktywacja i zarządzanie modułami na różnych typach stron

Po rozwinięciu listy Strona – TYPY STRON możesz wybrać układ, którego wygląd chcesz edytować. Dostępne układy to:

  • Strona główna,
  • Strona produktu,
  • Strony z listą produktów (kategorie, nowości, promocje, wyniki wyszukiwania),
  • Kolekcje produktów,
  • Blog,
  • Koszyk,
  • Podstawowy układ stron (wyświetla się na każdej stronie, która nie ma przypisanego własnego układu).
Shoper Visual Editor - typy stron
Rys 6. Wybierz jeden z wielu typów stron, które chcesz edytować
Shoper Visual Editor - typy stron
Rys 6. Wybierz jeden z wielu typów stron, które chcesz edytować

Jeżeli nie chcesz, aby strona bazowała na podstawowym układzie stron, tylko miała własny układ modułów, w miejscu przedstawionym powyżej kliknij w nią, następnie jak niżej aktywuj, dodaj moduły i w prawym górnym rogu kliknij: ZAPISZ I OPUBLIKUJ ZMIANY W UKŁADZIE.

Shoper Visual Editor aktywacja układu strony
Rys 7. Aktywuj układ danej strony, aby wprowadzić dla niej indywidualny układ modułów
Shoper Visual Editor aktywacja układu strony
Rys 7. Aktywuj układ danej strony, aby wprowadzić dla niej indywidualny układ modułów
Shoper Visual Editor
Rys 8. Po wprowadzaniu zmian na stronie nie zapomnij zapisać zmian w szablonie
Shoper Visual Editor
Rys 8. Po wprowadzaniu zmian na stronie nie zapomnij zapisać zmian w szablonie

Wiersze i kolumny układu stron

Każdy typ stron ma podział na następujące:

  • wiersze (z listą użytych modułów):
    • górny – to obszar znajdujący się bezpośrednio pod nagłówkiem strony,

      Shoper VIsual Editor - edytowane obszary
    • dolny (z listą użytych modułów) – to obszar znajdujący się bezpośrednio nad stopką strony.

      Shoper Visual Editor dolny wiersz edytora
  • kolumny (z listą użytych modułów):
    • lewa (z listą użytych modułów) (A):
    • główna (z listą użytych modułów) (B):
    • prawa (z listą użytych modułów) (C):
      Shoper Visual Editor dostępne kolumny w edytorze

Dodawanie i usuwanie kolumn

Jeżeli dla danego układu chcesz dodać prawą lub lewą kolumnę, najedź myszką na sąsiadującą kolumnę i kliknij: Dodaj kolumnę.

Shoper Visual Editor kolummy edytora
Rys 9. Dodaj kolumnę po lewej lub prawej stronie
Shoper Visual Editor kolummy edytora
Rys 9. Dodaj kolumnę po lewej lub prawej stronie

Jeżeli dla danego układu chcesz usunąć kolumnę, najedź myszką na kolumnę, którą chcesz usunąć i kliknij ikonę kosza.

Shoper Visual Editor kolumny edytora
Rys 10. Możesz usunąć kolumny z edytora
Shoper Visual Editor kolumny edytora
Rys 10. Możesz usunąć kolumny z edytora

System wyświetli komunikat, którym po kliknięciu USUŃ Z UKŁADU potwierdzasz zleconą akcję.

Komunikat USUŃ Z UKŁADU wyświetli się tylko, jeśli w danej kolumnie znajdują się moduły. W przeciwnym razie usunięcie kolumny nie wymaga potwierdzania akcji.

Shoper Visual Editor potwierdzenie usuwania kolumny
Rys 11. Zabezpieczenie przed usunięciem kolumny z dodanymi do niej modułami
Shoper Visual Editor potwierdzenie usuwania kolumny
Rys 11. Zabezpieczenie przed usunięciem kolumny z dodanymi do niej modułami

Pamiętaj, aby zapisywać zmiany w prawym górnym rogu ekranu opcją: ZAPISZ I OPUBLIKUJ ZMIANY W UKŁADZIE.

Zarządzanie modułami

Jeżeli do danego układu chcesz dodać moduł, w kolumnie po lewej stronie kliknij: DODAJ MODUŁ DO STRONY.

Shoper Visual Editor DODAJ MODUŁ DO STRONY
Rys 12. Kliknij DODAJ MODUŁ DO STRONY, aby dodać nowy element do układu
Shoper Visual Editor DODAJ MODUŁ DO STRONY
Rys 12. Kliknij DODAJ MODUŁ DO STRONY, aby dodać nowy element do układu

Zobaczysz listę możliwych do dodania, gotowych modułów.

Chwytając kursorem za symbol kropeczek (A), przeciągniesz i umieścisz moduł w wybranym przez siebie miejscu w układzie strony, kliknięcie ikony trybika (B) pozwala wejść do edycji modułu.

Shoper Visual Editor opcje modułu
Rys 13. Z tego poziomu możesz przenosić moduły do układu oraz przejść do ich edycji
Shoper Visual Editor opcje modułu
Rys 13. Z tego poziomu możesz przenosić moduły do układu oraz przejść do ich edycji


Na liście gotowych modułów znajduje się również opcja dodania własnego modułu lub slidera.

Shoper Visual Editor własny moduł oraz moduł slider
Rys 14. Możesz tworzyć własne slajdery oraz moduły o dowolnej zawartości
Shoper Visual Editor własny moduł oraz moduł slider
Rys 14. Możesz tworzyć własne slajdery oraz moduły o dowolnej zawartości

Jeżeli chcesz przenieść, edytować lub usunąć moduł, skorzystaj z ikon wskazanych poniżej – pojawią się kiedy najedziesz na dany moduł myszką.

Shoper VIsual Editor przesuwanie oraz edycja modułu
Rys 15. Możesz zmieniać miejsce danego modułu oraz przejść do jego edycji
Shoper VIsual Editor przesuwanie oraz edycja modułu
Rys 15. Możesz zmieniać miejsce danego modułu oraz przejść do jego edycji

Wideo: jak zarządzać wyglądem sklepu internetowego przy użyciu Shoper Visual Editor?

Obejrzyj jak korzystać z edytora wyglądu sklepu Shoper Visual Editor na YouTube:

Wideo poradnik: wstęp do nowego edytora wyglądu sklepu Shoper Visual Editor
Warto zapamiętać!
W powyższym artykule zostało wyjaśnione:
  • Czym jest Shoper Visual Editor?
  • Jak otworzyć nowy edytor wyglądu sklepu – Shoper Visual Editor?
  • Jakimi elementami można zarządzać w Shoper Visual Editor?
  • Wideo: możliwości nowego edytora wyglądu sklepu na platformie Shoper
Czy ten artykuł był pomocny?
Tak
Nie
Dziękujemy za odpowiedź!
Udostępnij artykuł:

Przetestuj sklep internetowy
przez 14 dni za darmo

Korzystaj ze wszystkich funkcji oprogramowania za darmo i bez zobowiązań.

Testuj wszystkie funkcje przez 14 dni bez zobowiązań. Zakładając sklep poprzez podanie
adresu e-mail akceptujesz nasz Regulamin i Politykę Prywatności