Mega Menu dla PrestaShop: jak ułatwić przeglądanie kategorii

Wyobraź sobie najczęstszą ścieżkę klienta w sklepie PrestaShop z rozbudowanym katalogiem. Odwiedzający trafia na stronę główną, najeżdża kursorem na „Produkty”, czeka na listę rozwijaną, najeżdża na kategorię najwyższego poziomu, czeka na wysuwane podmenu, najeżdża na podkategorię i dopiero wtedy klika, aby przejść do listy produktów. Trzy momenty typu „najedź i poczekaj”, żeby dotrzeć do jednej strony — a w menu wysuwanym wystarczy przesunąć kursor o jeden piksel poza kolumnę, żeby całość się zamknęła i trzeba było zaczynać od nowa. Mega menu zastępuje to jednym szerokim panelem, który pokazuje całe drzewo kategorii naraz: kategorie najwyższego poziomu jako nagłówki, ich podkategorie ułożone pod spodem w kolumnach, wszystko widoczne jednym rzutem oka. Odwiedzający przestaje przekopywać się przez zagnieżdżone poziomy i od razu klika tam, gdzie chce trafić.

Ten poradnik dotyczy właśnie tego zadania — sprawienia, by głęboki katalog PrestaShop dało się wygodnie przeglądać: gdzie kończą się możliwości domyślnego menu, jak mega menu łączy się z rzeczywistym drzewem kategorii, co warto w nim pokazać, co pominąć i jak musi działać na telefonie. Jeśli pytanie brzmi raczej „jaka struktura menu faktycznie prowadzi ludzi do zakupu”, to jest osobny problem i omawiamy go w tekście Mega menu PrestaShop: budowanie nawigacji, która konwertuje. Tutaj skupiamy się na odnajdywaniu produktów — na tym, żeby sklep z 30 kategoriami i 200 produktami wydawał się prosty.

Ostatnia aktualizacja: czerwiec 2026.

Co PrestaShop daje od razu — i gdzie kończą się te możliwości

Domyślny motyw PrestaShop (classic) obsługuje nawigację przez moduł ps_mainmenu — „Menu główne” na liście modułów, renderowany przez hook displayTop. Domyślnie tworzy on poziomy pasek kategorii najwyższego poziomu z prostymi, opartymi na CSS wysuwanymi podmenu. Konfigurujesz go w sekcji Moduły → ps_mainmenu → Konfiguruj, gdzie zaznaczasz, które kategorie, strony CMS i własne linki mają się pojawić, a następnie przeciągasz je w odpowiedniej kolejności.

Dla sklepu z ośmioma czy dziesięcioma kategoriami ps_mainmenu naprawdę wystarcza — nie warto wymieniać czegoś, co działa. Problem zaczyna się wtedy, gdy katalog staje się szeroki albo głęboki. Wysuwane podmenu wygodnie pokazują właściwie tylko dwa poziomy; trzeci poziom oznacza kolejne podmenu wysuwane z boku, czyli jedną z najbardziej frustrujących interakcji w nawigacji webowej, bo ścieżka kursora do niego prowadzi przez „martwą” przestrzeń i menu zatrzaskuje się przed kliknięciem. Nie ma miejsca na blok promocyjny „Wyprzedaż”, miniatury kategorii ani prosty sposób, by pokazać klientowi, że „Łazienka” zawiera zarówno „Prysznice”, jak i „Odpływy”, zanim ten najpierw wykona hover. Mega menu istnieje po to, aby podnieść ten limit: zamiast odsłaniać po jednej gałęzi naraz, otwiera panel, który pokazuje całą gałąź — albo kilka — rozłożoną płasko.

Dlaczego mega menu ułatwia przeglądanie dużego katalogu

Korzyść nie polega na tym, że „wygląda nowocześnie”. Chodzi o to, że płaski panel pokazujący wszystko naraz zmienia to, co odwiedzający może zrobić:

