Nagłówek i stopka – nieoczywiste filary sklepu internetowego

Ostatnia aktualizacja: 17 czerwca 2024

Najbardziej niedoceniane elementy sklepu

Jeśli prowadzisz sklep internetowy, to na pewno chociaż raz spotkałeś się z nazwami takimi jak nagłówek i stopka. Mało tego – najpewniej je u siebie skonfigurowałeś. Typowa czynność do wykonania i zapomnienia – tak zapewne odbierałeś te działania. Nieczęsto jest to przedmiot głębszych rozważań. Częściowo winne temu zjawisku są… same platformy sklepowe, które w dużej mierze domyślnie predefiniują te elementy, w dużej mierze kształtując ich wygląd i zawartość na dłuższy czas.

Stąd już prosta droga do potraktowania nagłówka i stopki po macoszemu, a to duży błąd. Te elementy, gdy są odpowiednio dla danego sklepu skonfigurowane, potrafią znacząco zwiększyć sprzedaż w e-sklepie.

Przykładowa stopka dla sklepu internetowego
Rys 1. Przykład wyglądu stopki (ang. footer) w sklepie internetowym Shoper.
Przykładowa stopka dla sklepu internetowego
Rys 1. Przykład wyglądu stopki (ang. footer) w sklepie internetowym Shoper.

Rozważania na temat wpływu nagłówka i stopki na odczucia klientów należy rozpocząć od uwagi fundamentalnej – w ogromnej większości sklepów są one obecne na każdej podstronie (wyjątki stanowić mogą projekty dedykowane do niszowych rozwiązań lub branż).

Zawsze zatem jest to pierwsze koło ratunkowe dla klienta, który w sklepie po prostu się zgubił lub trafił do kategorii, z której produkty nie odpowiadają jego zainteresowaniom.

To też idealne miejsce, aby aktywnie wpływać na rozprowadzenie ruchu w sklepie. To ty możesz kreować ścieżki, jakimi klienci będą w twoim sklepie podążać. Oczywiście powinno to nakierowywać ich na twoje najbardziej atrakcyjne produkty oraz strony, które odpowiadają na ich najczęstsze pytania. Mile widziane są wszystkie inne materiały, które stanowią o twojej sile i budują twój wizerunek specjalisty.

Nagłówek sklepu – prosty czy rozbudowany?

Prostota? Czemu nie!

Nagłówek zlokalizowany jest w wizualnie kluczowym miejscu strony internetowej, tuż pod logotypem. Powinien zawierać odnośniki do najważniejszych kategorii w sklepie oraz wszelkich treści, które zwiększają atrakcyjność lub wiarygodność sklepu. Za takim ogólnym określeniem kryje się na przykład blog, jeżeli jest prowadzony, lub wszelkie treści wspomagające użytkowanie, pielęgnację, montaż czy poprawne przyrządzanie produktów.

Nagłówek nie musi być rozbudowany. Ilość i rodzaj zawartych w nim pozycji jest kwestią indywidualną, zależy od asortymentu, branży, indywidualnego podejścia. Przykładem prostego, ale świetnie spełniającego swoją rolę nagłówka jest ten ze sklepu Oblicza Domu, specjalizującego się w atrakcyjnych donicach na rośliny.

Przykład nagłówka w sklepie internetowym Shoper
Rys 2. Przykładowy wygląd sekcji nagłówka (ang. header) w ramach sklepu internetowego Shoper.
Przykład nagłówka w sklepie internetowym Shoper
Rys 2. Przykładowy wygląd sekcji nagłówka (ang. header) w ramach sklepu internetowego Shoper.

Nie jest wskazane sztuczne dodawanie elementów do nagłówka, gdy w formie prostej wychodzi on naprzeciw klientom – jasno wskazuje co i w jakich rozmiarach znajdziemy w sklepie. Pamiętajmy o roli umiejętnie wydzielonych podkategorii – to one wraz z menu nagłówka poprawnie rozprowadzą ruch w sklepie.

Przykład nawigacji main-menu w sklepie internetowym
Rys 3. Przykładowy wygląd głównego menu w ramach sklepu internetowego Shoper.
Przykład nawigacji main-menu w sklepie internetowym
Rys 3. Przykładowy wygląd głównego menu w ramach sklepu internetowego Shoper.

Mamy tutaj wariant najprostszy, zgodny z profilem sklepu – Donice klasyczne, podświetlane i ozdoby oraz promocje. Nie jest to błąd – to jest jasny, świadomy i przejrzysty nacisk na najważniejsze produkty w sklepie.

WAŻNE! Jeśli w swoim nagłówku również masz umieszczone promocje to upewnij się, że faktycznie masz je zdefiniowane w sklepie. Pusta kategoria w nagłówku (zwłaszcza mówiąca o promocjach) bardzo źle świadczy o sklepie.

Ok, co jednak, gdy twój sklep ma szerszy i bardziej zróżnicowany asortyment a branża kładzie większy nacisk na wiedzę specjalistyczną?

