Méga-menu pour PrestaShop : des catégories faciles à parcourir

Imaginez le parcours le plus courant sur une boutique PrestaShop au catalogue très fourni. Un visiteur arrive sur la page d’accueil, survole « Produits », attend l’ouverture d’un menu déroulant, survole une catégorie de premier niveau, attend le sous-menu, survole une sous-catégorie, puis seulement alors clique vers une liste de produits. Trois moments à survoler et attendre pour atteindre une seule page — et dans un menu déroulant latéral, un curseur qui sort d’un pixel de la colonne referme tout le menu et vous ramène au départ. Un méga-menu remplace cela par un large panneau unique qui affiche toute votre arborescence de catégories d’un coup : les catégories de premier niveau en titres, leurs sous-catégories disposées en colonnes en dessous, l’ensemble visible en un seul regard. Le visiteur cesse de fouiller dans des niveaux imbriqués et clique directement là où il veut aller.

Ce guide traite précisément de ce travail : rendre un catalogue PrestaShop profond réellement parcourable. Nous verrons où le menu par défaut montre ses limites, comment un méga-menu se connecte à votre vraie arborescence de catégories, ce qu’il faut y mettre ou en retirer, et comment il doit se comporter sur mobile. Si votre question est plutôt « quelle structure de menu pousse vraiment les visiteurs vers l’achat », c’est un autre sujet, que nous traitons à part dans Méga-menu PrestaShop : créer une navigation qui convertit. Ici, l’objectif est la découvrabilité : faire en sorte qu’une boutique de 30 catégories et 200 produits paraisse simple.

Dernière mise à jour : juin 2026.

Ce que PrestaShop fournit par défaut — et où cela s’arrête

Le thème PrestaShop par défaut (classic) affiche la navigation via le module ps_mainmenu — « Menu principal » dans votre liste de modules, rendu par le hook displayTop. Par défaut, il génère une barre horizontale de catégories de premier niveau avec de simples sous-menus déroulants pilotés par CSS. Vous le configurez dans Modules → ps_mainmenu → Configurer, où vous cochez les catégories, pages CMS et liens personnalisés à afficher, puis les glissez dans l’ordre souhaité.

Pour une boutique avec huit ou dix catégories, ps_mainmenu fait très bien l’affaire — inutile de remplacer ce qui fonctionne. Il cesse d’être suffisant dès que votre catalogue devient large ou profond. Ses menus déroulants n’exposent confortablement que deux niveaux ; un troisième niveau implique un sous-menu latéral qui s’ouvre sur le côté, l’une des interactions les plus frustrantes de la navigation web, car le trajet du curseur traverse une zone « morte » et le menu se referme brusquement. Il n’y a pas de place pour un bloc promotionnel « Soldes », pas de vignettes de catégories, aucun moyen de montrer à un client que « Salle de bain » contient à la fois « Douches » et « Caniveaux » sans l’obliger à survoler d’abord la catégorie. Un méga-menu sert à repousser cette limite : au lieu de révéler une branche à la fois, il ouvre un panneau qui affiche une branche entière — ou plusieurs — à plat.

Pourquoi un méga-menu rend un grand catalogue plus facile à parcourir

Le bénéfice n’est pas « ça fait moderne ». C’est qu’un panneau à plat, visible d’un seul coup, change ce que le visiteur peut faire :

• Moins de clics vers les contenus profonds. Une sous-catégorie qui demandait auparavant trois survols devient accessible en un clic, car elle apparaît à l’écran dès l’ouverture du panneau. Et alors ? Moins d’étapes entre l’arrivée sur le site et une liste de produits signifie moins de visiteurs qui abandonnent en cours de route.
• Découverte passive. Un menu déroulant ne montre que la branche que vous survolez. Un méga-menu montre aussi les branches voisines — le client venu pour « Douches » voit « Kits de douche à l’italienne » dans la colonne suivante et clique sans même l’avoir cherché. C’est du catalogue que vous cachiez auparavant derrière un survol.
• Structure comprise en un coup d’œil. Les colonnes et les titres expliquent au visiteur comment votre boutique est organisée dès la première seconde, avant le moindre clic. Sur un catalogue étendu, « comment cette boutique est-elle structurée ? » est la question qui décide s’il parcourt ou s’il quitte.
• Des liens internes que Google peut réellement exploiter. À condition que le menu soit construit avec de vrais liens <a href> (nous y revenons plus bas), chaque page de votre site renvoie désormais vers vos catégories clés — ce qui aide Google à les découvrir et à leur donner du poids. Nous détaillons l’aspect structurel dans Structure des catégories PrestaShop : navigation optimisée pour le SEO.

