Moduł kategorii obrazkowych w sklepie Shoper

Grafika – średniozaawansowany
Grafika | 7 minut

Czego dowiesz się z poradnika:

  • czym jest moduł kategorii obrazkowych;
  • jak tworzyć responsywne kolumny w sklepie Shoper;
  • poznasz przykłady wykorzystania takiego modułu;
  • dowiesz się, jak wykonać moduł bez znajomości HTML/CSS;
  • jeśli znasz podstawy CSS – dowiesz się, jakimi właściwościami możesz urozmaicić moduł.

Moduł kategorii obrazkowych 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 – przykład
Kategorie obrazkowe są po prostu grafikami odsyłającymi do odpowiedniej podstrony sklepu. Powyżej przykład z szablonu RWD040 sklepu Shoper.
kategorie obrazkowe - przykład
Sklep atomcomics.pl posiada dwie główne kategorie obrazkowe: polskie komiksy Marvel oraz DC. W trybie mobile grafiki wyświetlają się jedna pod drugą.

 

kategorie obrazkowe - przykład
Kontenery możesz wykorzystać zarówno do prezentacji kategorii, jak i bestsellerów, premier, nowości – tak jak zrobił to sklep powerplay.com.pl

 

kategorie obrazkowe - przykład
Krakowska malarka Łucja Kłańska-Kanarek w swoim sklepie oferuje produkty będące odzwierciedleniem jej obrazów. Poza grafikami znalazły się tutaj krótkie opisy każdej z kategorii.

 

W jednym z poradników opisaliśmy, jak stworzyć moduł zawierający ikony z podpisami. W tym artykule dowiesz się, jak stworzyć uproszczoną wersję takiego układu, prezentującą kilka obrazków z najpopularniejszymi kategoriami.

Tworzymy prosty moduł kategorii

Przede wszystkim musimy przygotować odpowiednie grafiki, reprezentujące poszczególne kategorie. W naszym przykładzie stworzymy cztery główne kategorie dla hipotetycznego sklepu z grami planszowymi. Podczas tworzenia obrazków skorzystaliśmy ze strony unsplash.com udostępniającej darmowe zdjęcia do użytku komercyjnego. Zdjęcia zostały rozjaśnione i nałożono na nie napisy. Zostań z nami i zobacz efekt końcowy. 

 

ikona: zobacz równieżZobacz również: Sprawdź poradnik „Skąd brać darmowe zdjęcia do reklam?” 

 

ikona: pamiętajPamiętaj: Zawsze najlepiej wykorzystać własne, unikatowe zdjęcia prezentujące twoje produkty.

 

Na początek upewnij się, że ze sklepu nie zostanie usunięty dodatkowy kod HTML. Ze względów bezpieczeństwa domyślnie kod HTML w modułach jest czyszczony zaraz po zapisaniu. Po zalogowaniu do panelu administratora sklepu przejdź do zakładki Konfiguracja > Administracja, system > Bezpieczeństwo i sprawdź, czy posiadasz taką samą konfigurację jak poniżej:

 

 

Następnie przejdź do Styl graficzny & Nawigacja > Aktywny styl graficzny > Moduły > + dodaj moduł. W sekcji tytuł wpisz nazwę, którą później szybko rozpoznasz na liście modułów np. kategorie obrazkowe

 

W polu edytora wizualnego dodaj pierwszy obrazek. Pamiętaj, aby zostawić tylko szerokość, a usunąć wysokość w pikselach. Nie zapomnij też zaznaczyć opcji zachowaj proporcje. Dzięki takiemu ustawieniu obrazki będą poprawnie wyświetlać się na wszystkich urządzeniach.

Zwróć również uwagę na pole opis obrazka – tekst alternatywny wyświetlany, gdy obrazek się nie załaduje i mający pewne znaczenie dla optymalizacji SEO. Tekst alternatywny powinien opisywać obrazek lub miejsce, do którego odsyła np. kategorie). Po wstawieniu obrazka wciśnij strzałkę w prawo i kliknij enter.

 

wstawianie responsywnego obrazka Shoper

 

Domyślna szerokość strony w sklepie Shoper na podstawowym szablonie graficznym wynosi 1180 pikseli. Tworząc grafiki do kategorii obrazkowych i zastanawiając się nad ich rozmiarem, miej na uwadze tę wartość. Nie wstawiaj też przesadnie dużych grafik, jeśli i tak będziesz wyświetlać obrazki w mniejszym rozmiarze. Przykładowo: nie ma potrzeby tworzenia grafik o szerokości 1024 pikseli, jeśli finalnie i tak będą skalowane do szerokości 280 pikseli. Spowolni to tylko ładowanie strony, więc twórz grafiki od razu w docelowym rozmiarze.

Wstaw wszystkie obrazki, po każdym wciskając enter, aby dodać odstęp.