• Mniej kliknięć do głębokich treści. Podkategoria, do której wcześniej prowadziły trzy najechania kursorem, jest teraz dostępna jednym kliknięciem, bo pojawia się na ekranie od razu po otwarciu panelu. Co z tego wynika? Mniej kroków między wejściem do sklepu a listą produktów oznacza mniej osób, które rezygnują w połowie szukania.
• Pasywne odkrywanie oferty. Wysuwane menu pokazuje tylko gałąź, na którą właśnie najeżdżasz. Mega menu pokazuje także sąsiednie gałęzie — klient, który przyszedł po „Prysznice”, widzi „Zestawy do łazienek bezbrodzikowych” w następnej kolumnie i klika je, mimo że ich nie szukał. To część katalogu, którą wcześniej ukrywałeś za hoverem.
• Struktura widoczna od razu. Kolumny i nagłówki w pierwszej sekundzie pokazują odwiedzającemu, jak zorganizowany jest sklep, zanim kliknie cokolwiek. Przy szerokim katalogu pytanie „jak ten sklep jest ułożony?” decyduje o tym, czy ktoś zacznie przeglądać, czy opuści stronę.
• Linkowanie wewnętrzne, z którego Google faktycznie może skorzystać. Jeśli menu jest zbudowane z prawdziwych linków <a href> (więcej o tym niżej), każda strona w sklepie linkuje teraz do kluczowych stron kategorii — a to pomaga Google je znaleźć i właściwie ocenić ich wagę. Strukturalną stronę tego tematu omawiamy w tekście Struktura kategorii PrestaShop: nawigacja zoptymalizowana pod SEO.

Jak mega menu łączy się z drzewem kategorii PrestaShop

To właśnie tutaj dobre mega menu zasługuje na swoje miejsce, a złe staje się podatkiem od utrzymania. Panel można wypełnić na dwa sposoby, a różnica ma znaczenie za każdym razem, gdy dotykasz katalogu.

Ręcznie zbudowane menu traktuje każdą pozycję jako statyczną treść wpisaną ręcznie. Dodasz kategorię w Katalog → Kategorie, zmienisz jej nazwę albo kolejność, a menu tego nie zauważy — musisz wrócić i poprawić je ręcznie. W sklepie, który sezonowo reorganizuje ofertę, taki rozjazd kończy się menu prowadzącym do kategorii usuniętej w marcu.

Menu oparte na drzewie kategorii odczytuje żywą strukturę kategorii PrestaShop (obiekty Category pod wybranym korzeniem, z uwzględnieniem flagi Displayed i pozycji każdej kategorii) i ją renderuje. Dodasz albo zmienisz nazwę kategorii w panelu administracyjnym, a menu pokaże tę zmianę przy następnym ładowaniu strony — bez drugiej edycji. Co z tego wynika? Nawigacja nie może po cichu rozjechać się z katalogiem, czyli odpada scenariusz, który kosztuje Cię sprzedaż wtedy, gdy klient klika pozycję menu kończącą się błędem 404.

Niezależnie od wybranej metody zakotwicz menu we właściwym korzeniu. Hierarchia kategorii PrestaShop wychodzi z ukrytej kategorii Root, pod którą znajduje się Home; niemal zawsze chcesz, aby menu zaczynało się od dzieci kategorii Home, a nie od Root, bo inaczej pokażesz gałęzie systemowe, których kupujący nie powinien widzieć.

Zasady projektowania, które decydują, czy menu pomaga, czy przeszkadza

Nie wlewaj do niego całej mapy strony

Mega menu z 200 linkami jest gorsze niż lista rozwijana, którą zastąpiło — to ściana, a ścianę się omija wzrokiem, nie czyta. Praktyczna zasada: pokaż kategorie najwyższego poziomu i ich ważne podkategorie, a resztę pozwól ludziom zgłębiać już ze stron kategorii. Jeśli gałąź jest tak głęboka, że się nie mieści, to znak, że drzewo kategorii jest zbyt głębokie, a nie że menu potrzebuje kolejnych kolumn. Przycinanie tej strony katalogu omawiamy w tekście nawigacja zoptymalizowana pod SEO.