Comment un méga-menu se connecte à votre arborescence de catégories PrestaShop

C’est là qu’un bon méga-menu justifie sa place, et qu’un mauvais devient une charge de maintenance. Il existe deux façons d’alimenter le panneau, et la différence compte chaque fois que vous touchez à votre catalogue.

Un menu construit manuellement traite chaque entrée comme un contenu statique que vous avez saisi. Ajoutez une catégorie dans Catalogue → Catégories, renommez-en une ou changez leur ordre, et le menu ne s’en aperçoit pas — vous devez revenir le modifier à la main. Sur une boutique qui se réorganise selon les saisons, ce décalage finit par produire un menu qui pointe vers une catégorie supprimée en mars.

Un menu piloté par l’arborescence des catégories lit la structure PrestaShop en direct (les objets Category sous la racine choisie, en respectant l’indicateur Affichée et la position de chaque catégorie) et la rend telle quelle. Ajoutez ou renommez une catégorie dans l’interface d’administration, et le menu en tient compte au chargement de page suivant — sans seconde modification. Et alors ? Votre navigation ne peut jamais se désynchroniser silencieusement de votre catalogue, ce qui est précisément le type de panne qui coûte cher quand un client clique sur un élément de menu menant à une 404.

Quelle que soit l’option choisie, ancrez le menu à la bonne racine. La hiérarchie des catégories PrestaShop dépend d’une catégorie Root masquée, avec Home en dessous ; dans presque tous les cas, vous voulez que le menu commence aux enfants de Home, pas à Root, sans quoi vous risquez d’afficher des branches système qu’aucun client ne devrait voir.

Les principes de design qui décident s’il aide ou s’il nuit

N’y versez pas tout le plan du site

Un méga-menu avec 200 liens est pire que le menu déroulant qu’il remplace — c’est un mur, et un mur se survole du regard plutôt qu’il ne se lit. La règle pratique : affichez les catégories de premier niveau et leurs enfants importants, puis laissez les visiteurs approfondir depuis les pages de catégorie elles-mêmes. Si une branche est si profonde qu’elle ne tient pas, c’est le signal que votre arborescence de catégories est trop profonde, pas que votre menu a besoin de plus de colonnes. Le nettoyage côté catalogue est traité dans navigation optimisée pour le SEO.

Donnez-lui une hiérarchie visuelle nette

Les catégories de premier niveau doivent se lire comme des titres — graisse plus forte, taille légèrement supérieure — avec leurs sous-catégories sous forme de liste simple en dessous. Regroupez les sous-catégories proches dans la même colonne afin que l’œil lise de haut en bas au sein d’un même thème avant de passer à la colonne suivante. Tout l’intérêt de la mise à plat est la lisibilité ; un panneau plat sans hiérarchie typographique n’est qu’un mur plus dense.

Utilisez les images avec parcimonie, et sachez ce qu’elles coûtent

Une petite vignette ou une icône à côté d’une catégorie peut réellement aider la reconnaissance dans les univers visuels — mode, décoration, tout ce qui s’achète en partie à l’apparence. Mais chaque image dans le panneau est une requête que le navigateur peut devoir charger, et un menu rempli de vignettes devient à la fois bruyant visuellement et plus lourd au chargement. Réservez les images à quelques catégories phares ou à un seul bloc promotionnel, pas à chaque ligne. Si vous mettez en avant une tuile « Soldes » ou « Nouveautés », c’est bien l’endroit où une bannière mérite sa place.

Les blocs promotionnels ont leur place ici — avec mesure

L’espace libre dans un panneau de méga-menu est l’emplacement naturel d’une tuile « Nouveautés » ou d’une bannière saisonnière, car le client est déjà dans une logique de navigation, en train de se demander « où dois-je aller ? ». Un bloc promotionnel par panneau attire l’attention ; trois blocs rivalisent avec la navigation que vous avez justement construite.

Le mobile n’est pas un détail — c’est la majeure partie de votre trafic

Un méga-menu, par définition, n’existe pas sur téléphone. Il n’y a pas de survol sur un écran tactile, et un large panneau multicolonne ne rentre pas dans une fenêtre verticale. La seule question qui compte est donc ce que votre menu devient sur mobile — et, pour la plupart des boutiques, le mobile représente désormais la majorité des sessions, c’est donc la version que davantage de clients voient réellement. Les mécaniques d’une boutique pensée d’abord pour le téléphone méritent leur propre sujet : commerce mobile — votre boutique sur téléphone.

