Storefront: Moduł slajder

Ostatnia aktualizacja: 11 lipca 2024

Slajder to najczęściej największy element graficzny widoczny na głównej stronie sklepu internetowego. Od razu przykuwa uwagę kupującego, dlatego wykorzystywany jest do podkreślenia istotnych treści tj. np.: nowe produkty, promocje i wyprzedaże, darmowa wysyłka itp. Z poniższego artykułu dowiesz się jak dodać i zarządzać slajderem w technologii Storefront

Jak dodać moduł slajder do strony?

Zaloguj się do Panelu administracyjnego sklepu.
Przejdź do zakładki Wygląd i treści (A) > Wygląd sklepu (B) > Obecny szablon graficzny (C) > Szczegóły szablonu (D) i uruchom edytor, klikając: EDYTUJ UKŁAD I STYL SZABLONU (E).
Panel administracyjny sklepu > Wygląd i treści > Wygląd sklepu > Obecny szablon graficzny > Edytuj układ i styl szablonu
Rys 1. Uruchom edytor Shoper Visual Editor w technologii Storefront
Panel administracyjny sklepu > Wygląd i treści > Wygląd sklepu > Obecny szablon graficzny > Edytuj układ i styl szablonu
Rys 1. Uruchom edytor Shoper Visual Editor w technologii Storefront

Jeśli szablon Storefront nie jest ustawiony jako aktywny w sklepie, to przejdź do jego edycji w zakładce: Wygląd i treści > Wygląd sklepu > Twoje szablony graficzne.

Przeważnie slajder umieszczany w górnej części strony, pod nagłówkiem, dlatego utwórz nową sekcję w miejscu, w którym slajder ma być docelowo wyświetlany. Oczywiście pamiętaj, że po dodaniu modułu możesz zmieniać jego położenie w dowolnym momencie, metodą przeciągnij i upuść.
Shoper Visual Editor >Dodawanie sekcji dla modułu slajder
Rys 2. Utwórz nową sekcję w górnej części strony głównej
Shoper Visual Editor >Dodawanie sekcji dla modułu slajder
Rys 2. Utwórz nową sekcję w górnej części strony głównej
Dodaj moduł: Slider (A) do przygotowanej wcześniej sekcji, a następnie w trybie edycji modułu, kliknij: DODAJ SLAJD (B).
Shoper Visual Editor > Dodawanie slajdów
Rys 3. Przeciągnij moduł Slider w wybrane miejsce i przejdź do dodania pierwszego slajdu
Shoper Visual Editor > Dodawanie slajdów
Rys 3. Przeciągnij moduł Slider w wybrane miejsce i przejdź do dodania pierwszego slajdu
W kolejnym oknie zobaczysz krótki formularz, w którym znajdują się następujące pola:
  • Nazwa (A) – podaj nazwę slajdu (pole obowiązkowe).
  • Link URL (B) – możesz podać link, do którego kupujący po kliknięciu w slajd zostanie przeniesiony.
  • Obraz (C) – kliknij w obszar oznaczony przerywaną linią, aby dodać przygotowane wcześniej grafiki z dysku twojego komputera (pole obowiązkowe).
  • Alternatywny opis obrazka (’alt’) (D) – opisz za pomocą kilku słów kluczowych, czego dotyczy dany slajd. Jest to szczególnie istotne pod kątem pozycjonowania grafik w wynikach wyszukiwania w przeglądarce.

Po wprowadzeniu danych kliknij: ZAPISZ (E)

Shoper Visual Editor > Formularz dodawania slajdu
Rys 4. Załaduj slajd z dysku swojego urządzenia oraz uzupełnij dodatkowe informacje
Shoper Visual Editor > Formularz dodawania slajdu
Rys 4. Załaduj slajd z dysku swojego urządzenia oraz uzupełnij dodatkowe informacje
W poglądzie na żywo zobaczysz dodany pierwszy slajd, a w oknie ustawień modułu pojawi się lista slajdów z opcją wyłączenia i włączenia aktywności slajdu za pomocą suwaka (A), oraz wprowadzona nazwa slajdu wraz z widocznymi rozmiarami dodanej grafiki (B).

Jeśli chcesz dodać kolejny slajd, kliknij: DODAJ SLAJD (C).

Po dodaniu wszystkich slajdów kliknij: ZAPISZ (D) w ustawieniach modułu, a następnie kliknij: ZAPISZ I OPUBLIKUJ ZMIANY W UKŁADZIE (E) w prawym górnym rogu edytora.

