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”