Czego dowiesz się z poradnika:

• jak wstawić tzw. info ikony w sklepie Shoper;
• jak tworzyć responsywne kolumny w sklepie Shoper;
• gdzie można zamieścić moduł z ikonami;
• skąd wziąć darmowe ikony do sklepu.

Czy potrafisz sobie odpowiedzieć na pytanie „dlaczego klient ma kupić u mnie, a nie w konkurencyjnym sklepie lub galerii handlowej?”.

Czy wiesz, w jaki sposób komunikować, co wyróżnia twoją markę?

W jednym z poradników opisaliśmy, jak można zastanowić się nad wyróżnikami sklepu. Podaliśmy również przykłady krótkich treści, które możesz wykorzystać. Elementy odróżniające twoją firmę od innych możesz zaprezentować w prostej graficznej formie – jako ikony z odpowiednimi opisami. Spójrz na przykłady:

Opisany moduł jest modyfikacją wprowadzaną we własnym zakresie, nieobjętą wsparciem technicznym.

Jeśli prowadzisz sklep na platformie Shoper, że możesz wykorzystać układ modułowy sklepu oraz fakt, że szablony graficzne Shoper bazują na tzw. gridzie czyli, w uproszczeniu, systemie responsywnych kolumn i wierszy. To bardzo przydatna funkcjonalność i zaprezentujemy, jak ją wykorzystać bez znajomości języka HTML i CSS.

Uwaga: Możesz zastanawiać się: czemu nie mam przygotować takiego modułu w formie tabeli? Pamiętaj, że z natury tabele nie są responsywne i służą przede wszystkim prezentacji danych.

Uwaga: Być może zastanawiasz się także, czemu nie przygotować zaprezentowanej serii w formie jednego dużego obrazka. Oczywiście jest to możliwe, jednak miej na uwadze, że na ekranie telefonu będzie on mało czytelny. Pod kątem czytelności, jak i elementów pozycjonowania, podpisy lepiej będzie zaprezentować jako faktyczny tekst.

Jak stworzyć responsywny układ ikon w sklepie Shoper?

Na początek upewnij się, że twój sklep nie usunie dodatkowego kodu HTML. Dla bezpieczeństwa domyślnie kod HTML w module jest czyszczony po zapisaniu. W panelu administracyjnym przejdź do zakładki Ustawienia > Zaawansowane > Bezpieczeńśtwo i upewnij się, że masz takie samo ustawienie jak poniżej:

Przejdź do Wygląd i treści > Wygląd sklepu > Obecny szablon graficzny > Moduły > + dodaj moduł

W polu tytułu podaj nazwę, dzięki której później szybko rozpoznasz moduł na liście np. „ikony informacyjne”. 

W edytorze wizualnym dodaj kolejno: obrazek, enter, nagłówek, enter, podpis, enter, obrazek, enter, nagłówek itd. Zrób to według schematu poniżej.

1. Dodając obrazki, należy pamiętać, żeby zostawić samą szerokość, a usunąć pole wysokości. Zaznacz też opcję „zachowaj proporcje”. Takie ustawienie pomaga odpowiednio wyświetlać obrazki na różnych rozdzielczościach. 

Pamiętaj także o opisie obrazka, który jest tożsamy z tekstem alternatywnym (wyświetlanym, gdy obrazek się nie załaduje i mającym pewne znaczenie dla wyszukiwania grafiki w Google).

2. Po wstawieniu grafiki kliknij enter. Pod obrazkiem zamieść nagłówek wybranego stopnia (pamiętaj, aby nie był to nagłówek pierwszego stopnia, który powinien występować na danej podstronie tylko raz). Pamiętaj, że sama pogrubiona linijka tekstu od strony technicznej nie jest nagłówkiem.

3. Wciśnij enter po raz kolejny i zamieść pod nagłówkiem krótki opis zaprezentowanej korzyści.

4. Ponownie dodaj linijkę odstępu i powtórz proces tyle razy, ile ikon chcesz zamieścić np. trzy razy.

Po powtórzeniu kroków tyle razy ile potrzebujesz, wciśnij przycisk „wyłącz edytor”, aby przejść do trybu HTML. Jeśli chcesz, aby ikony były klikalne, wcześniej zaznacz każdą z nich osobno i wybierz „wstaw/edytuj łącze”.

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

Przejdź do linijki „Flex grid – 12 columns”. Załóżmy, że chcemy wstawić 3 kolumny. Są one w tej linijce, co 3.1, 3.2, 3.3:

Przejdź do zakładki „HTML”. Jeśli nic się nie zmieni, spróbuj użyć innej przeglądarki – prawdopodobnie używasz wtyczki do przeglądarki, która powoduje niepoprawne działanie powyższej strony.

Łatwo zauważyć, że kod tego fragmentu, który tu by nas interesował to ten zaznaczony poniżej na czerwono. w którym również pojawia się 3.1, 3.2, 3.3:

