Kategorie obrazkowe w sklepie Shoper

Kategorie obrazkowe są dla klienta znaczącym ułatwieniem w nawigacji. Pomagają też wyróżnić obszary, na których zależy sprzedawcy. Są też graficznym urozmaiceniem, które wzbogaca sklep i pomaga skierować klienta od razu do najważniejszych miejsc.

Kategorie obrazkowe są po prostu grafikami odsyłającymi do odpowiedniej podstrony sklepu:

Sklep atomcomics.pl ma dwie kategorie obrazkowe: polskie komiksy Marvel oraz DC:

Kontenery możesz wykorzystać zarówno do prezentacji kategorii, jak i innych elementów (np. promocji czy nowości).

Jak dodać kategorie obrazkowe w edytorze szablonu Storefront?

Przede wszystkim przygotuj wcześniej odpowiednie grafiki, reprezentujące poszczególne kategorie czy też inne elementy sklepu, a jednocześnie pasujące do identyfikacji wizualnej Twojego sklepu.

Możesz przygotować grafiki (zdjęcia) we własnym zakresie lub skorzystać z baz darmowych materiałów np. pexels.com, która udostępnia bezpłatne zdjęcia do użytku komercyjnego.

• Zobacz również: Skąd brać darmowe zdjęcia do reklam?

Przejdź do edytora szablonu w zakładce: Wygląd i treści (A), Wygląd sklepu (B), Obecny szablon graficzny (C) i w sekcji: Szczegóły szablonu (D) kliknij: EDYTUJ UKŁAD I STYL SZABLONU (E).

Jeśli chcesz wprowadzać zmiany w szablonie, który aktualnie nie jest widoczny dla kupujących w zakładce Twoje szablony graficzne, przejdź do edycji właściwego szablonu.

Kategorie obrazkowe zazwyczaj umieszcza się na stronie głównej sklepu, dlatego przejdź do edycji Strony głównej (A) w Twoim sklepie i przygotuj osobną sekcję z jednym wierszem i tyloma kolumnami (B) ile chcesz umieścić w jednym rzędzie.

• Jak zarządzać sekcjami, wierszami i kolumnami?

Na liście: Dodaj moduł (A), odszukaj typ modułu: Obrazek (B) i do każdej z przygotowanych kolumn przeciągnij moduł: Obrazek (C).

• Jak dodać moduł do strony w szablonie Storefront?

W module Obrazek masz możliwość wprowadzenia wielu ustawień m.in. dodania linku, czyli miejsca docelowego, do którego kupujący po kliknięciu w obrazek zostanie przeniesiony.

• Jak podlinkować obrazek w edytorze szablonu?

Masz możliwość edycji dodanego obrazka (A). Możesz nanieść tekst, zmienić kolor obrazka, wykadrować lub zmienić jego rozmiar.

Możesz ustawić szerokość obrazka (B).

Należy dodać alternatywny opis (C) dla każdego obrazka dodawanego do szablonu sklepu.

• Jak tworzyć alternatywne opisy dla obrazków?

Zaznacz opcję: Obrazek jest podlinkowany (D), jeśli chcesz dodać link.

Linkuj elementy sklepu za pomocą tzw. linków względnych, czyli bez nazwy domeny.

/kategoria-A
zamiast
https://mojsklep.pl/kategoria-A

Możesz zdecydować czy link ma być otwierany w nowej karcie przeglądarki (E), czy nie.

Po zapisaniu zmian w module i opublikowaniu zmian w edytowanym szablonie, na stronie głównej Twojego sklepu zobaczysz efekt końcowy.

Jak urozmaicić moduł kategorii obrazkowych (dla zaawansowanych)?

Do samodzielnej poprawy wyglądu modułu będziesz potrzebować drobnych modyfikacji w kodzie CSS – potrzebna będzie jego przynajmniej podstawowa znajomość.

Nowy kod możesz zamieszczać w Panelu administracyjnym sklepu w zakładce: Wygląd i treści, Wygląd sklepu, Obecny szablon graficzny, Własny kod CSS.

Każdemu elementowi szablonu (sekcji/wierszowi/kolumnie/modułowi) możesz nadać indywidualną nazwę klasy, a do tej klasy odnieść się w arkuszu CSS wspomnianym wcześniej (własny kod CSS).

Poniżej lista tematów, które umożliwiają urozmaicić styl wyświetlania kategorii:

• Wykorzystaj efekt hover, aby zmienić wygląd grafik po najechaniu.
• Grafiki po najechaniu możesz przykładowo rozjaśnić za pomocą właściwości filter.
• Domyślnie efekty hover (po najechaniu na obiekt) następują gwałtownie. Jeśli chcesz, aby zmiana (np. rozjaśnienie) następowało płynnie, sprawdź właściwość transition.
• Możesz wzbogacić grafiki o obramowanie za pomocą właściwości border.

Dodatkowe rozwiązanie dla sklepów Shoper

Jeśli nie chcesz poświęcać czasu na samodzielne tworzenie modułu, możesz skorzystać z gotowego rozwiązania.

Aplikacja Kategorie obrazkowe wyświetli moduł kategorii, który możesz edytować na kilka sposobów. Może on również wyświetlać liczbę produktów ze wskazanej kategorii.

•  Więcej informacji: strona gotowej aplikacji Kategorie obrazkowe