Data publikacji: 19 marca 2024 Aktualizacja: 29 sierpnia 2025

Storefront: Jak dodać moduł do układu strony?

Jak dodać moduł do układu strony?

Zaloguj się do Panelu administracyjnego sklepu.
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 wybranego szablonu – klikając ikonę palety (E) (Edytuj układ i styl szablonu sklepu).
Instrukcja dodawania modułu w Shoper Storefront
Rys 1. Edytuj układ i styl szablonu graficznego na platformie Shoper.
Instrukcja dodawania modułu w Shoper Storefront
Rys 1. Edytuj układ i styl szablonu graficznego na platformie Shoper.

Włącz nowy wygląd edytora szablonu Shoper Visual Editor

Włączanie nowej wersji edytora szablonu Shoper Visual Editor

W edytorze układu strony z rozwijanej listy: Edytowalna strona, wybierz tę stronę, do której chcesz dodać nowy moduł.

Jeśli edytujesz nagłówek lub stopkę szablonu, to nie musisz wybierać edytowanej strony.

Wybierz stronę, do której chcesz dodać moduł
Rys 2. Wybierz rodzaj edytowanej strony w swoim sklepie internetowym.
Wybierz stronę, do której chcesz dodać moduł
Rys 2. Wybierz rodzaj edytowanej strony w swoim sklepie internetowym.

Instrukcja jak wybrać stronę do edycji: Edytor układu strony.

Kliknij: DODAJ MODUŁ, a następnie na liście modułów odszukaj typ modułu, który chcesz dodać do układu edytowanej strony. Możesz skorzystać z wyszukiwarki.
Lista modułów dostępnych do umieszczenia na edytowanej stronie
Rys 3. Wybierz moduł do umieszczenia na stronie przy użyciu Shoper Storefront.
Lista modułów dostępnych do umieszczenia na edytowanej stronie
Rys 3. Wybierz moduł do umieszczenia na stronie przy użyciu Shoper Storefront.
Klikając strzałkę z lewej strony przy danym typie modułu, zobaczysz opcję stworzenia nowej wersji modułu podpisaną: Dodaj nowy, oraz wszystkie stworzone wcześniej wersje modułów danego typu.

Aby dodać nowy moduł ,chwyć kursorem kafelek podpisany: Dodaj nowy i przeciągnij go do przygotowanej wcześniej kolumny w układzie edytowanej strony. Jak tworzyć i zarządzać sekcjami, wierszami i kolumnami dowiesz się w artykule: Jak zarządzać sekcjami, wierszami i kolumnami?

Przeciągnij i upuść wybrany moduł, aby go dodać na stronę, którą edytujesz
Rys 4. Umieść wybrany moduł w odpowiednim miejscu w układzie strony.
Przeciągnij i upuść wybrany moduł, aby go dodać na stronę, którą edytujesz
Rys 4. Umieść wybrany moduł w odpowiednim miejscu w układzie strony.
Po upuszczeniu nowego modułu w wybranym miejscu, w prawej kolumnie edytora zobaczysz możliwe opcje konfiguracji modułu. Wprowadź zmiany i kliknij przycisk: ZAPISZ.
Formularz edycji dodanego modułu w Shoper Storefront
Rys 5. Skonfiguruj moduł za pomocą narzędzi w edytorze Shoper Storefront.
Formularz edycji dodanego modułu w Shoper Storefront
Rys 5. Skonfiguruj moduł za pomocą narzędzi w edytorze Shoper Storefront.

Możesz już teraz zdecydować na jakich szerokościach ekranu dodawany moduł ma być wyświetlany. W dowolnym momencie możesz zmienić te ustawienia.

Aby ostatecznie wprowadzić zmiany w aktywnym szablonie (czyli w tym, którzy widzą klienci w Twoim sklepie), kliknij: Opublikuj.

Jeśli wprowadzasz zmiany w nieaktywnym szablonie sklepu (czyli w tym widocznym jedynie dla administratora sklepu), to ostateczne wprowadzenie zmian do szablonu zatwierdzasz, klikając przycisk: Zapisz.

