Instrukcja obsługi modułu

Galeria Social Media

Moduł pozwala odtworzyć na stronie sklepu wygląd feedu z Instagrama lub innego serwisu społecznościowego. Zdjęcia oraz filmy prezentowane są w formie estetycznych kafelków ułożonych w karuzelę lub siatkę, a po kliknięciu mogą otwierać się w powiększeniu (popup) wraz z opisem i przypisanymi produktami.

Moduł korzysta z natywnych komponentów motywu (slider, modal), dzięki czemu wygląda spójnie z resztą sklepu i nie wymaga dodatkowego stylowania. Najważniejsze możliwości:

  • prezentacja zdjęć i filmów (mp4) w jednej galerii,
  • dwa układy do wyboru — karuzela zdjęć lub siatka zdjęć,
  • otwieranie kafelków w powiększeniu (popup) z opisem, nagłówkiem profilu i nawigacją strzałkami,
  • przypisywanie produktów do kafelka (do 3 produktów) — z miniaturami na kafelku i listą zakupową w popupie,
  • automatyczne odtwarzanie wideo na kafelku oraz pełne sterowanie odtwarzaniem w powiększeniu (play/pauza, wyciszenie, pasek postępu),
  • podlinkowanie kafelka do dowolnego adresu URL,
  • pełna kontrola nad liczbą kolumn i odstępami osobno dla komputerów i telefonów,
  • ograniczenie widoczności modułu do wybranych typów stron i konkretnych elementów.
✓
Wydajność wideo
Galeria jest zoptymalizowana pod kątem szybkości ładowania. Filmy są doczytywane leniwie (lazy-loading), dopiero gdy kafelek pojawi się w polu widzenia — dzięki temu strona ładuje się szybko nawet przy dużej liczbie materiałów wideo.

Instalacja

1

Zaloguj się do panelu

Zaloguj się do panelu administracyjnego swojego sklepu.

2

Odszukaj aplikację

Przejdź do sekcji Aplikacje i odszukaj aplikację [AlterCode] Galeria Social Media.

3

Zainstaluj i zatwierdź zgody

Kliknij Zainstaluj i potwierdź uprawnienia wymagane przez aplikację.

4

Gotowe

Po instalacji moduł będzie dostępny w edytorze wizualnym motywu na liście modułów do przeciągnięcia.

Konfiguracja w edytorze

1

Uruchom Edytor wizualny

Wejdź do Wygląd i treści › Wygląd sklepu i uruchom Edytor wizualny.

2

Wybierz szablon strony

Wybierz szablon strony, na której ma pojawić się galeria (np. strona główna, karta produktu, artykuł bloga).

3

Przeciągnij moduł

Z listy modułów przeciągnij [AlterCode] Galeria Social Media w wybrane miejsce układu.

4

Uzupełnij ustawienia i zapisz

Uzupełnij ustawienia w panelu bocznym (opisane niżej) i zapisz zmiany.

Ustawienia modułu podzielone są na trzy zakładki: Kafelki, Ustawienia oraz Widoczność.

Kafelki

W tej zakładce dodajesz i konfigurujesz poszczególne kafelki galerii.

Opcja
Opis
Po kliknięciu otwórz w popupie
Gdy zaznaczone, kliknięcie kafelka otwiera powiększenie (modal) z większym podglądem, opisem i przypisanymi produktami. Gdy wyłączone, kafelek jest statyczny lub prowadzi do podlinkowanego adresu.
Lista kafelków
Powtarzalna lista elementów galerii. Możesz dodać od 1 do 100 kafelków. Każdy kafelek konfigurujesz osobno (pola poniżej).

Pola pojedynczego kafelka

