Moduł kategorie obrazkowe w sklepie Shoper

Ostatnia aktualizacja: 24 kwietnia 2024

Co to jest moduł kategorii obrazkowych dla sklepu 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:

Przykład wyglądu kategorii obrazkowych na sklepie Shoper
Rys 1. Przykład kategorii obrazkowych z szablonu: RWD040 sklepu Shoper.
Przykład wyglądu kategorii obrazkowych na sklepie Shoper
Rys 1. Przykład kategorii obrazkowych z szablonu: RWD040 sklepu Shoper.

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

Dwie kategorie w formie grafik wyświetlane jedna pod drugą.
Rys 2. Kategorie obrazowe na wersji mobilnej wyświetlane są jedna pod drugą.
Dwie kategorie w formie grafik wyświetlane jedna pod drugą.
Rys 2. Kategorie obrazowe na wersji mobilnej wyświetlane są jedna pod drugą.

Kontenery możesz wykorzystać zarówno do prezentacji kategorii, jak i innych elementów (np. promocji) – tak jak zrobił to właściciel sklepu: powerplay.com.pl

Przykładowe kontenery użyte do prezentacji innych elementów niż tylko kategorie produktów ze sklepu
Rys 3. Przykład wykorzystania kontenerów do prezentacji innych elementów niż tylko kategorie.
Przykładowe kontenery użyte do prezentacji innych elementów niż tylko kategorie produktów ze sklepu
Rys 3. Przykład wykorzystania kontenerów do prezentacji innych elementów niż tylko kategorie.

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. 

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 sekcji menu: Ustawienia > Zaawansowane > Bezpieczeństwo i sprawdź, czy masz: wyłączoną opcję czyszczenia kodu HTML.
Opcja automatycznego czyszczenia kodu HTML w ramach sklepu Shoper
Rys 4. W sklepie Shoper możesz wyłączyć czyszczenie kodu HTML.
Opcja automatycznego czyszczenia kodu HTML w ramach sklepu Shoper
Rys 4. W sklepie Shoper możesz wyłączyć czyszczenie kodu HTML.

Następnie przejdź do sekcji menu: 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 (zarówno na komputerach i urządzeniach mobilnych).

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. T

ekst 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.

Uzupełnianie opisu obrazka w sklepie Shoper
Rys 5. Przykład usuwania szerokości obrazka oraz dodawania opisu.
Uzupełnianie opisu obrazka w sklepie Shoper
Rys 5. Przykład usuwania szerokości obrazka oraz dodawania opisu.

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ć pomiędzy nimi odstęp. Następnie zaznacz po kolei każdy z nich i wstaw link do odpowiedniej kategorii:

Zaznacz obrazek i kliknij opcję: Wstaw łączę
Rys 6. Po zaznaczeniu obrazka w edytorze, kliknij opcję: Wstaw/edytuj łączę.
Zaznacz obrazek i kliknij opcję: Wstaw łączę
Rys 6. Po zaznaczeniu obrazka w edytorze, kliknij opcję: Wstaw/edytuj łączę.

Pamiętaj, że 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

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

Przykładowy schemat kolumn w szablonie sklepu Shoper
Rys 7. Przykład rozkładu kolumn, z których zbudowany jest szablon sklepu Shoper.
Przykładowy schemat kolumn w szablonie sklepu Shoper
Rys 7. Przykład rozkładu kolumn, z których zbudowany jest szablon sklepu 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:

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:

W treści HTML wklej skopiowany kod odpowiadający za wstawienie kolumn.
Rys 9. W kodzie HTML umieść skopiowany kod odpowiedzialny za wyświetlenie czterech kolumn.
W treści HTML wklej skopiowany kod odpowiadający za wstawienie kolumn.
Rys 9. W kodzie HTML umieść skopiowany kod odpowiedzialny za wyświetlenie czterech kolumn.

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 kliknij przycisk: „Zapisz”.

Wstawiamy moduł kategorii w sklepie Shoper

Pozostaje jedynie zamieścić nowo utworzony moduł na stronie głównej sklepu internetowego.

W tym celu w Panelu administracyjnym sklepu przejdź do sekcji menu: 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.

Wybierz i przeciągnij moduł: Kategorie obrazkowe w wybrane miejsce szablonu sklepu.
Rys 11. Wybierz i przeciągnij w wybrane miejsce szablonu moduł: Kategorie obrazkowe.
Wybierz i przeciągnij moduł: Kategorie obrazkowe w wybrane miejsce szablonu sklepu.
Rys 11. Wybierz i przeciągnij w wybrane miejsce szablonu moduł: Kategorie obrazkowe.

Zapisz zmiany i wróć do sklepu. Na małym ekranie (tablet) sklep powinien wyglądać mniej więcej tak:

Przykład wyglądu kategorii obrazkowych w czterech kolumnach na sklepie Shoper
Rys 12. Przykład strony sklepu z dodanym modułem kategorii obrazkowych w czterech kolumnach.
Przykład wyglądu kategorii obrazkowych w czterech kolumnach na sklepie Shoper
Rys 12. Przykład strony sklepu z dodanym modułem kategorii obrazkowych w czterech kolumnach.

Na telefonach komórkowych grafiki będą wyświetlane jedna pod drugą:

Wygląd kategorii obrazkowych w czterech kolumnach - wyświetlane na urządzeniach mobilnych.
Rys 13. Przykład wyglądu kategorii obrazkowych na urządzeniach mobilnych.
Wygląd kategorii obrazkowych w czterech kolumnach - wyświetlane na urządzeniach mobilnych.
Rys 13. Przykład wyglądu kategorii obrazkowych na urządzeniach mobilnych.

Zwróć 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.

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 będziemy zamieszczać w Panelu administracyjnym sklepu w sekcji menu: Wygląd i treści > Wygląd sklepu > Obecny szablon graficzny > 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.
  • 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 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.

Warto zapamiętać!
W powyższym poradniku zostało wyjaśnione:
  • 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ł?
Udostępnij artykuł:

Przetestuj sklep internetowy
przez 14 dni za darmo

Korzystaj ze wszystkich funkcji oprogramowania za darmo i bez zobowiązań.

Testuj wszystkie funkcje przez 14 dni bez zobowiązań. Zakładając sklep poprzez podanie
adresu e-mail akceptujesz nasz Regulamin i Politykę Prywatności