Dlaczego Twoim klientom to się spodoba?

Sekcja korzyści z ikonami to jeden z najważniejszych elementów strony sklepu - w kilku punktach komunikuje dlaczego warto tu kupić: darmowa dostawa, bezpieczne płatności, szybka wysyłka, łatwy zwrot. Ikonki sprawiają że treść jest szybciej przyswajana niż sama lista tekstowa.

Moduł pozwala zbudować taką sekcję dowolną liczbą elementów z własnymi ikonami i opisami.

Jakie posiada możliwości?

Moduł wyświetla sekcję z ikonami i opisami w elastycznym układzie:

• - Opcjonalny nagłówek sekcji nad listą elementów,
• - Dodatkowa treść z edytora WYSIWYG nad listą elementów,
• - Wyśrodkowanie zawartości lub wyrównanie do lewej,
• - Repeater elementów - dowolna liczba ikon z opisami (od 1 do 10),
• - Każdy element: własna ikona (SVG, PNG, WebP, JPG) i opis tekstowy,
• - Dwa układy: ikona nad tekstem lub ikona obok tekstu,
• - Konfigurowana liczba elementów w wierszu osobno dla desktop, laptop, tablet i mobile (opcje 1-6),
• - Styl wizualny bloku: Flat (kolorowe tło), Pill (kolorowe tło, zaokrąglony), Karta (białe tło, cień), Obrys (ramka) lub bez stylu,
• - Kolor tekstu opisów - nadpisuje domyślny kolor motywu,
• - Rozmiar tekstu opisów - nadpisuje domyślny rozmiar motywu,
• - Szerokość kolumny ikony w układzie ikona-lewo (domyślnie 80px),
• - Kolor ikony (maska koloru - działa z SVG i PNG z przezroczystym tłem),
• - Kolor tła obszaru ikony, padding, zaokrąglenie narożników i obramowanie ikony,
• - Własna klasa CSS do niestandardowego stylowania.

Korzyści dla Ciebie (Sprzedawcy)

Lista ikon z opisami to efektywny sposób komunikowania wartości sklepu:

• - Szybka komunikacja USP: ikony z krótkimi opisami są przyswajane w ciągu sekund - klient od razu wie dlaczego warto kupić właśnie tutaj,
• - Elastyczne zastosowanie: moduł sprawdza się jako sekcja korzyści na stronie głównej, stronie kategorii, stronie produktu lub stopce,
• - Pełna kontrola układu: liczba kolumn niezależna dla każdej rozdzielczości - na mobile 2 ikony w wierszu, na desktop 5,
• - Wygląd dopasowany do marki: styl wizualny bloku, kolor tekstu, rozmiar tekstu i wygląd ikony konfigurujesz bez CSS,
• - Własne ikony: zamiast generycznych możesz użyć ikon pasujących do stylu marki, z opcją kolorowania maską.

Co zyska Twój klient?

Klient przeglądający sklep z modułem listy korzyści:

• - Szybką decyzję: widząc ikonę z opisem "Darmowa dostawa od 199 zł" czy "Dostawa w 24h" łatwiej podejmuje decyzję zakupową,
• - Zaufanie do sklepu: profesjonalna sekcja korzyści buduje wiarygodność i poczucie bezpieczeństwa zakupu,
• - Czytelność: wizualny podział na ikony z krótkimi opisami jest łatwiejszy w odbiorze niż długie bloki tekstu.

Jak to działa? (3 proste kroki)

Krok 1: Instalacja: Zainstaluj moduł z Shoper AppStore i umieść go w wybranym miejscu w edytorze SVE - na stronie głównej, kategoriach lub innych stronach.

Krok 2: Konfiguracja: Dodaj elementy listy - wgraj ikonę i wpisz opis dla każdego elementu. Ustaw układ (ikona nad tekstem lub obok), styl wizualny bloku, kolor i rozmiar tekstu, wygląd ikony oraz liczbę elementów w wierszu dla każdej rozdzielczości.

Krok 3: Działa automatycznie: Moduł wyświetla sekcję ikon z opisami w wybranym układzie. Responsywny grid dostosowuje liczbę kolumn do rozdzielczości urządzenia klienta.

Najczęściej zadawane pytania (FAQ)

Ile elementów (ikon) mogę dodać?
Moduł obsługuje od 1 do 10 elementów. Każdy element ma własną ikonę i opis tekstowy.

Jakie formaty ikon są obsługiwane?
Obsługiwane formaty to SVG, PNG, WebP, JPG i JPEG. Zalecamy SVG lub PNG z przezroczystym tłem - umożliwiają kolorowanie ikonki maską koloru.

Czy mogę ustawić różną liczbę kolumn na mobile i desktop?
Tak, liczba elementów w wierszu jest konfigurowana niezależnie dla czterech rozdzielczości: desktop, laptop, tablet i mobile. Możesz np. ustawić 5 kolumn na desktop i 2 na mobile.

Co to jest styl wizualny bloku?
To opcjonalne owijanie każdego bloku ikona+opis w ozdobne tło. Do wyboru: Flat (kolorowe tło motywu), Pill (kolorowe tło, mocno zaokrąglone), Karta (białe tło z cieniem) lub Obrys (tylko ramka). Możesz też wybrać "Brak" i stylować przez CSS.

Jak działa kolor ikony?
Kolor ikony nakłada maskę koloru na obraz - działa najlepiej z plikami SVG i PNG z przezroczystym tłem. Nie wpływa na JPG ani WebP bez przezroczystości.

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