Publikacja zmian po ich wprowadzeniu w Shoper Storefront
Rys 6. Zatwierdź wszystkie modyfikacje w układzie strony sklepu w Shoper Storefront.
Publikacja zmian po ich wprowadzeniu w Shoper Storefront
Rys 6. Zatwierdź wszystkie modyfikacje w układzie strony sklepu w Shoper Storefront.

Jak edytować moduł w układzie strony?

Pierwszy sposób: odszukaj moduł w uproszczonej strukturze modułów, kliknij opcje modułu i wybierz: Edytuj moduł (A) lub po prostu kliknij lewym przyciskiem myszy na wybranym module, a formularz edycji modułu otworzy się w prawej kolumnie edytora.

Drugi sposób: najedź kursorem na wybrany moduł w podglądzie edytowanej strony, a następnie kliknij ikonę ołówka (B) lub po prostu kliknij dowolne miejsce w obszarze wyznaczonym przez ramkę modułu, a formularz edycji modułu otworzy się w prawej kolumnie edytora.

Jak wybrać moduł do edycji w Shoper Storefront?
Rys 7. Otwórz edycję wybranego modułu.
Jak wybrać moduł do edycji w Shoper Storefront?
Rys 7. Otwórz edycję wybranego modułu.

Wprowadzenie zmian w module i kliknięcie poza obszarem okna jego edycji, spowoduje wywołanie okna informującego o niezapisanych zmianach.

Informacja o niezapisanych zmianach w Shoper Storefront
Rys 8. Opublikuj wszystkie zmiany w wybranym module.
Informacja o niezapisanych zmianach w Shoper Storefront
Rys 8. Opublikuj wszystkie zmiany w wybranym module.

Jak usunąć moduł z układu strony?

Pierwszy sposób: odszukaj moduł w uproszczonej strukturze modułów, kliknij opcje modułu i wybierz: Usuń moduł (A)

Drugi sposób: najedź kursorem na wybrany moduł w podglądzie edytowanej strony, a następnie kliknij ikonę kosza (B).

Jak usunąć moduł z układu strony w Shoper Storefront?
Rys 9. Usuń moduł z układu wybranej strony.
Jak usunąć moduł z układu strony w Shoper Storefront?
Rys 9. Usuń moduł z układu wybranej strony.

Jeśli chcesz usunąć moduł całkowicie bez możliwości powrotu do jego ponownego wykorzystania lub edycji, to odnajdź grupę modułów (A), do której on należy, następnie w menu opcji modułu i wybierz: Usuń całkowicie.

Instrukcja całkowitego usuwania modułu w Shoper Storefront
Rys 10. Całkowite usuwanie modułu z listy dodanych modułów.
Instrukcja całkowitego usuwania modułu w Shoper Storefront
Rys 10. Całkowite usuwanie modułu z listy dodanych modułów.

Jak zmienić położenie modułu w układzie?

Najedź kursorem na wybrany moduł.

Przytrzymaj lewy przycisk myszy.
Nie puszczając lewego przycisku myszy przeciągnij moduł w wybrane miejsce na edytowanej stronie.

Puść lewy przycisk myszy, aby umieścić moduł w wybranym miejscu.

Na koniec kliknij przycisk: Opublikuj, aby zapisać zmianę położenia modułu.

Zmiana miejsca wyświetlania modułu na stronie w Shoper Storefront
Rys 11. Zmień położenie modułu w edytowanym szablonie sklepu.
Zmiana miejsca wyświetlania modułu na stronie w Shoper Storefront
Rys 11. Zmień położenie modułu w edytowanym szablonie sklepu.
Warto zapamiętać!
W powyższym artykule zostało wyjaśnione:
  • jak dodać moduł do układu edytowanej strony w Shoper Storefront,
  • edycja modułów w układach stron,
  • usuwanie modułów ze stron przy użyciu Shoper Storefront,
  • zmiana miejsca położenia modułu (drag & drop).
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ń.

Dane kontaktowe

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