Zaznaczamy go i kopiujemy. To są już ostylowane kontenery, które będą się dobrze skalowały na telefonach komórkowych czy tabletach. Teraz będziemy tylko chcieli zamienić fragmenty 3.1, 3.2, 3.3 na to, co wcześniej utworzyliśmy.

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

Poniżej mamy wyraźnie powtarzalne fragmenty z wcześniej stworzonym kodem, który powstał dzięki naszej pracy w edytorze wizualnym. Pojawiają się linijki rozpoczynające się od <p><img, <h2> i raz jeszcze od <p> – odpowiadają akapitowi z obrazkiem, z nagłówkiem oraz z opisem.

Po kolei je zaznaczamy i wklejamy w miejsce 3.1, 3.2, 3.3 czyli np.:

Usuwamy zbędne puste linijki (kolokwialnie mówiąc: entery) i puste <p> na samym końcu jeśli są. Wracamy do edytora wizualnego, klikając „włącz edytor”. Klikamy ctrl + a, aby zaznaczyć wszystko w module. Klikamy „wyśrodkuj”, aby całość estetycznie się wyświetlała.

Na końcu klikamy „Zapisz”.

Wstawiamy moduł ikon w sklepie

To będzie nasz ostatni krok. Załóżmy, że chcemy zaprezentować ikony u dołu karty produktów, pod każdym towarem jako dodatkową zachętę do zakupu. Wchodzimy do zakładki „Szczegóły produktów” i z listy dostępnych modułów przesuwamy właśnie utworzony moduł. Klikamy „Zapisz”. Oczywiście możemy je też wykorzystać w każdym innym widoku. Warto to zrobić np. na stronie głównej.

Finalnie na stronie będzie wyglądać to następująco:

Podczas gdy w widoku mobilnym ikony wyświetlą się jedna pod drugą.

W zależności od ilości tekstu sposób wyświetlania może być różny. Jeśli chcemy narzucić stałą szerokość, można edytować obrazki w programie graficznym tak, aby miały po bokach marginesy. Wszystkie obrazki powinny mieć tę samą szerokość.

Marginesy na przykładzie:

Gdzie wykorzystać stworzony moduł?

Pamiętaj, że powyższy moduł możesz wykorzystać w kilku widokach, możesz też stworzyć jego kilka wariantów.

• Jeśli twoje produkty mają wspólne wyróżniki, użyj modułu w widoku „szczegóły produktu”.
• Jeśli wprowadzasz darmową dostawę, chcesz podkreślić bezpieczeństwo transakcji, bieżące promocje czy inne elementy, zamieść moduł w widoku „Koszyk”.
• Strona główna, będąca wizytówką twojej marki, będzie idealnym miejscem dla wypisania wartości towarzyszących marce i pokazania ich graficznej reprezentacji.

Skąd wziąć ikony?

Oczywiście najlepiej mieć przygotowane unikatowe ikony charakterystyczne dla naszej marki. Niestety nie zawsze posiadamy taką możliwość. Warto zapoznać się z portalami typu flaticon.com, na których możemy pobrać darmowe ikony do użytku komercyjnego. Wystarczy, że poinformujemy na stronie, skąd zostały pobrane (częstą praktyką jest tworzenie strony informacyjnej z linkiem do witryny).

Możesz wyszukiwać wielokolorowe ikony lub ich monokolorowe wersje:

Wersje jednokolorowe są zaprezentowane na czarno, jednak po darmowej rejestracji pobierzemy je w dowolnej kolorystyce, klikając . Nie zapomnij wybrać właściwego rozmiaru. Pobierz ikony w formacie PNG, aby zachować przezroczyste tło. Dzięki temu niezależnie od koloru tła, grafiki wyświetlą się poprawnie:

Format SVG (wektorowy) będzie przydatny, jeśli chcesz dokonać większej modyfikacji ikon np. w Adobe Illustrator albo darmowym Inkscape. Programy te pozwolą na zmianę kształtu czy koloru poszczególnych elementów ikony.

Co jeszcze mogę zrobić dzięki takiemu modułowi?

Zaprezentowany przez nas sposób możesz łatwo wykorzystać do tworzenia wielu przydatnych modułów. Stworzysz dzięki temu kategorie obrazkowe na stronie głównej, tzw. boxy, czyli kontenery prezentujące obok siebie kilka banerów. Możesz je też wykorzystać, aby stworzyć bardziej zaawansowaną kartę produktu.

Dodatkowe rozwiązanie dla sklepów Shoper

Nie chcesz przygotowywać modułu samodzielnie lub potrzebujesz wyświetlać go w inny sposób? Bardzo dobrze sprawdzi się tutaj aplikacja „Info Ikony PRO”. Umożliwia użycie licznika dla ważnych licz związanych z twoim sklepem, posiada dwa tryby wyświetlania i więcej opcji niż ręcznie przygotowany moduł.

Zobacz więcej: opis aplikacji „Info Ikony PRO”