Pole
Opis
Rodzaj
Typ materiału na kafelku: Zdjęcie lub Wideo. Od tego wyboru zależy, które pola poniżej będą widoczne.
Zdjęcie
(dla rodzaju „Zdjęcie”) Grafika kafelka. Dozwolone formaty: JPG, JPEG, PNG.
Video URL
(dla rodzaju „Wideo”) Bezpośredni adres URL pliku wideo. Obsługiwany jest wyłącznie format mp4.
Automatyczne odtwarzanie
(dla rodzaju „Wideo”) Gdy zaznaczone, film odtwarza się automatycznie już na kafelku (bez dźwięku, w pętli).
Krótki opis zdjęcia
Krótki tekst wyświetlany na kafelku po najechaniu kursorem.
Opis zdjęcia
Rozbudowany opis (edytor WYSIWYG) widoczny tylko w powiększeniu — działa, gdy włączona jest opcja „Po kliknięciu otwórz w popupie”.
Podlinkuj element
Gdy zaznaczone, kafelek staje się odnośnikiem prowadzącym pod wskazany adres.
Podaj adres url
(gdy zaznaczono „Podlinkuj element”) Docelowy adres URL kafelka.
Przypisane produkty
Do trzech produktów przypisanych do kafelka (Produkt 1–3, opcjonalnie). Ich miniatury pojawią się w rogu kafelka, a w powiększeniu wyświetli się lista z ceną i przejściem do karty produktu.
!
Kafelki wideo w edytorze
Podczas edycji film w kafelku może nie być wyświetlany — w jego miejscu pojawi się białe pole. Nie jest to błąd, lecz efekt optymalizacji galerii. Na stronie sklepu (na żywo) film wyświetli się poprawnie.

Ustawienia

Zakładka odpowiada za wygląd całej galerii oraz nagłówek profilu.

Opcja
Opis
Logo profilu
Grafika (awatar) wyświetlana w nagłówku powiększenia.
Nazwa profilu
Nazwa profilu, np. @mojprofil. Widoczna w nagłówku powiększenia.
Link do profilu
Adres profilu w serwisie społecznościowym, np. https://instagram.com/mojprofil. Nazwa i logo profilu staną się do niego odnośnikiem.
Tekst nad galerią
Treść (edytor WYSIWYG) wyświetlana nad galerią — np. tytuł sekcji lub krótkie wprowadzenie.
Układ zdjęć
Sposób prezentacji kafelków: Karuzela zdjęć (przewijany slider) lub Siatka zdjęć (statyczna siatka).
Ilość rzędów w karuzeli
(tylko dla układu „Karuzela”) Liczba rzędów kafelków w sliderze: 1, 2 lub 3.

Ustawienia kolumn — komputery

Domyślnie
Opcja
5
Ilość kolumn — liczba kafelków w rzędzie na komputerach (1–6).
16 px
Odstęp pomiędzy kafelkami — odległość między kafelkami w pikselach.

Ustawienia kolumn — telefony

Domyślnie
Opcja
2
Ilość kolumn — liczba kafelków w rzędzie na telefonach (1–4).
16 px
Odstęp pomiędzy kafelkami — odległość między kafelkami w pikselach.

Wygląd kafelków

Domyślnie
Opcja
0 px
Zaokrąglenie rogów zdjęć — promień zaokrąglenia narożników kafelków w pikselach.

Widoczność

Zakładka pozwala ograniczyć wyświetlanie modułu do wybranych stron. Domyślnie moduł jest widoczny wszędzie tam, gdzie został dodany.

Opcja
Opis
Rodzaj strony
Ogranicza wyświetlanie modułu do wybranego typu strony: Bez dodatkowych ograniczeń, Produkt, Kategoria, Strona informacyjna lub Artykuł bloga.
Lista ID
Lista identyfikatorów elementów (np. produktów, kategorii, stron) oddzielonych przecinkiem, na których moduł ma się pojawić. Działa razem z wybranym „Rodzajem strony”.
✓
Przykład
Aby galeria pojawiła się tylko na kartach produktów o ID 120 i 145, ustaw Rodzaj strony na „Produkt” i wpisz w Lista ID: 120,145.

Wsparcie

Dziękujemy za zakup modułu! Mamy nadzieję, że moduł spełnia Państwa oczekiwania. W razie pytań lub problemów z konfiguracją zachęcamy do kontaktu: pomoc@altercode.pl