Storefront · Układ

Strona główna sklepu Shoper: sekcje, kolejność i układ

Adrian Zblewski · GrowCommerce, Platynowy Partner Shoper Aktualizacja: 8 listopada 2026 Czas czytania: ~8 min

Do czego służy strona główna sklepu na Shoperze

Strona główna rzadko jest pierwszą stroną, na którą trafia klient z Google — częściej ląduje on na karcie produktu albo w kategorii. Mimo to wraca na nią, kiedy chce sprawdzić, czy to w ogóle porządny sklep, zobaczyć aktualne promocje albo szybko przejść do innej kategorii. Dlatego dobra strona główna ma trzy zadania: pokazać, co sprzedajesz, skrócić drogę do produktu i zdjąć obawy przed pierwszym zakupem.

W szablonach Storefront stronę główną budujesz z modułów ułożonych w siatce sekcji, wierszy i kolumn. To daje dużą swobodę — i równie łatwo przeładować stronę slajderami, licznikami i trzema rzędami „polecanych”. Ten poradnik porządkuje kolejność sekcji i pokazuje, jak ją ułożyć w edytorze.

Wybór szablonu, od którego zaczyna się układ: „Jak wybrać szablon Shoper”. Porównanie technologii: „Shoper RWD vs Storefront”.

Jaka kolejność sekcji sprawdza się na stronie głównej?

Nagłówek to logo, wyszukiwarka, menu kategorii i koszyk. Przy większym katalogu wyszukiwarka powinna być widoczna od razu, także na telefonie. Szczegóły: „Wyszukiwarka w sklepie Shoper” i „Mega menu i nawigacja”.

Hero (baner główny) niesie jedną obietnicę i jedno wezwanie do działania: aktualną kampanię, nową kolekcję albo najważniejszą kategorię. Kilka slajdów zmieniających się automatycznie zwykle oznacza, że klient zobaczy tylko pierwszy — więc lepiej świadomie wybrać ten jeden.

Kafle kategorii pomagają osobom, które nie wpisują frazy w wyszukiwarkę. Pokaż główne kategorie z czytelnym zdjęciem i nazwą zgodną z menu. Jak zaplanować drzewo: „Kategorie i nawigacja w sklepie Shoper”.

Produkty — bestsellery, nowości, promocje. Wybierz dwa rzędy, które mają sens w Twojej branży, zamiast czterech podobnych. W sklepie modowym nowości pracują inaczej niż w sklepie z częściami, gdzie klient szuka konkretnego numeru.

Zaufanie — pasek z kosztami i czasem dostawy, zwrotami, metodami płatności i opiniami. To odpowiedzi na pytania, które zatrzymują pierwszy zakup. Koszty wysyłki opisaliśmy w „Koszty dostawy i darmowa dostawa”, a opinie w „Opinie i recenzje w sklepie Shoper”.

Treść — krótko o marce, poradniki, wpisy z bloga. Tekst opisowy umieszczaj pod produktami: pomaga wyszukiwarce zrozumieć sklep, a nie zasłania oferty. Zapis i stopka zamykają stronę: formularz newslettera z jasną korzyścią, kontakt, regulamin i polityka prywatności. Jak zbierać zapisy bez psucia UX, opisujemy w bazie GrowMail: formularze zapisu i pop-up.

Jak ułożyć stronę główną w edytorze Storefront

Ścieżka w panelu: Wygląd i treści → Wygląd sklepu → Edycja szablonu graficznego → Edytuj układ i styl szablonu. W edytorze z listy stron wybierz stronę główną. Układ składa się z sekcji, w nich wierszy, a w wierszach kolumn — do kolumn przeciągasz moduły.

Po kliknięciu Dodaj zobaczysz bibliotekę modułów podzieloną na grupy: Blog, Kontakt, Nagłówek i nawigacja, Prezentacja produktów, Treści i media oraz Inne. Lista „Twoje moduły” pokazuje moduły już użyte na stronie. Każdej sekcji możesz nadać nazwę (ułatwia pracę przy rozbudowanym układzie), ustawić tło, marginesy i szerokość, a także widoczność na urządzeniach: telefon, tablet, laptop i desktop. Zmiany trafiają do sklepu po kliknięciu Opublikuj.

Widoczność na urządzeniach to narzędzie, nie obowiązek. Ukrycie na telefonie sekcji, która dubluje menu, skraca przewijanie; ukrycie na telefonie paska z dostawą i zwrotami zwykle szkodzi, bo to tam klient najczęściej waha się przed zakupem. Szybkość ładowania rozbudowanej strony głównej sprawdzisz według „Core Web Vitals w sklepie Shoper” i „Jak przyspieszyć sklep Shoper”.

Gotowy układ z szablonu zamiast budowy od zera

Szablon wyznacza punkt startu: gotowe sekcje, typografię i proporcje zdjęć. Zanim kupisz szablon, przejdź jego demo na telefonie i sprawdź, czy strona główna ma sekcje, których potrzebujesz (kafle kategorii, pasek zaufania, wpisy z bloga). Szablony Modern opisujemy na stronie szablonów GrowCommerce; branżowe przykłady znajdziesz w „Szablon Shoper dla mody” i „Szablon Shoper dla elektroniki i AGD”.

Strona główna a SEO

Strona główna zwykle zbiera najwięcej linków zewnętrznych, więc przekazuje autorytet dalej — przez linki do kategorii i wybranych produktów. Zadbaj o trzy rzeczy: jeden nagłówek H1 opisujący sklep (nie slogan bez kontekstu), unikalny tytuł i opis strony w ustawieniach SEO oraz krótki tekst o ofercie pod produktami. Nie upychaj w nim listy fraz — pisz tak, jak odpowiedziałbyś klientowi na pytanie „co tu kupię?”. Szerzej: „SEO sklepu Shoper” i „Blog firmowy jako kanał SEO”.

Sekcje z opiniami możesz zasilać realnymi recenzjami z zakupów — aplikacja GrowReview zbiera opinie po zamówieniu i wyświetla je w sklepie. Pozostałe dodatki rodziny GrowX znajdziesz w App Store GrowCommerce.

Checklista strony głównej

• Nagłówek: logo, widoczna wyszukiwarka, menu kategorii, koszyk — także na telefonie
• Hero: jedna obietnica i jedno CTA, aktualne względem kampanii
• Kafle głównych kategorii z nazwami zgodnymi z menu
• Najwyżej dwa rzędy produktów (np. bestsellery i nowości) z realnych danych
• Pasek zaufania: dostawa, zwroty, płatności, opinie — widoczny na telefonie
• Krótki tekst o sklepie pod produktami i jeden H1
• Newsletter z jasną korzyścią zapisu i informacją o zgodzie
• Podgląd każdej sekcji na telefonie, tablecie, laptopie i desktopie przed publikacją

Podsumowanie

Dobra strona główna na Shoperze nie musi być długa. Nagłówek z wyszukiwarką, jedno hero, kategorie, dwa rzędy produktów, pasek zaufania, krótka treść i zapis na newsletter pokrywają to, czego szuka większość klientów. W Storefront ułożysz to z sekcji i modułów bez programisty — a po każdej zmianie sprawdź wersję mobilną i szybkość strony.

Najczęstsze pytania

Adrian Zblewski

GrowCommerce — Platynowy Partner Shoper

Od 8 lat projektujemy sklepy i szablony na Shoperze. Ten wpis porządkuje układ strony głównej w Storefront (stan 8.11.2026).

Wszystkie wpisy autora