Nadaj mu wyraźną hierarchię wizualną

Kategorie najwyższego poziomu powinny wyglądać jak nagłówki — mocniejszy krój, nieco większy rozmiar — a ich podkategorie jak prosta lista pod spodem. Grupuj powiązane podkategorie w tej samej kolumnie, aby wzrok skanował temat od góry do dołu, zanim przejdzie dalej. Cały sens płaskiego układu polega na czytelności; płaski panel bez hierarchii typograficznej to tylko gęstsza ściana.

Używaj obrazów oszczędnie i wiedz, ile kosztują

Mała miniatura albo ikona obok kategorii naprawdę pomaga w rozpoznawaniu oferty w branżach wizualnych — moda, wystrój wnętrz, wszystko, co kupuje się częściowo oczami. Ale każdy obraz w panelu to żądanie, które przeglądarka może pobrać, a menu wypchane miniaturami wygląda chaotycznie i może spowalniać ładowanie. Zarezerwuj obrazy dla kilku flagowych kategorii albo pojedynczego bloku promocyjnego, nie dla każdego wiersza. Jeśli pokazujesz kafelek „Wyprzedaż” albo „Nowości”, to właśnie tam baner wykonuje swoją pracę.

Bloki promocyjne mają tu miejsce — ale z umiarem

Wolna przestrzeń w panelu mega menu to naturalne miejsce na kafelek „Nowości” albo sezonowy baner, bo klient jest już w trybie nawigacji i myśli: „dokąd mam iść?”. Jeden blok promocyjny na panel przyciąga uwagę; trzy zaczynają konkurować z nawigacją, dla której to menu zostało zbudowane.

Mobile nie jest dodatkiem — to większość Twojego ruchu

Mega menu, z definicji, nie istnieje na telefonie. Na ekranie dotykowym nie ma hovera, a szeroki panel z wieloma kolumnami nie zmieści się w pionowym widoku. Liczy się więc tylko to, w co menu zamienia się na urządzeniach mobilnych — a w większości sklepów mobile odpowiada dziś za większość sesji, więc właśnie tę wersję widzi większa część klientów. Mechanika sklepu projektowanego najpierw pod telefon to osobny temat: mobile commerce — Twój sklep na telefonie.

Sprawdza się wzorzec zwijanego akordeonu za ikoną hamburgera: dotknięcie kategorii najwyższego poziomu rozwija jej dzieci w tym samym miejscu, ponowne dotknięcie je zwija, a obok zawsze istnieje bezpośredni link „zobacz całą kategorię”, żeby dotknięcie rodzica nie było przechwytywane wyłącznie przez przełącznik rozwijania. Przetestuj to na prawdziwym urządzeniu, nie tylko w zmniejszonym oknie desktopowym — błąd, którego szukasz, to kategoria nadrzędna, którą da się tylko rozwinąć, ale której nie da się faktycznie odwiedzić, przez co klienci zostają w sklepie, po którym nie potrafią się poruszać.

Zasady SEO i crawlability, których nie można pominąć

Mega menu linkuje z każdej strony do stron kategorii, co zasadniczo dobrze wpływa na to, jak Google odkrywa i ocenia Twoją strukturę. Trzy rzeczy mogą zamienić tę korzyść w problem:

• Renderuj prawdziwe linki HTML. Nawigacja zbudowana wyłącznie w JavaScript, która wstrzykuje linki po załadowaniu strony, to zakład o to, czy roboty ją wykonają. Standardowe elementy <a href> w źródle strony nie są zakładem. Jeśli menu działa tylko przez JS, możesz ukrywać strukturę kategorii przed tym crawlerem, którego miało ono karmić.
• Pisz teksty linków, które coś znaczą. „Odpływy ze stali nierdzewnej” mówi kupującemu i Google, co znajduje się po drugiej stronie linku; „Kategoria 7” nie mówi nic żadnej ze stron. Menu oparte na drzewie kategorii automatycznie dziedziczy tutaj nazwy kategorii — to kolejny powód, aby dobrze nazywać kategorie od samego początku.
• Nie rozcieńczaj wartości, linkując wszystko. Menu, które z każdej strony linkuje do wszystkich 200 kategorii, zbyt mocno rozprasza link equity. Pokaż kategorie, które generują pieniądze; do długiego ogona pozwól dojść ze stron kategorii. To nawigacyjne odbicie zasady „nie wrzucaj do menu całej mapy strony” z góry.

