Sklep Shoper – jak zaprezentować wyróżniki marki?

Grafika – średniozaawansowany
Grafika | 9 minut

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:

 

twojemeble.pl – przykład ikon
Znany sklep internetowy twojemeble.pl w swojej komunikacji na stronie głównej czy stronach informacyjnych często stosuje grafiki z krótkimi opisami. Idąc od góry, zobaczysz: informację mającą na celu uzasadnienie autorytetu, social proof (społeczny dowód słuszności), wyróżnik będący jednocześnie wezwaniem do działania – zachętą do kontaktu.

 

Bielizna Dla Ciebie - przykład ikon
Sklep bieliznadlaciebie-sklep.pl informuje o swoim profesjonalizmie, doświadczeniu i dwóch istotnych wyróżnikach – darmowej dostawie od określonej kwoty oraz możliwości zapakowania zamówienia na prezent.

 

dwfurniture - przykład ikon
Dwfurniture.pl to młody sklep internetowy świadomy swoich wyróżników. Krążą one przede wszystkim wokół unikatowości produktu i wysokiej jakości wykonania.

 

wpc24
Ikony informacyjne możesz wykorzystać jako wyróżniki niezależnie od branży. Powyżej przykład ze sklepu wpc24.pl oferującego tusze i tonery.

 

toysstore.pl - przykład ikon
Jeżeli zachęcić do zakupu i nie być jak marka typu „no-name”, możesz śmiało wyróżnić nawet proste elementy typu bezpieczeństwo transakcji, czas na zwrot czy wygoda zakupu. Mogą być dodatkowym walorem estetycznym, który także przypomina klientowi: jesteśmy uczciwym sklepem, który dba o swoich klientów. Powyższy przykład pochodzi ze sklepu zabawkowego toysstore.pl.

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.

 

ikona: uwagaUwaga: 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.

 

ikona: uwagaUwaga: 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 Konfiguracja > Administracja, system > Bezpieczeństwo i upewnij się, że masz takie samo ustawienie jak poniżej:

 

wyłącz czyszczenie kodu HTML - Shoper

 

Przejdź do Styl graficzny & Nawigacja > Aktywny styl graficzny > Moduły > + dodaj moduł

W polu tytuł 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).

 

wstawianie ikony - Shoper

 

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.

 

zamieszczanie nagłówków – Shoper

 

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.

 

info-ikony - przykład mobile

 

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:

 

grid Shoper

 

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:

 

kod gridu Shoper

 

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:

 

kod ikon informacyjnych

 

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

 

przeniesienie kodu ikon informacyjnych

 

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

 

umieszczenie modułu ikon w sklepie Shoper

 

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

 

info-ikony przykład

 

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:

marginesy obrazka

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:

flaticon monocolor

Wersje jednokolorowe są zaprezentowane na czarno, jednak po darmowej rejestracji pobierzemy je w dowolnej kolorystyce, klikając flaticon wybór koloru. 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:

flaticon PNG 128px

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.