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.



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.
Opisany moduł jest modyfikacją wprowadzaną we własnym zakresie, nieobjętą wsparciem technicznym.
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.
Zobacz również: Sprawdź poradnik „Skąd brać darmowe zdjęcia do reklam?”
Pamię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 Ustawienia > Zaawansowane > Bezpieczeństwo i sprawdź, czy posiadasz taką samą konfigurację jak poniżej:

Następnie przejdź do Wygląd i treści > Wygląd sklepu > Obecny szablon 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 zostawiaj obu wymiarów podanych „na sztywno”. 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.

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:

Pamiętaj: obrazek musi być zaznaczony na niebiesko. 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:
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:
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:
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:
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 Wygląd i treści > Wygląd sklepu > Obecny szablon graficzny > Moduły > Strona główna.
Z listy dostępnych modułów przesuń kategorie obrazkowe do wybranego wcześniej miejsca.
Zapisz zmiany i wróć do sklepu. Na małym ekranie (tablet) nasz hipotetyczny sklep z grami będzie wyglądał następująco:
Na telefonach komórkowych grafiki wyświetlą się jedna pod drugą:

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ć tzw. 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 (siatki), 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 Wygląd i treści > Wygląd sklepu > Obecny szablon 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.
Dodatkowe rozwiązanie dla sklepów Shoper
Jeśli nie chcesz poświęcać czasu na samodzielne stworzenie 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.
Zobacz więcej: opis aplikacji „Kategorie obrazkowe”