Jak sprawdzić, czy to naprawdę zadziałało

Nie oceniaj zmiany nawigacji na wyczucie i nie oceniaj jej po trzech dniach danych. Zanim przełączysz menu, zapisz cztery liczby z analityki; kiedy nowe menu będzie aktywne przez co najmniej 30 dni i przy sensownej liczbie zamówień, porównaj te same cztery wartości:

• Strony na sesję — powinny wzrosnąć, bo płaski panel pokazuje kategorie, do których ludzie wcześniej nigdy nie dochodzili hoverem.
• Współczynnik odrzuceń stron kategorii — powinien spaść, gdy odwiedzający szybciej trafiają do właściwej kategorii, zamiast do najbliższej, ale błędnej.
• Użycie wyszukiwarki wewnętrznej — spadek często jest dobrym sygnałem: ludzie znajdują produkty przez przeglądanie, zamiast ratować się polem wyszukiwania. (Jeśli wyszukiwarka wykonuje ciężką pracę, bo katalog jest naprawdę zbyt duży, by poruszać się po nim nawigacją, to jest problem wyszukiwania — zobacz smart search for PrestaShop.)
• Wzorce kliknięć w menu — narzędzie z mapą cieplną, takie jak Microsoft Clarity, pokaże, które pozycje menu faktycznie są klikane, dzięki czemu możesz promować zwycięzców i przycinać martwe kolumny.

Przeglądanie i filtrowanie zaczynają się też nakładać, gdy klient jest już wewnątrz dużej kategorii — to osobna dźwignia opisana w tekstach filter revolution: wyszukiwanie produktów w dużych katalogach oraz strony kategorii, które konwertują. Praca mega menu kończy się na drzwiach kategorii; tamte elementy odpowiadają za to, co dzieje się dalej.

Jak zrobić to bez forkowania motywu

Praktyczny problem z mega menu jest tym, na co sprzedawcy szybko trafiają: ręczne zbudowanie wielokolumnowego panelu połączonego z drzewem kategorii i dobrze degradującego się na urządzeniach mobilnych oznacza edycję szablonów motywu oraz CSS, a edycje motywu są tym, co psuje się przy następnej aktualizacji. Nasz moduł Mega Menu omija ten problem. Odczytuje żywe drzewo kategorii PrestaShop, więc panel pozostaje zsynchronizowany, gdy dodajesz i reorganizujesz kategorie, układa je za pomocą kreatora kolumn i bloków treści typu drag-and-drop, pozwala dodać banery promocyjne albo wyróżnione produkty w wolnej przestrzeni i samodzielnie przechodzi na mobilny akordeon — wszystko konfigurowane z panelu administracyjnego i podpięte do standardowej pozycji nawigacji, bez łatania plików motywu. Co to realnie daje? Czytelną, płaską nawigację opisaną wyżej bez faktury od programisty i bez menu, które po cichu starzeje się przy każdej zmianie katalogu, bo podąża za kategoriami, a nie za ich ręcznie utrzymywaną kopią.

Najczęściej zadawane pytania

Czy w ogóle potrzebuję mega menu, czy domyślne ps_mainmenu wystarczy?