Następnie zaznacz po kolei każdy z nich i wstaw link do odpowiedniej kategorii:

 

kategorie obrazkowe - dodawanie linków

 

Gdy powtórzysz to dla każdego obrazka, wciśnij przycisk wyłącz edytor, aby z edytora wizualnego przejść do trybu kodu HTML.

W nowej karcie otwórz stronę: https://developers.shoper.pl/theme-development/rwd

Przejdź do linijki Flex grid – 12 columns. Chcemy wstawić cztery kolumny. Taką ich liczbę znajdziesz w tej linijce 3.1, 3.2, 3.3, 3.3:

 

grid - 12 kolumn - Shoper

 

Przejdź do zakładki HTML. Jeśli nic się nie zmieni, użyj innej przeglądarki – prawdopodobnie korzystasz z wtyczki do przeglądarki, która powoduje niepoprawne działanie powyższej strony.

Łatwo zauważyć, że interesujący nas kod to ten zaznaczony poniżej na czerwono, w którym w ramach głównego tagu <div> znajdują się cztery linijki – odpowiadające czterem kolumnom:

 

kod HTML - grid 4 kolumny - Shoper

 

Wracamy do sklepu. U samej góry nad istniejącym już kodem wklejamy skopiowany ze strony dla deweloperów Shoper. Powinno to wyglądać jak poniżej:

 

kod kategorii obrazkowych Shoper

 

Możemy zauważyć wyraźnie powtarzalne fragmenty – każdy nasz obrazek kategorii z linkiem zaczyna się od <p><a href… 

Jeśli pojawiają się dodatkowe fragmenty kodu np. <p></p> czy puste linijki – usuwamy je.

Teraz każdą z powtarzalnych linijek przenosimy kolejno (wytnij + wklej) w miejsce 3.1, 3.2 itd. jak na obrazku poniżej:

 

kategorie obrazkowe - kod HTML - Shoper

 

Wracamy do edytora wizualnego, wybierając przycisk włącz edytor. Kliknij dowolne miejsce i wciśnij ctrl + a, aby zaznaczyć wszystko w stworzonym module. Wybierz wyśrodkuj, aby całość estetycznie się wyświetlała na mniejszych ekranach.

Na końcu Zapisz.

Wstawiamy moduł kategorii w sklepie Shoper

Pozostaje jedynie zamieścić nowo utworzony moduł na stronie głównej. Przejdź do Styl graficzny & nawigacja > Aktywny styl graficzny > Moduły > Strona główna.

Z listy dostępnych modułów przesuń kategorie obrazkowe do wybranego wcześniej miejsca.

 

umieszczanie modułu w sklepie Shoper

 

Zapisz zmiany i wróć do sklepu. Na małym ekranie (tablet) nasz hipotetyczny sklep z grami będzie wyglądał następująco:

 

przykład kategorii obrazkowych

 

Na telefonach komórkowych grafiki wyświetlą się jedna pod drugą:

 

przykład kategorii obrazkowych - mobile

 

Zwróć też uwagę na nazewnictwo kategorii, które powinno być dostosowane do grupy docelowej – do twoich potencjalnych klientów. W tym wypadku użyto krótszych nazw (np. bitewniaki zamiast gry bitewne). Nazwy kategorii powinny nawiązywać do języka, którego używają twoi odbiorcy i być możliwie proste.

Jak jeszcze mogę wykorzystać taki moduł?

  • Możesz stworzyć info-ikony prezentujące wyróżniki twojej marki.
  • Możesz w ciekawy sposób urozmaicić swoje strony informacyjne np. o firmie lub o dostawach i płatnościach.
  • Możesz edytować strony poszczególnych kategorii, aby w formie obrazkowej zaprezentować podkategorie. Pamiętaj jednak, aby wtedy obrazki nie były zbyt wysokie – tak, aby produkty były widoczne na pierwszym widoku ekranu.
  • Tworząc ważne karty produktów możesz je znacząco urozmaicić.
  • Używając tzw. grida, który opisaliśmy powyżej, stworzysz kontenery, w których zamieścisz grafiki informujące o darmowej dostawie czy aktualnej promocji. Możesz też stworzyć obrazki, odsyłające do stron informacyjnych lub najważniejszych wpisów blogowych.

[dla zaawansowanych] Jak urozmaicić moduł kategorii obrazkowych?

Do samodzielnej poprawy wyglądu modułu będziesz potrzebować drobnych modyfikacji w kodzie CSS – potrzebna będzie jego przynajmniej podstawowa znajomość. Kod będziemy zamieszczać w zakładce Styl graficzny & nawigacja > Aktywny styl graficzny > Własny kod CSS. Poniżej podsuwamy kilka haseł, które warto zgłębić, jeśli chcesz 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.

Obramowanie możesz zaokrąglić dzięki border-radius.