Galeria produktu - siatka z wideo

Wyświetla zdjęcia produktu w siatce z własnym lightboxem, obramowaniem kafelków i możliwością dodania filmu przypisanego do produktu.

Dlaczego Twoim klientom to się spodoba?

Klienci podejmują decyzję zakupową w dużej mierze na podstawie zdjęć. Gdy produkt ma wiele zdjęć, klasyczny pionowy slider wydłuża stronę i utrudnia przegląd. Siatka galerii pozwala zobaczyć wszystkie ujęcia produktu na raz - bez nieskończonego przewijania i klikania strzałek.

Moduł zamienia standardową galerię produktu w nowoczesny układ siatki z konfigurowalną liczbą kolumn dla każdego urządzenia, własnym lightboxem oraz możliwością dołączenia filmu prezentującego produkt.

Jakie posiada możliwości?

Moduł daje pełną kontrolę nad wyglądem i zawartością galerii produktu:

• - Responsywna siatka z osobną liczbą kolumn dla telefonu, tabletu, laptopa i komputera,
• - Opcja wyświetlenia pierwszego elementu galerii - zdjęcia lub filmu - w pełnym wierszu nad właściwą siatką,
• - Galeria z jednym zdjęciem lub jednym filmem automatycznie wykorzystuje pełną szerokość, niezależnie od liczby ustawionych kolumn,
• - Liczba widocznych wierszy przy ładowaniu - reszta zdjęć chowana za przyciskiem "Pokaż więcej"; gdy pierwszy element jest w pełnym wierszu, jest doliczany osobno ponad pełne wiersze siatki,
• - Konfigurowalny odstęp między zdjęciami i wybór proporcji kafelka (oryginalne, 1:1, 4:3, 3:2, 16:9),
• - Obramowanie kafelków z wyborem grubości i koloru oraz własny promień zaokrąglenia,
• - Film przypisany do wybranego produktu - YouTube, Vimeo lub bezpośredni link MP4, ustawiany jako pierwszy lub ostatni element siatki,
• - Własny lightbox z nawigacją do wyboru: strzałki, pasek miniatur lub kropki, z licznikiem zdjęć, opisem i przyciskiem pełnego ekranu,
• - Obsługa gestów dotykowych (przesuwanie) i klawiatury (strzałki, Escape) w lightboxie,
• - Styl przycisku "Pokaż więcej" - kolor tła, kolor tekstu, obramowanie i zaokrąglenie,
• - Dane strukturalne JSON-LD ze zdjęciami produktu dla wyszukiwarek,
• - Możliwość dodania własnej klasy CSS do stylowania modułu.
• - własny identyfikator HTML (kotwica do przewijania strony) oraz własna klasa CSS do niestandardowego stylowania.

Korzyści dla Ciebie (Sprzedawcy)

Nowoczesna galeria siatki poprawia prezentację produktów i wspiera decyzję zakupową:

• - Lepsza prezentacja: więcej zdjęć widocznych jednocześnie bez rozciągania strony,
• - Wideo sprzedaje: film produktowy bezpośrednio w galerii zwiększa zaufanie i konwersję,
• - Pełna kontrola wyglądu: kolumny per urządzenie, proporcje, obramowania i styl przycisku bez pisania kodu,
• - Spójność z marką: kolory i zaokrąglenia dopasujesz do reszty sklepu,
• - Wsparcie SEO: dane strukturalne JSON-LD pomagają wyszukiwarkom rozpoznać zdjęcia produktu.

Co zyska Twój klient?

Klient przeglądający kartę produktu z galerią siatki:

• - Pełniejszy obraz produktu: kilka ujęć oraz film widoczne naraz dają lepsze wyobrażenie o produkcie,
• - Wygodny lightbox: kliknięcie zdjęcia otwiera podgląd z przełączaniem strzałkami, miniaturami lub gestem na telefonie,
• - Szybszy przegląd: siatka jest intuicyjniejsza niż przewijanie jednotorowego slidera,
• - Film bez wychodzenia ze sklepu: prezentacja wideo odtwarza się w lightboxie na stronie produktu.

Jak to działa? (3 proste kroki)

Krok 1: Instalacja: Zainstaluj moduł z Shoper AppStore i umieść go na stronie produktu w edytorze szablonu SVE.

Krok 2: Konfiguracja: Ustaw liczbę kolumn dla każdego urządzenia, liczbę widocznych wierszy, odstęp i proporcje. Opcjonalnie wyświetl pierwszy element galerii w pełnym wierszu, włącz obramowanie kafelków, dostosuj styl przycisku oraz ustawienia lightboxa. Jeśli pierwszy element jest w pełnym wierszu, ustawienie widocznych wierszy liczy pełne wiersze siatki pod nim, a pierwszy element jest doliczany dodatkowo. Aby dodać film, w sekcji "Film" wskaż produkt, wklej link (YouTube, Vimeo lub MP4) i wybierz jego pozycję.

Krok 3: Działa automatycznie: Galeria wyświetla zdjęcia (oraz film, jeśli dodany) w siatce. Jeśli elementów jest więcej niż widoczny limit, pojawia się przycisk "Pokaż więcej". Kliknięcie zdjęcia otwiera lightbox, a kliknięcie filmu odtwarza go w pełnym podglądzie.

Najczęściej zadawane pytania (FAQ)

Skąd moduł pobiera zdjęcia?
Moduł wyświetla zdjęcia przypisane do produktu w panelu administracyjnym Shopera - te same, które normalnie pokazuje galeria produktu.

Jakie formaty filmów są obsługiwane?
Filmy z YouTube (w tym Shorts), Vimeo oraz bezpośrednie pliki MP4 (i WebM/OGG). Miniatura filmu jest pobierana automatycznie - z YouTube lub generowana z pierwszej klatki pliku MP4.

Czy mogę przypisać różne filmy do różnych produktów?
Tak. Sekcja "Film" to lista powtarzalna - dodajesz dowolną liczbę wpisów, każdy z wyborem produktu, linkiem do filmu i pozycją (pierwszy lub ostatni element siatki).

Czy mogę mieć inną liczbę kolumn na telefonie i na komputerze?
Tak. Liczbę kolumn ustawiasz osobno dla telefonu, tabletu, laptopa i komputera. Liczba widocznych zdjęć (wiersze x kolumny) dostosowuje się automatycznie.

Czy pierwsze zdjęcie lub film może być większe od pozostałych?
Tak. Włącz opcję pełnego wiersza dla pierwszego elementu galerii. Pierwszy element pojawi się nad siatką, a pozostałe zdjęcia zachowają standardowy układ kolumn. Jeśli ustawisz 2 widoczne wiersze i 2 kolumny, moduł pokaże 1 duży element oraz 4 kafelki pod nim. Jeśli galeria zawiera tylko jeden element, automatycznie jest on wyświetlany na pełnej szerokości.

Czy lightbox jest częścią modułu?
Tak, moduł ma własny lightbox z wyborem nawigacji (strzałki, miniatury, kropki), licznikiem, opisem zdjęcia, przyciskiem pełnego ekranu oraz obsługą gestów i klawiatury.

Dodatkowe informacje

Moduł jest przeznaczony do szablonu Storefront.

Instrukcja modułu

Jeśli chcesz zobaczyć jakie inne aplikacje/moduły aktualnie oferujemy w sprzedaży w sklepie shoper - kliknij tutaj

Działanie przedstawionego modułu można zobaczyć w demo naszego szablonu Avant Storefront oraz można kupić gotowy szablon z wieloma innymi modułami dostępnymi w cenie szablonu.

Demo szablonu Avant Storefront