Shoper Visual Editor > Moduł slajder
Rys 5. Dodaj kolejne slajdy do listy, a następnie zapisz zmiany w module i układzie
Shoper Visual Editor > Moduł slajder
Rys 5. Dodaj kolejne slajdy do listy, a następnie zapisz zmiany w module i układzie

Jak zmienić ustawienia i styl wyświetlania slajdera?

Przejdź do ustawień modułu Slajder, a następnie w sekcji USTAWIENIA OGÓLNE, kliknij: Styl slajdera i wybierz jedną z trzech opcji:
  • 1 slajd – slajd wyświetlany jest centralnie z widocznymi elementami kolejnych slajdów po bokach.
  • 1 slajd (minimalistyczny) – slajd zajmuję całą przestrzeń dostępną w module
  • Kilka slajdów – miniatury slajdów są wyświetlane obok siebie z możliowścią ich przesuwania
Shoper Visual Editor > Moduł Slajder > Styl slajdu
Rys 6. Wybierz, w jaki sposób moduł slajder ma być wyświetlany na stronie
Shoper Visual Editor > Moduł Slajder > Styl slajdu
Rys 6. Wybierz, w jaki sposób moduł slajder ma być wyświetlany na stronie
W ustawieniach modułu znajdziesz pozostałe ustawienia takie jak:
  • Tytuł modułu (A) – możesz nadać tytuł modułowi, który będzie widoczny nad slajderem na stronie.
  • Pokaż nawigację (zalecane) (B) – decydujesz o wyświetlaniu strzałek, pozwalających kupującemu na samodzielne przeglądanie slajdów.
  • Automatyczne przewijanie (niezalecane) (C) – możesz włączyć lub wyłączyć automatyczną zmianę slajdów
  • Klasa CSS (D) – możesz modułowi nadać klasę CSS, aby wprowadzać do niego bardziej zaawansowane zmiany w stylach CSS.
Shoper Visual Editor > Moduł slajder > Ustawienia slajdera
Rys 7. W ustawieniach modułu możesz decydować o pozostałych parametrach slajdera
Shoper Visual Editor > Moduł slajder > Ustawienia slajdera
Rys 7. W ustawieniach modułu możesz decydować o pozostałych parametrach slajdera

Jak dodać slajder do strony w wersji mobile?

Nowo dodany moduł slajdera domyślnie wyświetlany jest na wszystkich szerokościach ekranu w tym w wersji mobilnej. Dzięki technologii Shoper Storefront możesz samodzielnie decydować, na jakich urządzeniach slajder ma być wyświetlany. Jak to zrobić?

W Shoper Visual Editor w technologii Storefront, przejdź do edycji modułu slajder lub dodaj nowy według instrukcji dostępnej w tym artykule.

Będąc w edycji modułu, w sekcji WIDOCZNOŚĆ NA URZĄDZENIACH zostaw zaznaczony checkbox przy tych nazwach urządzeń, na których dany moduł ma być wyświetlany, a następnie kliknij: ZAPISZ I OPUBLIKUJ.
Shoper Visual Editor > Edycja modułu Slajder > Widoczność na urządzeniach
Rys 8. Wybierz, na jakich urządzeniach ma być wyświetlany slajder
Shoper Visual Editor > Edycja modułu Slajder > Widoczność na urządzeniach
Rys 8. Wybierz, na jakich urządzeniach ma być wyświetlany slajder

Jeśli chcesz, aby na danych szerokościach ekranu wyświetlane były różne wersje slajderów, to do układu strony dodaj wiele wersji modułu slajder, a w ich ustawieniach wybierz typy urządzeń, na których mają być wyświetlane, a na których mają być niewidoczne.

Pamiętaj, że ustawienie decydujące o wyświetlaniu zawartości na poszczególnych urządzeniach jest dostępne także dla kolumn, wierszy oraz sekcji. Więcej na ten temat dowiesz się z artykułu: Jak zarządzać sekcjami, wierszami i kolumnami?

Warto zapamiętać!
W powyższym artykule zostało wyjaśnione:
  • w jaki sposób dodać moduł slajder do układu strony
  • jak dodać slajdy do modułu slajder
  • jak zmienić sposób prezentowania slajdera na stronie
  • jak zmienić wygląd slajdera w wersji mobilnej
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