Le modèle qui fonctionne est un accordéon repliable derrière l’icône hamburger : toucher une catégorie de premier niveau déploie ses enfants sur place, toucher à nouveau les replie, et il existe toujours un lien direct « voir toute cette catégorie » afin que le toucher sur le parent ne soit pas absorbé uniquement par le bouton d’ouverture. Testez cela sur un vrai appareil, pas seulement dans une fenêtre de bureau redimensionnée — l’échec à repérer est une catégorie parente qui peut seulement être développée, mais jamais réellement visitée, ce qui bloque les clients dans une boutique impossible à parcourir.

Les règles SEO et d’exploration à ne pas ignorer

Un méga-menu crée des liens depuis chaque page vers vos pages de catégorie, ce qui est globalement positif pour la façon dont Google découvre et pondère votre structure. Trois éléments peuvent transformer cet atout en handicap :

• Rendez de vrais liens HTML. Une navigation construite uniquement en JavaScript, qui injecte les liens après le chargement, parie sur l’exécution de ce JavaScript par les robots. Des éléments <a href> standards dans le code source de la page ne posent pas ce problème. Si votre menu est uniquement en JS, vous cachez peut-être votre structure de catégories au robot même que vous vouliez alimenter.
• Rédigez des textes d’ancre qui veulent dire quelque chose. « Caniveaux inox » indique à un acheteur et à Google ce qui se trouve derrière le lien ; « Catégorie 7 » ne dit rien à personne. Les menus pilotés par l’arborescence reprennent automatiquement les noms de vos catégories ici — une raison de plus de bien les nommer dès le départ.
• Ne diluez pas tout en liant tout. Un menu qui renvoie vers les 200 catégories depuis chaque page disperse la popularité interne. Mettez en avant vos catégories stratégiques ; laissez la longue traîne être atteinte depuis les pages de catégorie. C’est le pendant navigationnel de la règle « ne videz pas le plan du site dans le menu » ci-dessus.

Comment savoir si cela a vraiment fonctionné

Ne jugez pas une modification de navigation à l’instinct, ni sur trois jours de données. Avant de basculer, notez quatre chiffres issus de vos outils d’analyse ; une fois le menu en ligne pendant au moins 30 jours et avec un volume de commandes significatif, comparez les mêmes quatre indicateurs :

• Pages par session — devraient augmenter, car le panneau à plat expose des catégories que les visiteurs ne survolaient jamais auparavant.
• Taux de rebond des pages de catégorie — devrait diminuer, car les visiteurs arrivent plus vite sur la bonne catégorie au lieu d’atterrir sur la mauvaise catégorie la plus proche.
• Utilisation de la recherche interne — une baisse est souvent un bon signe : les visiteurs trouvent les produits en parcourant la boutique plutôt qu’en revenant au champ de recherche. (Si la recherche porte l’essentiel de l’effort parce que votre catalogue est réellement trop vaste pour être navigué, c’est un problème de recherche — voir recherche intelligente pour PrestaShop.)
• Schémas de clics dans le menu — un outil de cartes de chaleur comme Microsoft Clarity montre quels éléments du menu sont réellement cliqués, afin de promouvoir les gagnants et de supprimer les colonnes mortes.

Parcourir et filtrer se recoupent aussi dès qu’un client est dans une grande catégorie — c’est un autre levier, traité dans révolution des filtres : aider les clients à trouver des produits dans les grands catalogues et dans pages de catégorie qui convertissent. Le rôle du méga-menu s’arrête à la porte de la catégorie ; ces sujets prennent le relais.

Le faire sans forker votre thème

L’objection pratique aux méga-menus est celle que les commerçants rencontrent vite : construire à la main un panneau multicolonne, connecté à l’arborescence des catégories et capable de se transformer correctement sur mobile signifie modifier les templates et le CSS du thème, et ce sont justement ces modifications qui cassent à la prochaine mise à jour. Notre module Mega Menu contourne ce problème. Il lit votre arborescence de catégories PrestaShop en direct, afin que le panneau reste synchronisé quand vous ajoutez ou réorganisez des catégories, l’organise avec un constructeur par glisser-déposer pour les colonnes et les blocs de contenu, vous permet d’ajouter des bannières promotionnelles ou des produits mis en avant dans l’espace disponible, et se transforme automatiquement en accordéon mobile — le tout configuré depuis le back-office, accroché à l’emplacement de navigation standard plutôt que greffé dans les fichiers de votre thème. Qu’est-ce que cela vous apporte concrètement ? La navigation plate et parcourable décrite plus haut, sans facture de développeur et sans menu qui se dégrade silencieusement à chaque changement de catalogue, car il suit vos catégories au lieu d’une copie que vous devez maintenir à la main.

