Jak zaprezentować wyróżniki marki w sklepie Shoper?

Ostatnia aktualizacja: 17 czerwca 2024

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ć klientom co wyróżnia twoją markę?

W artykule: „Jak wyróżnić sklep internetowy?opisaliśmy, jak można zastanowić się nad prezentacją wyróżników sklepu w formie graficznej. W artykule podaliśmy 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 poniższe przykłady:

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, czyli zachętą do kontaktu.

Przykład wykorzystania grafik z krótkimi opisami na stronach sklepu.
Rys 1. Przykład wyróżników sklepów zaprezentowanych w formie graficznej.
Przykład wykorzystania grafik z krótkimi opisami na stronach sklepu.
Rys 1. Przykład wyróżników sklepów zaprezentowanych w formie graficznej.

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.

Przykładowe graficzne wyróżniki sklepu
Rys 2. Przykład graficznych wyróżników sklepu: darmowa dostawa, profesjonalne doradztwo.
Przykładowe graficzne wyróżniki sklepu
Rys 2. Przykład graficznych wyróżników sklepu: darmowa dostawa, profesjonalne doradztwo.

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.

Przykładowe wyróżniki w formie starannie wykonanych ikon graficznych.
Rys 3. Przykład starannie wykonanych graficznych wyróżników sklepu (ikony).
Przykładowe wyróżniki w formie starannie wykonanych ikon graficznych.
Rys 3. Przykład starannie wykonanych graficznych wyróżników sklepu (ikony).

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

Przykładowe ikony graficzne, które są niezależne od branży.
Rys 4. Przykład wyróżników graficznych niezależnych od branży.
Przykładowe ikony graficzne, które są niezależne od branży.
Rys 4. Przykład wyróżników graficznych niezależnych od branży.

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.

Przykładowe ikony graficzne spełniające dodatkowe walory estetyczne.
Rys 5. Przykład wyróżników graficznych sklep, które pełnią dodatkowe walory estetyczne.
Przykładowe ikony graficzne spełniające dodatkowe walory estetyczne.
Rys 5. Przykład wyróżników graficznych sklep, które pełnią dodatkowe walory estetyczne.

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

Jeśli prowadzisz sklep na platformie Shoper, to możesz wykorzystać układ modułowy sklepu oraz fakt, że szablony graficzne Shoper bazują na tzw. gridzie – czyli systemie responsywnych kolumn i wierszy. To bardzo przydatna cechha 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 sklepu przejdź do sekcji menu: Ustawienia > Zaawansowane > Bezpieczeńśtwo i upewnij się, że masz takie samo ustawienie jak poniżej:

Opcja czyszczenia kodu HTML dostępna w Panelu administracyjnym sklepu Shoper
Rys 6. W Panelu administracyjnym sklepu Shoper możesz wyłączyć czyszczenie kodu HTML.
Opcja czyszczenia kodu HTML dostępna w Panelu administracyjnym sklepu Shoper
Rys 6. W Panelu administracyjnym sklepu 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 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 instrukcji krok po kroku zaprezentowanej poniżej.

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

Przykład uzupełnienia opisu obrazka oraz usunięcie parametru jego szerokości
Rys 7. Podczas wstawiania lub edycji obrazka, uzupełnij: Opis obrazka oraz usuń parametr szerokości.
Przykład uzupełnienia opisu obrazka oraz usunięcie parametru jego szerokości
Rys 7. Podczas wstawiania lub edycji obrazka, uzupełnij: Opis obrazka oraz usuń parametr szerokości.
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.
Jak dodać nagłówek H w edytorze tekstu sklepu Shoper?
Rys 8. Przykład dodania nagłówka H przy użyciu edytora tekstu w sklepie Shoper.
Jak dodać nagłówek H w edytorze tekstu sklepu Shoper?
Rys 8. Przykład dodania nagłówka H przy użyciu edytora tekstu w sklepie Shoper.
Wciśnij enter po raz kolejny i zamieść pod nagłówkiem krótki opis zaprezentowanej korzyści.
Ponownie dodaj linijkę odstępu i powtórz proces tyle razy, ile ikon chcesz zamieścić, np. trzy razy.
Przykład dodanie ikon w trzech rzędach (pionowo)
Rys 9. Przykład wyświetlania ikon graficznych w orientacji pionowej na stronie sklepu.
Przykład dodanie ikon w trzech rzędach (pionowo)
Rys 9. Przykład wyświetlania ikon graficznych w orientacji pionowej na stronie sklepu.
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:
Przykładowy schemat kolumn w szablonie sklepu Shoper
Rys 10. Przykład rozkładu kolumn, z których zbudowany jest szablon sklepu Shoper.
Przykładowy schemat kolumn w szablonie sklepu Shoper
Rys 10. Przykład rozkładu kolumn, z których zbudowany jest szablon sklepu 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:

Zaznaczamy kod i kopiujemy go do schowka.

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:
Wklej na samej górze skopiowany kod wyświetlający trzy kolumny.
Rys 12. W kodzie HTML wklej na samej górze kod odpowiadający za wstawienie trzech kolumn.
Wklej na samej górze skopiowany kod wyświetlający trzy kolumny.
Rys 12. W kodzie HTML wklej na samej górze kod odpowiadający za wstawienie trzech kolumn.
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”. Następnie klikamy: ctrl + a, aby zaznaczyć wszystko w module. Klikamy „wyśrodkuj”, aby całość estetycznie się wyświetlała.

Na końcu kliknij przycisk: Zapisz, aby zapisać wprowadzone zmiany w module.

Wstawiamy moduł ikon do sklepu Shoper

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.

W Panelu administracyjnym sklepu przejdź do sekcji menu: Szczegóły produktów i z listy dostępnych modułów przeciągamy metodą „drag and drop” utworzony moduł i upuszczamy go w odpowiednim miejscu.

Następnie kliknij przycisk: Zapisz. Oczywiście możemy je też wykorzystać w każdym innym widoku. Warto to zrobić, np. na stronie głównej.

Jak umieścić moduł w wybrane miejsce szablonu sklepu Shoper?
Rys 14. W sekcji: Dostępne moduły kliknij i przeciągnij moduł: Ikony informacyjne w wybrane miejsce.
Jak umieścić moduł w wybrane miejsce szablonu sklepu Shoper?
Rys 14. W sekcji: Dostępne moduły kliknij i przeciągnij moduł: Ikony informacyjne w wybrane miejsce.

Finalnie na sklepie nowy moduł będzie wyglądać następująco:

Przykład wyglądu umieszczonego modułu z ikonami informacyjnymi
Rys 15. Przykładowy wygląd modułu ikony informacyjne na stronie sklepu.
Przykład wyglądu umieszczonego modułu z ikonami informacyjnymi
Rys 15. Przykładowy wygląd modułu ikony informacyjne na stronie sklepu.

Na widoku mobilnym sklepu, ikony znajdujące się w nowym module zostaną wyświetlone 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:

Przykład marginesów na ikonie graficznej.
Rys 16. Przykładowe marginesy przy ikonie graficznej.
Przykład marginesów na ikonie graficznej.
Rys 16. Przykładowe marginesy przy ikonie graficznej.

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 pobrać ikony na potrzeby modułu?

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 ikonę długopisu.

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ę aplikacja: Info Ikony PRO, która umożliwia użycie licznika dla ważnych liczb związanych z twoim sklepem, posiada dwa tryby wyświetlania i więcej opcji niż ręcznie przygotowany moduł.

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