Jeśli Twój sklep ma osiem albo dziesięć kategorii, domyślny moduł ps_mainmenu naprawdę wystarcza — nie warto wymieniać czegoś, co działa. Mega menu zaczyna zarabiać na swoje miejsce, gdy katalog staje się szeroki albo głęboki: domyślne wysuwane podmenu wygodnie pokazują tylko dwa poziomy, a trzeci poziom oznacza podmenu wysuwane z boku, czyli jedną z najbardziej frustrujących interakcji w nawigacji webowej, bo ścieżka kursora przecina martwą przestrzeń i menu się zatrzaskuje. Sięgnij po mega menu wtedy, gdy na pytanie „jak ten sklep jest ułożony?” nie da się już odpowiedzieć jednym rzutem oka.

Czy menu pozostanie zsynchronizowane, gdy dodam albo zmienię nazwy kategorii?

Tylko jeśli jest oparte na drzewie kategorii, a nie zbudowane ręcznie. Ręczne menu traktuje każdą pozycję jako statyczny tekst wpisany przez Ciebie, więc dodanie, zmiana nazwy albo kolejności kategorii w Katalog → Kategorie sprawia, że menu pozostaje nieaktualne, dopóki nie poprawisz go ręcznie — właśnie tak kończy się z linkiem do kategorii usuniętej w marcu. Menu oparte na drzewie kategorii odczytuje żywą strukturę (z uwzględnieniem flagi Displayed i pozycji każdej kategorii) i pokazuje zmiany przy następnym ładowaniu strony, więc nawigacja nie może po cichu rozjechać się z katalogiem.

Czy mega menu pomaga SEO, czy mu szkodzi?

Pomaga, gdy jest zbudowane poprawnie, i szkodzi, gdy jest zrobione niedbale. Renderuj w źródle strony prawdziwe linki <a href>, a nie JavaScript, który wstrzykuje je po załadowaniu — menu działające tylko przez JS to zakład o to, czy roboty je wykonają, i możesz ukrywać dokładnie tę strukturę kategorii, którą menu miało pokazać. Pisz sensowne teksty linków („Odpływy ze stali nierdzewnej”, nie „Kategoria 7”). I nie linkuj wszystkich 200 kategorii z każdej strony; to zbyt mocno rozprasza link equity. Pokaż kategorie, które generują pieniądze, a do długiego ogona pozwól dojść ze stron kategorii.

Co dzieje się z mega menu na telefonie?

Nie może istnieć w tej samej formie — na ekranie dotykowym nie ma hovera, a szeroki wielokolumnowy panel nie zmieści się w pionowym widoku; do tego mobile odpowiada dziś za większość sesji w większości sklepów. Liczy się to, w co menu się zamienia: sprawdza się zwijany akordeon za ikoną hamburgera, w którym dotknięcie kategorii najwyższego poziomu rozwija jej dzieci w tym samym miejscu, a obok zawsze jest bezpośredni link „zobacz całą kategorię”, żeby rodzic nie był przechwytywany wyłącznie przez przełącznik rozwijania. Testuj to na prawdziwym urządzeniu — błąd do wyłapania to kategoria nadrzędna, którą można tylko rozwinąć, ale nigdy faktycznie odwiedzić.

Ile obrazów i bloków promocyjnych warto dodać do panelu?

Oszczędnie. Zarezerwuj miniatury dla kilku flagowych kategorii albo pojedynczego kafelka promocyjnego, nie dla każdego wiersza — każdy obraz to żądanie, które przeglądarka może pobrać, a panel wypchany miniaturami wygląda chaotycznie i może spowalniać ładowanie. Jeden blok promocyjny na panel przyciąga uwagę; trzy konkurują z nawigacją, dla której menu istnieje. Wolna przestrzeń to naturalne miejsce na kafelek „Nowości”, ale traktuj go jako pojedynczy akcent, nie tapetę.

Dobra nawigacja jest niewidoczna. Kupujący w dobrze zbudowanym sklepie nigdy nie myśli o menu — po prostu ciągle trafia na stronę, której szukał. W szerokim katalogu PrestaShop to wrażenie niewidoczności bierze się z jednej decyzji: przestań odsłaniać kategorie po jednym niechętnym hoverze naraz i rozłóż je na tyle płasko, żeby cały sklep mieścił się w jednym spojrzeniu.