Sklep · Nawigacja
Mega menu w sklepie Shoper: nawigacja, która nie chowa asortymentu
Adrian Zblewski · GrowCommerce, Platynowy Partner Shoper
Aktualizacja: 3 listopada 2026
Czas czytania: ~8 min
W skrócie
Mega menu pomaga przy szerokim katalogu, ale tylko gdy nagłówek ma skróty i wyszukiwarkę, a drzewo kategorii ma max 3 poziomy. Na mobile użyj drawera zamiast kopiować 5 kolumn z desktopu. Przed Black Week usuń puste gałęzie i zmierz CLS panelu. Nawigacja pomaga w szczycie ruchu obok szerszego planu: „Przygotowanie sklepu na Black Friday”.
Spis treści
Po co sklepowi mega menu
Mega menu to rozbudowany panel nawigacji: po najechaniu lub kliknięciu kategorii widać kolumny podkategorii, czasem zdjęcia kolekcji i skróty do nowości albo promocji. W sklepie Shoper pomaga, gdy asortyment ma wiele gałęzi (moda, home, sport) i klasyczne rozwijane menu przestaje wystarczać. Źle zrobione mega menu jest jednak gorsze niż proste: zasłania produkty, skacze przy ładowaniu i na telefonie chowa cały katalog za ikoną hamburgera.
Podstawy drzewa kategorii i nawigacji zbiera przewodnik „Kategorie i nawigacja w sklepie Shoper”. Poniżej skupiamy się na mega menu: warstwach nagłówka, strukturze i błędach przed Black Week.
Trzy warstwy, które muszą współgrać
Nagłówek trzyma to, czego klient szuka w każdej sekundzie: wyszukiwarkę, konto, koszyk i kilka najważniejszych kategorii albo kolekcji. Panel mega menu rozwija resztę drzewa bez przeładowania strony. Stopka zajmuje się pomocą, zwrotami i statusem zamówienia — nie konkuruje o uwagę z zakupem.
Na telefonie panel zwykle jest drawerem. Zasada jest ta sama: nie chowaj 100% asortymentu za jedną ikoną. Zostaw skróty (np. Nowości, Promocje) i silną wyszukiwarkę. Jak poprawić discovery produktów wyszukiwarką, piszemy w „Wyszukiwarka w sklepie Shoper”.
Struktura kategorii pod panel
Mega menu nie uratuje bałaganu w kategoriach. Ułóż drzewo pod intencje klienta (max 3 poziomy), używaj etykiet z języka zakupowego i dodaj stałe wejścia: Nowości, Bestellery, Wyprzedaż. Puste gałęzie ukryj albo przekieruj — w sezonie klient, który trafia na listing bez produktów, wychodzi.
W Shoperze drzewo budujesz w panelu kategorii; wygląd panelu zależy od szablonu Storefront (np. Modern 2.0 / 3.0) i ewentualnej aplikacji mega menu z App Store. Przy wyborze dodatku sprawdź: mobile drawer, zdjęcia kolekcji, limit kolumn, wpływ na Core Web Vitals. Porównanie szablonów Storefront: „Najlepszy szablon Shoper 2026”.
Mobile i dostępność
Przyciski w drawerze muszą dać się trafić kciukiem, etykiety nie mogą być ucięte, a zamknięcie panelu działa z klawiatury i czytnika ekranu. Unikaj hover-only na desktopie bez sensownego kliknięcia — tablety tego nie lubią. Zmierz CLS przy otwarciu panelu: skaczący nagłówek psuje CWV.
Przed Black Week
Dodaj skrót do landingu kampanii, sprawdź czy wyprzedażowe kategorie nie są puste, przetestuj ścieżkę na telefonie w słabszej sieci. Aplikacje GrowX (wyszukiwarka, szybki podgląd, timer) wspierają discovery, ale nie zastąpią czytelnego menu — dobierz je z App Store GrowCommerce.
Szablon Storefront a aplikacja mega menu
Wiele szablonów Storefront (Modern 2.0 / 3.0) ma własne warianty nagłówka z rozwijanymi listami. Zanim kupisz osobną aplikację, sprawdź w Shoper Visual Editor, czy obecny szablon nie wystarczy: liczba poziomów, miejsce na zdjęcie kolekcji, zachowanie na mobile. Aplikację mega menu rozważ, gdy potrzebujesz layoutu, którego szablon nie daje (np. kafelki sezonowe, baner w panelu, osobne menu per język).
Przy instalacji dodatku z App Store przetestuj konflikt z innymi skryptami nagłówka (czat, web push, paski promo). Jeden ciężki skrypt w <header> potrafi zepsuć INP i CLS właśnie wtedy, gdy otwierasz panel. Warto zmierzyć PageSpeed na listingu przed i po.
Jeśli budujesz sklep modowy, zobacz też jak Modern 2.0 Atelier układa listing i kartę w praktyce — opis w sklepie: Modern 2.0 Atelier.
Jak sprawdzić, czy nawigacja działa
Po zmianach menu nie oceniaj tylko „czy ładnie wygląda”. Sprawdź w analytics ścieżki: wejście → kategoria → produkt → koszyk. Jeśli po przebudowie rośnie wyjście z listingu albo spada użycie wyszukiwarki, panel może być zbyt gęsty. Na hotjarze / nagraniach sesji zobaczysz, czy klienci błądzą po hamburgerze.
W Search Console patrz na strony kategorii z rosnącym wrażeniem i spadkiem CTR — czasem etykieta w menu nie pokrywa się z title strony. Ujednolicenie nazw (menu = H1 kategorii) pomaga i UX, i SEO.
Checklista mega menu
- 4–7 skrótów kategorii/kolekcji poza hamburgerem
- Wyszukiwarka zawsze widoczna w nagłówku (desktop i mobile)
- Drzewo max 3 poziomy, etykiety po ludzku
- Puste gałęzie ukryte lub z 301
- Drawer przetestowany kciukiem + zamknięcie z klawiatury
- CLS przy otwarciu panelu sprawdzony przed sezonem
Najczęstsze pytania
Czym mega menu różni się od zwykłego menu?
Mega menu pokazuje od razu wiele podkategorii (kolumny, czasem zdjęcia), zamiast wąskiej listy. Ma sens przy szerokim asortymencie; przy 5 kategoriach zwykle wystarczy prosty nagłówek.
Czy mega menu jest konieczne na Shoperze?
Nie. Najpierw uporządkuj kategorie i wyszukiwarkę. Mega menu dodajesz, gdy klient gubi się w drzewie albo gdy szablon/aplikacja realnie ułatwia skanowanie kolekcji.
Czy na mobile też robić mega menu?
Na mobile zwykle drawer z jasną hierarchią i skrótami. Unikaj przenoszenia 5-kolumnowego desktopowego panelu 1:1 na telefon.
Jak mega menu wpływa na SEO?
Pośrednio: lepsza nawigacja = lepsze crawl paths i niższy bounce z listingu. Sam panel nie zastąpi opisów kategorii ani szybkości strony.
Czy dokupować osobną aplikację mega menu?
Jeśli szablon nie daje kolumn i zdjęć kolekcji, a asortyment tego wymaga — tak, po teście na stagingu. Sprawdź mobile, CWV i konflikt z innymi skryptami nagłówka.
Od 8 lat projektujemy sklepy i aplikacje GrowX na Shoperze. Ten poradnik zbiera praktykę z wdrożeń nawigacji Storefront (stan na 3.11.2026).