Zakładamy, że dzielisz się wiedzą i doświadczeniem branżowym w formie wpisów blogowych. W takim wypadku warto w nagłówku umieścić link do bloga (do listy wpisów). Oczywiście wpisy pozycjonują się w Google i to tam stanowią najważniejszy oręż, ale w sklepie również warto ułatwić klientom trafianie do nich.

Sklep Meble Magnat to kolejny dobry przykład nagłówka. Bardzo zgrabnie łączy kwestie produktowe (kategorie) z inspiracją (blog) i danymi kontaktowymi (kontakt). Dla klientów odwiedzających witrynę od razu jasne jest, że firma kładzie nacisk zarówno na sprzedaż, jak i kreowanie trendów. To zwiększa do niej zaufanie i w oczach klientów pozycjonuje ją nad konkurencją, która takich działań nie prowadzi.

Przykładowy header - nagłówek w sklepie internetowym z branży meble
Rys 4. Atrakcyjny nagłówek dla internetowego sklepu meblowego.
Przykładowy header - nagłówek w sklepie internetowym z branży meble
Rys 4. Atrakcyjny nagłówek dla internetowego sklepu meblowego.

A zakładka Kontakt? Ona nie jest konieczna do umieszczenia w nagłówku, ale jeżeli komponuje się zarówno wizualnie jak i logicznie z pozostałymi elementami, to jak najbardziej może zostać umieszczona. W Meble Magnat jej obecność ma sens – sklep kładzie nacisk na fakt, że inspiruje, edukuje w kwestii sprzedawanych produktów oraz nie unika kontaktu z ciekawymi tematyki klientami.

Rozbudowane drzewo kategorii? Też jest na nie sposób!

Sprawa z nagłówkiem komplikuje się, gdy twoje menu produktowe jest bardzo rozbudowane, a z punktu widzenia biznesowego wszystkie produkty powinny być promowane i widoczne dla klientów. W takich sytuacjach standardowe rozwiązanie, polegające na jednej linii elementów, nie wystarczy. Warto zainteresować się rozwiązaniem menu kurtynowego.

Wróćmy na chwilę do Mebli Magnat, zwróćmy uwagę na produktową część nagłówka, bardziej rozbudowaną niż w Obliczach Domu. Podział jednak polega na wydzieleniu rodzaju drewna. W menu rozwijającym się na podkategorie widzimy już natomiast podział na rodzaj mebli. Taka kategoryzacja jest też zastosowana w kategoriach obrazkowych na środku strony głównej, czym jeszcze bardziej zwiększa atrakcyjność sklepu i łatwość w znajdywaniu produktów.

Przykład jak wygląda rozbudowane menu w internetowym sklepie meblowym
Rys 5. Przykład zaawansowanego i rozbudowanego menu nawigacji w internetowym sklepie meblowym na Shoper.
Przykład jak wygląda rozbudowane menu w internetowym sklepie meblowym
Rys 5. Przykład zaawansowanego i rozbudowanego menu nawigacji w internetowym sklepie meblowym na Shoper.
Zaawansowane przedstawienie menu kategorii produktów w sklepie Shoper
Rys 6. Przykład rozbudowanej prezentacji kategorii produktów w sklepie internetowym na Shoper.
Zaawansowane przedstawienie menu kategorii produktów w sklepie Shoper
Rys 6. Przykład rozbudowanej prezentacji kategorii produktów w sklepie internetowym na Shoper.

Bardzo ciekawe menu w nagłówku obserwujemy w sklepie Marven. Dokładnie rozpisane podkategorie w formie nagłówków, pod nimi kolejne zagłębienia, graficzny element ukazujący przykładowy produkt. Konkret, estetyka i jasno określona ścieżka. Wzór godny naśladowania w przypadku rozbudowanych drzew kategorii.

Przykład zaawansowanej prezentacji menu sklepu internetowego na oprogramowaniu Shoper
Rys 7. Przykład jak może wyglądać zaawansowana nawigacja (menu) w sklepie internetowym Shoper z branży meble.
Przykład zaawansowanej prezentacji menu sklepu internetowego na oprogramowaniu Shoper
Rys 7. Przykład jak może wyglądać zaawansowana nawigacja (menu) w sklepie internetowym Shoper z branży meble.

Efekt menu kurtynowego w sklepie internetowym Shoper uzyskasz dzięki aplikacji: Mega Menu!

Zainteresowały cię kategorie produktów prezentowane w formie obrazów na stronie sklepu? Sprawdź aplikację: Kategorie obrazkowe

Stopka sklepu – podstawowy element każdego sklepu

Choć powyższe hasło wydaje się banałem, jest w pełni zgodne z prawdą. Zarówno na komputerach stacjonarnych, jak i na urządzeniach mobilnych, stopka stanowi stałą, bardzo ważną część serwisu. Nie da się jej nie zauważyć, jest obecna na każdym widoku, powinna przekazywać ważne informacje.

