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

Data publikacji: 19 marca 2024 Ostatnia aktualizacja: 7 stycznia 2025

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 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.

W zakładce: DODAJ MODUŁ odszukaj typ modułu, który chcesz dodać do układu edytowanej strony. Możesz skorzystać z wyszukiwarki.
Znajdź moduł do dodania na stronę
Rys 3. Przełącz zakładkę, by dodać nowy moduł do strony.
Znajdź moduł do dodania na stronę
Rys 3. Przełącz zakładkę, by dodać nowy moduł do strony.
Klikając strzałkę w dół 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 lewej 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: ZAPISZ I OPUBLIKUJ ZMIANY W UKŁADZIE.

WAŻNE! 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 ZMIANY W UKŁADZIE.

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, najedź kursorem na ikonę koła zębatego i kliknij: Edytuj moduł lub po prostu kliknij lewym przyciskiem myszy na wybranym module.

Drugi sposób: odszukaj moduł w wizualnym edytorze strony z podglądem na żywo, najedź kursorem na fioletową zakładkę symbolizującą moduł, kliknij ikonę koła zębatego (A), a następnie kliknij ikonę ołówka (B) lub po prostu kliknij dowolne miejsce w obszarze wyznaczonym przez ramkę modułu.

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.

Instrukcja jak stworzyć nowy moduł i dodać go do układu: Jak dodać moduł do układu strony?

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

Pierwszy sposób: odszukaj moduł w uproszczonej strukturze modułów, najedź kursorem na ikonę koła zębatego i kliknij: Usuń z układu.

Drugi sposób: odszukaj moduł w wizualnym edytorze strony z podglądem na żywo, najedź kursorem na fioletową zakładkę symbolizującą moduł, kliknij ikonę koła zębatego (A), a następnie kliknij ikonę kosza (B). W obu przypadkach moduł zostanie usunięty z układu, ale możliwość jego edycji czy też ponownego wykorzystania w układzie będzie możliwa.

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 kliknij ikonę koła zębatego przy module (B) 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.

Kliknij przycisk: ZAPISZ I OPUBLIKUJ ZMIANY W UKŁADZIE, 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ń.

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