Questions fréquentes

Ai-je vraiment besoin d’un méga-menu, ou le ps_mainmenu par défaut suffit-il ?

Si votre boutique compte huit ou dix catégories, le module ps_mainmenu par défaut fait très bien l’affaire — inutile de remplacer ce qui fonctionne. Un méga-menu mérite sa place quand votre catalogue devient large ou profond : les menus déroulants par défaut n’exposent confortablement que deux niveaux, et un troisième niveau implique un sous-menu latéral ouvert sur le côté, l’interaction la plus frustrante de la navigation web, car le trajet du curseur traverse une zone morte et le menu se referme. Passez au méga-menu lorsque « comment cette boutique est-elle structurée ? » ne se comprend plus en un coup d’œil.

Le menu restera-t-il synchronisé quand j’ajoute ou renomme des catégories ?

Seulement s’il est piloté par l’arborescence des catégories plutôt que construit manuellement. Un menu manuel traite chaque entrée comme un texte statique que vous avez saisi ; ajouter, renommer ou réordonner une catégorie dans Catalogue → Catégories laisse donc le menu obsolète jusqu’à correction manuelle — c’est ainsi que l’on finit par pointer vers une catégorie supprimée en mars. Un menu piloté par l’arborescence lit votre structure en direct (en respectant l’indicateur Affichée et la position de chaque catégorie) et reflète les changements au chargement de page suivant, afin que votre navigation ne puisse pas se désynchroniser silencieusement de votre catalogue.

Un méga-menu aide-t-il le SEO ou peut-il lui nuire ?

Il aide lorsqu’il est bien construit et nuit lorsqu’il est conçu négligemment. Rendez de vrais liens <a href> dans le code source de la page, pas du JavaScript qui les injecte après chargement — un menu uniquement en JS parie sur l’exécution de ce code par les robots, et vous risquez de cacher la structure de catégories même que le menu devait exposer. Rédigez des textes d’ancre explicites (« Caniveaux inox », pas « Catégorie 7 »). Et ne liez pas les 200 catégories depuis chaque page ; cela disperse la popularité interne. Mettez en avant vos catégories stratégiques et laissez la longue traîne être atteinte depuis les pages de catégorie.

Que devient un méga-menu sur téléphone ?

Il ne peut pas exister tel quel — il n’y a pas de survol sur un écran tactile, un large panneau multicolonne ne tient pas dans une fenêtre verticale, et le mobile représente désormais la majorité des sessions pour la plupart des boutiques. Ce qui compte, c’est ce qu’il devient sur mobile : le modèle efficace est un accordéon repliable derrière l’icône hamburger, où toucher une catégorie de premier niveau déploie ses enfants sur place et où un lien direct « voir toute cette catégorie » existe toujours, afin que le parent ne soit pas absorbé uniquement par le bouton d’ouverture. Testez-le sur un vrai appareil — l’échec à détecter est une catégorie parente qui peut seulement s’ouvrir, mais jamais être réellement visitée.

Combien d’images et de blocs promotionnels dois-je placer dans le panneau ?

Peu. Réservez les vignettes à quelques catégories phares ou à une seule tuile promotionnelle, pas à chaque ligne — chaque image est une requête que le navigateur peut devoir charger, et un panneau saturé de vignettes paraît brouillon tout en pouvant ralentir le chargement. Un bloc promotionnel par panneau attire l’attention ; trois blocs se disputent la place avec la navigation que le menu est censé fournir. L’espace disponible est naturellement adapté à une tuile « Nouveautés », mais traitez-la comme un accent unique, pas comme un papier peint.

Une bonne navigation est invisible. Un acheteur sur une boutique bien construite ne pense jamais au menu — il se retrouve simplement, encore et encore, sur la page qu’il cherchait. Sur un catalogue PrestaShop étendu, cette impression d’évidence vient d’une décision : cesser de révéler vos catégories un survol laborieux à la fois, et les disposer assez clairement à plat pour que toute la boutique tienne en un coup d’œil.