W odróżnieniu od nagłówka jest też bardzo elastyczna. Jak wygląda, co zawiera i jaki procent – wiele zależy od inwencji właściciela sklepu. Powinny być w nim z pewnością zawarte kluczowe informacje formalne, takie jak:

  • Regulamin sklepu;
  • Polityka prywatności;
  • Zwroty i reklamacje;
  • Informacje o formach i czasie dostaw;
  • Informacje o rodzajach płatności;
  • Strona “O nas”;
  • Strona z informacjami kontaktowymi.

Stopkę warto wykorzystać również do promocji wszystkiego, co wyróżnia sklep na tle konkurencji. Dlatego tak ważne jest, by znalazły się w niej informacje o:

  • Blogu (mimo, że umieściliśmy już go w nagłówku!);
  • E-Booku;
  • Programie lojalnościowym;
  • Galerii z zastosowaniem produktów;
  • Referencjach klientów…
  • …oraz wszystkie inne elementy, które decydują o wyjątkowości prezentowanej w sklepie oferty.

Jak powinno wyglądać stopka sklepu internetowego?

Przy graficznym projektowaniu stopki można popuścić wodzę fantazji. Nie ma jednego określonego schematu dotyczącego jej wyglądu. Możemy do tematu podejść dość skromnie, jak w shoperowym szablonie numer 38:

Widok stacjonarny:

Przykład stacjonarnej stopki w sklepie internetowym Shoper
Rys 8. Przykładowy wygląd stopki w sklepie internetowym Shoper (widok stacjonarny).
Przykład stacjonarnej stopki w sklepie internetowym Shoper
Rys 8. Przykładowy wygląd stopki w sklepie internetowym Shoper (widok stacjonarny).

Widok mobilny:

Przykład widoku mobilnego dla stopki w sklepach Shoper
Rys 9. Przykładowy wygląd stopki w mobilnej wersji sklepu internetowego Shoper.
Przykład widoku mobilnego dla stopki w sklepach Shoper
Rys 9. Przykładowy wygląd stopki w mobilnej wersji sklepu internetowego Shoper.

W gruncie rzeczy jest to jedynie estetyczne wylistowanie stron. Zwraca jednak uwagę dodanie infografik. W takim wypadku nie zapominajmy o podlinkowaniu ich do odpowiednich treści w sklepie.

Stopkę można wzbogacić o mapę dojazdu do firmy (jeśli posiadasz sklep stacjonarny) i dane kontaktowe. Taką kombinację pokazaliśmy w szablonie numer 41:

Widok stacjonarny:

Przykładowy wygląd stacjonarnej stopki w sklepie internetowym Shoper z dodaną mapą dojazdu
Rys 10. Przykład stopki stacjonarnej w sklepie Shoper z dodaną mapą dojazdu.
Przykładowy wygląd stacjonarnej stopki w sklepie internetowym Shoper z dodaną mapą dojazdu
Rys 10. Przykład stopki stacjonarnej w sklepie Shoper z dodaną mapą dojazdu.

Widok mobilny:

Przykładowy wygląd stopki w sklepach Shoper z dodaną mapą dojazdu (wersja mobilna)
Rys 11. Przykład wyglądu stopki dla mobilnej wersji sklepu Shoper z dodaną mapą dojazdu
Przykładowy wygląd stopki w sklepach Shoper z dodaną mapą dojazdu (wersja mobilna)
Rys 11. Przykład wyglądu stopki dla mobilnej wersji sklepu Shoper z dodaną mapą dojazdu

Rozwiązanie sprawdzi się w sytuacji, gdy wiesz, że produkty w sklepie wymagają konsultacji czy indywidualnego zamówienia. Kontakt z klientem jest nieunikniony, ułatwmy mu go.

Zainspirowały cię przykłady naszych szablonów? Aby poznać więcej szablonów graficznych dla sklepów Shoper, zajrzyj pod ten adres: https://www.shoper.pl/szablony-graficzne/

Nie pomijaj tematu nagłówka i stopki w sklepie internetowym!

Jak widzisz, temat nagłówka i stopki nie jest niczym skomplikowanym. Pamiętając o kilku zasadach i mając odrobinę inwencji twórczej możesz autentycznie wzbogacić sklep, przy okazji wychodząc na przeciw klientowi.

Praktyka niestety bywa kapryśna – wiele sklepów internetowych nie posiada tych elementów rozplanowanych z głową. Właściciele zasłaniają się opinią, że to szczegół, który nie wpływa na sprzedaż. Odważna i ryzykowna teza – jak zmierzyć ilu klientów przepadło nam przez złe rozprowadzenie ruchu w sklepie lub nieodpowiednie wyeksponowanie w nim ważnych danych, na przykład kontaktowych?

Działajmy, nie bójmy się inwencji, ale też nie zapominajmy o kwestiach oczywistych. W ten sposób osiągniemy w oczach klienta idealny balans między pożądanym konkretem, a mile widzianym efektem “wow”. Powodzenia!

Warto zapamiętać!
Co zostało wyjaśnione w powyższym poradniku?
  • jakie elementy dodać do nagłówka?
  • kiedy zainteresować się menu kurtynowym?
  • jakie strony informacyjne umieścić w stopce?
  • jak wzbogacić wizualnie stopkę, przy okazji pomagając klientom?


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