Instrukcja›Szablon Tulio

[tulio] Slider z kolekcjami

Moduł wyświetla przewijany rząd kolekcji z grafikami, nazwami i opcjonalną liczbą produktów.

Slider z kolekcjami — instrukcja obsługi

Slider z kolekcjami pokazuje wybrane kolekcje sklepu w poziomym rzędzie z grafikami, nazwami oraz opcjonalną liczbą produktów. W module samodzielnie wybierasz kolekcje, określasz liczbę widocznych kart i dopasowujesz ich wygląd do sklepu.

✦
Korzyści
Najważniejsze możliwości, które zyskujesz po wdrożeniu modułu.
▣
Kolekcje w jednym miejscu

Zaprezentuj kilka wybranych kolekcji obok siebie. Kupujący przechodzi bezpośrednio do kolekcji z jej kafelka, bez szukania jej w menu sklepu.

▤
Zdjęcie dla każdej kolekcji

Wybierasz kolekcję i możesz przypisać jej własną fotografię. Dzięki temu każda pozycja ma indywidualną oprawę graficzną oraz link do właściwej strony.

↔
Wygodne przewijanie kafelków

Przyciski nawigacji przewijają listę o jedną kartę. Obsługiwane jest też naturalne przewijanie poziome i przyciąganie kafelków do krawędzi.

◫
Dopasowanie do szerokości ekranu

Możesz wybrać liczbę widocznych kolekcji w układzie responsywnym. Dzięki temu zdjęcia i podpisy pozostają czytelne na różnych urządzeniach.

◉
Spójna kolorystyka

Osobno ustawiasz kolor nagłówka, nazwy kolekcji i licznika produktów. Dostępne są też odstępy między kartami oraz zaokrąglenie zdjęć.

▦
Liczba produktów przy kolekcji

Opcjonalnie pokazujesz liczbę produktów przypisanych do kolekcji. Możesz ukryć licznik, pozostawiając samą nazwę i zdjęcie.

Najważniejsze możliwości modułu
  • Lista wybranych kolekcji z odnośnikami do ich stron.
  • Opcjonalne własne zdjęcia przypisane do kolekcji.
  • Pokazywanie lub ukrywanie liczby produktów.
  • Ręczne przewijanie kafelków przyciskami oraz gestem.
  • Ustawienia odstępów, zaokrągleń i kolorystyki.
  • Osobne ustawienia typografii i liczby kart dla urządzeń.
W praktyce: wskaż kolekcje, dodaj zdjęcia i dostosuj liczbę kafelków. Moduł automatycznie ustawi przewijanie, a po kliknięciu kafelka otworzy przypisaną kolekcję.
Najprostsza konfiguracja

Dodaj kolekcje w edytorze, opcjonalnie przypisz im grafiki, a następnie dopasuj liczbę widocznych kart i kolory. Przed publikacją sprawdź przewijanie również na telefonie.

01
Treść i kolekcje
Wybierz kolekcje i określ, jakie informacje widzą kupujący.
Nazwę sekcji zmienisz w polu nagłówka. Opcja licznika pokazuje liczbę produktów przy nazwie każdej kolekcji. W repeaterze wybierz kolekcję i opcjonalnie dodaj jej własne zdjęcie. Podgląd prezentuje neutralne przykładowe kolekcje; nie pobiera danych Twojego sklepu.
02
Wygląd i nawigacja
Ustaw odstępy, zaokrąglenie zdjęć oraz kolory.
Strzałki przesuwają widok o jeden kafelek kolekcji. Lista wykorzystuje poziomy scroll z przyciąganiem kart (scroll-snap), a nie bibliotekę Splide. Zmiana odstępu i zaokrąglenia jest widoczna na kartach po prawej stronie.
03
Ustawienia urządzeń
Dopasuj liczbę kart oraz rozmiary tekstu dla różnych ekranów.
Konfiguracja responsywna może przypisywać oddzielne wartości dla telefonu, tabletu, laptopa i komputera. W podglądzie przełącznik Komputer/Telefon pozwala ocenić proporcje demonstracji. W rzeczywistym module pamiętaj też o opcjach rozmiarów czcionek i liczbie kolumn per urządzenie.
04
Dodawanie kolekcji w repeaterze
Powiąż każdą kartę z kolekcją i opcjonalnym zdjęciem.
W sekcji „Kolekcje” dodaj pozycje repeatera. W każdej pozycji wybierz istniejącą kolekcję sklepu za pomocą selektora i opcjonalnie prześlij własną fotografię. Nazwa, odnośnik i liczba produktów są pobierane z wybranej kolekcji. Pamiętaj, aby mieć więcej kart niż widocznych kolumn, jeśli chcesz pokazać działanie strzałek.
Szybka checklista
Sprawdź moduł przed publikacją w sklepie.
  • Dodaj przynajmniej jedną kolekcję i sprawdź, czy prowadzi do właściwej strony.
  • Sprawdź, czy wszystkie kolekcje mają odpowiednie zdjęcia.
  • Włącz i wyłącz liczbę produktów, aby sprawdzić czytelność kafelków.
  • Jeśli pokazujesz strzałki, sprawdź je przy większej liczbie kolekcji niż mieści się na ekranie.
  • Sprawdź liczbę widocznych kart i wielkość podpisów na telefonie oraz komputerze.
  • Po zmianach zapisz moduł i obejrzyj efekt na stronie sklepu.