Moduł kategorie obrazkowe w sklepie Shoper
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:
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) – tak jak zrobił to właściciel sklepu: powerplay.com.pl
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ż: 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 sekcji menu: Ustawienia > Zaawansowane > Bezpieczeństwo i sprawdź, czy masz: wyłączoną opcję czyszczenia 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.
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:
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:
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 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.
Zapisz zmiany i wróć do sklepu. Na małym ekranie (tablet) sklep powinien wyglądać mniej więcej tak:
Na telefonach komórkowych grafiki będą wyświetlane jedna pod drugą:
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.
Kategorie obrazkowe w szablonie Storefront
W szablonie w technologii Storefront również możesz dodać kategorie obrazkowe dużo łatwiej i szybciej. Wystarczy, że przygotujesz najpierw siatkę (grid) na moduły (np. 4 w jednym rzędzie), a następnie do każdej z kolumn dodasz moduł Obrazek, do którego zdjęcie prześlesz z dysku swojego komputera.
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.
- Więcej informacji: strona gotowej aplikacji Kategorie obrazkowe
Warto zapamiętać!
- 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ł?