Architecture de Menu Multi-Niveaux Shopify : Taxonomies Imbriquées, Navigation Profonde et Orientation

Structurer la navigation d’une boutique compacte est intuitif : quelques liens clairs dans l’en-tête guident directement les acheteurs vers les produits. Mais dès qu’un catalogue s’étend à plusieurs rayons, coupes et spécifications techniques, le menu cesse d’être un simple choix graphique. Il devient un problème d’ingénierie d’orientation sur la vitrine.

Sur les boutiques Shopify natives, les marchands se heurtent à une règle structurelle stricte : les menus acceptent un élément racine et jusqu’à deux sous-niveaux imbriqués. Cette limite à trois niveaux n’est pas un défaut, mais un garde-fou ergonomique. Les boutiques performantes ne contournent pas ce plafond par des hiérarchies complexes : elles exploitent ces trois niveaux via des méga menus sur ordinateur, une navigation progressive sur mobile et délèguent les détails aux filtres de collection.

Réponse rapide : Jusqu’à quelle profondeur un menu Shopify peut-il aller ?

Un menu Shopify peut comporter trois niveaux : un élément racine plus jusqu’à deux niveaux déroulants imbriqués (Centre d’aide Shopify). Les thèmes gèrent cette profondeur, mais les menus profonds sont difficiles à utiliser. Regroupez-les en méga menu sur ordinateur et en panneaux ou accordéons sur mobile (NN/g).

Comment Shopify stocke les menus multi-niveaux

Shopify stocke les menus sous forme de listes de liens hiérarchiques en base de données. Alors que les guides plus anciens mentionnaient Online Store > Navigation, la documentation officielle actuelle centralise la gestion des menus sous Content > Menus. Comprendre les limites d’imbrication et la manière dont les thèmes analysent ces liens évite des erreurs d’affichage critiques.

Imbriquer des éléments dans Content > Menus

Pour créer un menu multi-niveaux dans Shopify, rendez-vous dans Content > Menus. Ouvrez votre menu principal, ajoutez vos liens et faites glisser les éléments secondaires vers la droite sous leur élément parent. La documentation Shopify stipule qu’un élément de premier niveau peut avoir jusqu’à deux niveaux de menus déroulants imbriqués, soit un plafond strict de trois niveaux au total. Un quatrième niveau est impossible dans l’administration native.

Shopify Admin Native Menu Structure:
Level 1: Men (Top-level item)
  └── Level 2: Footwear (First nested drop-down)
        └── Level 3: Running Shoes (Second nested drop-down — hard ceiling)
              └── [Level 4: Trail Running] ◄── Not possible in Shopify admin

Comment les thèmes lisent les liens imbriqués (link.links)

Les templates Liquid parcourent l’arborescence via l’objet link. L’attribut link.links expose les liens enfants, tandis que link.levels renvoie le nombre de niveaux imbriqués. Les thèmes exécutent généralement jusqu’à trois boucles imbriquées :

<ul class="site-nav">
  
</ul>

Pourquoi votre thème masque le troisième niveau

De nombreux marchands s’étonnent de ne pas voir apparaître leurs liens de niveau 3 sur leur boutique. Le Centre d’aide Shopify précise que la majorité des thèmes ne prennent en charge que deux niveaux déroulants dans les en-têtes standard. Certains thèmes réservent le niveau 3 aux mises en page de méga menu multi-colonnes ; consultez la documentation de votre thème avant de supposer que les données du menu sont fausses.

Sur mobile, une autre difficulté courante survient : toucher une catégorie parente redirige immédiatement vers la collection au lieu d’ouvrir le sous-menu. Shopify recommande de vérifier dans Content > Menus que le champ de lien parent est défini sur #. Shopify note également que certains thèmes peuvent nécessiter des ajustements CSS pour perfectionner l’ergonomie mobile.

Pourquoi la profondeur est difficile : loi de Steering et empreinte d’information

La navigation multi-niveaux crée des frictions motrices et cognitives. Sur ordinateur, les flyouts en cascade obligent l’utilisateur à guider son curseur dans d’étroits corridors horizontaux. Si la souris se déplace en diagonale vers le niveau 3, elle quitte la zone de survol et le panneau se referme brusquement.

The "Mouse Tunnel" Steering Trap in Cascading Flyouts:
┌──────────────┐
│ Category A   │
├──────────────┤
│ Category B   │──────┐
├──────────────┤      │  Shopper moves pointer diagonally
│ Category C   │      ▼  toward desired item...
└──────────────┘   ┌──────────────┐
                   │ Sub-item 1   │
                   ├──────────────┤ ◄── Pointer exits the narrow tunnel!
                   │ Sub-item 2   │     Submenu collapses instantly.
                   └──────────────┘

La loi d’Accot-Zhai (Steering Law) modélise cette contrainte : manœuvrer dans des tunnels étroits prend plus de temps et se rate facilement. Les recherches du Nielsen Norman Group soulignent que les menus hiérarchiques sont une interface intrinsèquement difficile à concevoir. NN/g recommande explicitement d’éviter les menus hiérarchiques, en particulier ceux de plus de deux niveaux.

En outre, la profondeur excessive affaiblit l’information scent (l’empreinte d’information). Les acheteurs naviguent en évaluant des indices textuels pour vérifier s’ils se rapprochent du produit souhaité. Si les libellés sont enfouis ou ambigus, les acheteurs peuvent se perdre.

Desktop : Flyouts en cascade vs Méga Menus

Pour surmonter le piège du tunnel de souris, le Nielsen Norman Group conseille : pour les menus de navigation, envisagez les méga menus comme alternative aux menus déroulants. Au lieu de contraindre le pointeur à des trajectoires délicates, le méga menu étale les options des niveaux 2 et 3 sur une surface bidimensionnelle stable.

L’interaction au survol d’un méga menu exige une temporisation soignée. Le Nielsen Norman Group préconise : le pointeur doit rester immobile pendant 0.5 seconde avant l’ouverture, le menu doit apparaître en 0.1 seconde et rester affiché jusqu’à ce que le pointeur soit sorti de l’élément et du menu pendant 0.5 seconde. Ce délai prévient les ouvertures intempestives lors du simple passage de la souris.

NN/g recommande également de regrouper les options en ensembles logiques. Dans un menu Shopify à 3 niveaux, cela consiste à utiliser le niveau 2 comme en-têtes de colonnes et à lister le niveau 3 en dessous. Pour approfondir ces agencements, consultez notre guide sur les mega menu best practices.

Toutefois, un méga menu pour ordinateur ne doit pas être dupliqué tel quel sur mobile. NN/g avertit que les options trop petites dans les méga menus provoquent des erreurs de sélection sur écran tactile. La vue desktop doit basculer vers une interface adaptée aux doigts.

Mobile : Accordéons vs Panneaux Drill-Down

Concevoir une navigation mobile impose de comprendre la biomécanique tactile. L’étude de Steven Hoober publiée dans UXmatters — reposant sur 1,333 observations d’utilisateurs mobiles — révèle que 49% manipulent leur téléphone d’une seule main. Testez votre menu à une main sur un vrai téléphone.

Figure 1 : Illustration conceptuelle (Concept illustration) — Mobile : Accordéons vs Panneaux Drill-Down

L’intérêt des accordéons

Les accordéons verticaux déploient les sous-catégories sous l’élément sélectionné. Un article de Smashing Magazine (Friedman 2022) indique que les accordéons fonctionnent très bien pour plusieurs niveaux et sont généralement préférables aux menus glissants. Comme les catégories sœurs restent visibles, les acheteurs passent rapidement d’un niveau à l’autre sans perdre le contexte de la page.

Le principal danger des accordéons est le phénomène d’Accordion sprawl. Lorsqu’un utilisateur ouvre plusieurs sections successives, le tiroir s’étend sur plusieurs hauteurs d’écran et repousse les liens majeurs hors du champ. Pour y remédier, configurez le menu pour refermer automatiquement les branches sœurs lors de l’ouverture d’un nouveau parent.

L’intérêt des panneaux Drill-Down

Les panneaux drill-down remplacent l’intégralité du tiroir horizontalement à chaque étape, en affichant One tier at a time. Cela stabilise la hauteur d’affichage et rassemble les sous-catégories dans des Intent groups homogènes, idéal pour les catalogues à ramifications denses.

Smashing Magazine relève la limite majeure du drill-down : la destination du bouton retour est parfois confuse. Smashing préconise de remplacer un intitulé vague par un Contextual back label (par exemple ‹ Men). Nous suggérons aussi de garder un Persistent back button en haut de chaque panneau. Pour l’intégration, consultez notre guide mobile drawer menu design.

Taxonomie vs Filtres : Où le menu doit s’arrêter

Figure 2 : Illustration conceptuelle (Concept illustration) — Taxonomie vs Filtres : Où le menu doit s’arrêter

Lorsque des marchands se sentent bridés par la limite de 3 niveaux, le souci réside presque toujours dans une confusion entre taxonomie et filtres. Le menu doit accueillir des Structural categories correspondant à des intentions d’achat distinctes (comme Chaussures de course vs Baskets). En revanche, les attributs relèvent des Faceted filters et des Filter chips sur les pages de collection.

Injecter des attributs tels que Rouge, Taille L ou une fourchette de prix dans l’arborescence du menu sature la navigation. En s’arrêtant au niveau 3 et en laissant les filtres gérer les variantes, vous offrez une exploration limpide et rapide.

Performance et accessibilité des menus profonds

Les menus très ramifiés ont un coût technique. Dans les thèmes Shopify classiques, les boucles Liquid pré-rendent tous les liens côté serveur dans le document HTML d’origine. Les méga menus enrichis d’images, de vignettes et de descriptions génèrent un très grand nombre d’éléments DOM avant toute action de l’internaute.

La documentation Google Chrome Lighthouse émet un avertissement au-delà de ~800 nœuds dans le corps de page et signale une erreur au-delà de ~1,400 nœuds. Un DOM volumineux donne plus de travail au navigateur : mesurez plutôt que de deviner. Vous pouvez compter vos nœuds d’en-tête dans la console Chrome : document.querySelector(‘header’).querySelectorAll(‘*’).length. Consultez notre analyse sur how navigation affects page speed.

Sur le plan de l’accessibilité, les menus doivent respecter le guide W3C WAI-ARIA APG. Le modèle de disclosure précise que la navigation de site n’utilise pas le rôle menu, conçu pour les logiciels applicatifs. Les boutons doivent basculer aria-expanded entre false et true, masquer les sous-menus inactifs aux lecteurs d’écran et réagir à la touche Échap : si un menu est ouvert, la touche le ferme et replace le focus sur le bouton de commande.

Compromis architecturaux : Quand éviter les menus profonds

Toutes les boutiques n’ont pas besoin de trois niveaux. Les boutiques spécialisées proposant un catalogue court créent des frictions superflues avec des menus déroulants profonds. Si un petit catalogue peut être parcouru sur une seule page de collection, multiplier les paliers impose des clics inutiles.

Les marques D2C orientant leur trafic payant directement vers des pages d’atterrissage ciblées gagnent également à conserver une structure plate. Des menus épurés et des filtres horizontaux sur collection peuvent mieux convenir qu’un méga menu encombrant ; testez avec votre propre trafic.

Enfin, les marques haut de gamme et éditoriales valorisent l’espace blanc et l’iconographie épurée. Les menus surchargés nuisent à leur image de marque. Rappelez-vous la règle d’or du Nielsen Norman Group : évitez les menus hiérarchiques, particulièrement ceux dépassant deux niveaux.

Cadre de décision par structure de catalogue

Pour déterminer l’architecture de navigation adaptée à votre boutique Shopify, confrontez votre catalogue et les habitudes de vos clients à la matrice suivante :

Multi-Level Navigation Decision Architecture:
┌─────────────────────────────────────────────────────────────────┐
│ Catalog Scale & Taxonomy Audit                                  │
└────────────────────────────────┬────────────────────────────────┘
                                 │
         ┌───────────────────────┴───────────────────────┐
         ▼                                               ▼
  [ Small, focused catalog ]                    [ Broad, multi-category ]
         │                                               │
         ▼                                               ▼
┌─────────────────────────────┐                 ┌─────────────────────────────┐
│ 1–2 Tier Flat Navigation    │                 │ Multi-Tier Structure Needed │
│ Single-line bar on desktop  │                 └──────────────┬──────────────┘
│ Clean 1-level mobile drawer │                                │
└─────────────────────────────┘         ┌──────────────────────┴──────────────────────┐
                                        ▼                                             ▼
                                [ Desktop Viewport ]                          [ Mobile Viewport ]
                                        │                                             │
                                        ▼                                             ▼
                         ┌─────────────────────────────┐               ┌─────────────────────────────┐
                         │ 2D Scannable Mega Menu      │               │ Drill-Down Panels / Drawer  │
                         │ Columns, intent groups      │               │ Step-by-step navigation     │
                         │ High scannability           │               │ Contextual "< Back" crumb   │
                         └─────────────────────────────┘               └─────────────────────────────┘

Les profils de catalogue sont des repères indicatifs, non des seuils mathématiques stricts.

Où se situe Navi+

Pour les marchands Shopify souhaitant organiser des catalogues riches sans modifier le code Liquid de leur thème, Navi+ propose un éditeur visuel de navigation pour les boutiques Shopify.

Theme Menu vs. Navi+ Menu Delivery:

Traditional Theme Liquid:
[Shopify Server] ──► [Loops every menu link in Liquid] ──► [All links in initial HTML] ──► Browser

Navi+:
[Shopify Server] ──► [Theme HTML without Navi+ menu links] ──► Browser
                               ▲
                               │ Menu config loaded by a script
                             [CDN]
                   (Menu stored as a JSON file)

À l’image de la structure native de Shopify, les menus Navi+ respectent un maximum de 3 niveaux. La valeur ajoutée réside dans la différenciation par appareil : concevez un Desktop Mega Menu pourvu de colonnes, groupes et bannières, tout en paramétrant un Mobile Menu (ou une barre d’onglets inférieure) pensé pour l’ergonomie smartphone. Un Mobile Menu peut aussi intégrer votre arborescence de menu Shopify existante, actualisée avec le bouton Sync now.

Sur le plan technique, Navi+ stocke les configurations de menu sous forme de fichiers JSON sur CDN, affichés côté navigateur via un script, en gardant les liens du menu hors du template Liquid initial du thème. Les marchands sont invités à mesurer l’effet réel sur leur boutique via PageSpeed Insights et Chrome DevTools.

Si le menu intégré de votre thème ne permet pas d’offrir aux visiteurs desktop et mobile des vues différentes de la même structure à trois niveaux, Navi+ vous permet de construire visuellement un Desktop Mega Menu et un Mobile Menu distinct — puis de passer la checklist ci-dessous sur votre propre boutique.

Pour découvrir d’autres approches mobiles, lisez notre article sur la mobile navigation beyond the hamburger et consultez nos Navi+ setup guides for Shopify themes.

Checklist d’action : Auditer votre menu multi-niveaux

Suivez ces cinq étapes pratiques pour optimiser la navigation multi-niveaux de votre boutique Shopify :

• Étape 1 : Séparer taxonomie et attributs : Listez vos liens de menu. Conservez les catégories structurelles (ex. Chaussures, Manteaux) dans le menu et basculez les caractéristiques (Couleur, Taille, Prix) vers les filtres de collection.
• Étape 2 : Renforcer l’empreinte d’information : Bannissez les termes marketing flous au profit de libellés précis et naturels utilisés par vos clients dans leurs recherches.
• Étape 3 : Tester sur un vrai smartphone : Ouvrez votre boutique sur mobile et descendez jusqu’au niveau 3. Vérifiez que les liens parents utilisent # pour éviter les rechargements involontaires et validez la lisibilité des boutons retour.
• Étape 4 : Mesurer les nœuds DOM de l’en-tête : Exécutez document.querySelector(‘header’).querySelectorAll(‘*’).length dans la console DevTools. Comparez votre total au seuil d’avertissement de ~800 nœuds de Lighthouse.
• Étape 5 : Contrôler la navigation au clavier : Parcourez l’intégralité du menu avec Tab, Entrée et Échap. Assurez-vous qu’Échap ferme le panneau ouvert et replace le focus sur le bouton de déclenchement.

Foire Aux Questions (FAQ)

Questions fréquentes sur l’architecture des menus multi-niveaux Shopify, les plafonds techniques et l’UX mobile :

Combien de niveaux un menu Shopify peut-il comporter ?

Un menu Shopify peut comporter trois niveaux : un élément de premier niveau plus jusqu’à deux niveaux de menus déroulants imbriqués, d’après le Centre d’aide Shopify.

Comment imbriquer un élément de menu dans Shopify ?

Dans l’administration Shopify, allez dans Content > Menus, ouvrez votre menu, faites glisser un élément vers la droite sous l’élément parent, puis enregistrez.

Pourquoi mon thème n’affiche-t-il pas le troisième niveau de liens ?

Selon le Centre d’aide Shopify, la plupart des thèmes prennent en charge jusqu’à deux niveaux déroulants imbriqués dans les en-têtes classiques. Certains thèmes n’affichent le troisième niveau que dans une mise en page de méga menu ; consultez la documentation du thème.

Pourquoi mon lien parent ouvre-t-il une page au lieu du sous-menu sur mobile ?

Shopify conseille de vérifier que le champ de lien de l’élément parent est défini sur # dans Content > Menus afin que le tapotement ouvre le sous-menu au lieu de rediriger.

Un méga menu est-il préférable à un menu déroulant pour un grand catalogue ?

Le Nielsen Norman Group recommande d’envisager les méga menus plutôt que les menus déroulants en cascade et conseille d’éviter les hiérarchies de plus de deux niveaux.

Faut-il choisir un accordéon ou des panneaux drill-down sur mobile ?

Les deux approches ont des atouts : Smashing Magazine note que les accordéons fonctionnent très bien pour plusieurs niveaux, tandis que les panneaux drill-down maintiennent une hauteur fixe avec des boutons retour contextuels.

Sources & Références

• Centre d’aide Shopify : Set up drop-down menus in your online store. Documentation sur la hiérarchie des menus et capacités des thèmes. help.shopify.com
• Shopify.dev : Référence de l’objet Liquid link. Spécifications des tableaux de liens enfants link.links et propriétés link.levels. shopify.dev
• Nielsen Norman Group : Laubheimer, P. (2019). Accot-Zhai Steering Law: Implications for UI Design. Étude sur les tunnels de souris et menus imbriqués. nngroup.com
• Nielsen Norman Group : Nielsen, J. & Li, A. (2017). Mega Menus Work Well for Site Navigation. Recommandations de segmentation 2D et temporisation au survol (0.5 s / 0.1 s). nngroup.com
• Smashing Magazine : Friedman, V. (2022). Designing Navigation for Mobile: Design Patterns and Best Practices. Analyse des accordéons mobiles, menus coulissants et libellés retour contextuels. smashingmagazine.com
• Steven Hoober (UXmatters) : How Do Users Really Hold Mobile Devices? (2013). Étude empirique sur 1,333 observations ; 49% d’usage à une main. uxmatters.com
• Chrome for Developers : Avoid an excessive DOM size (Lighthouse). Documentation sur les avertissements de nœuds DOM (~800 nœuds) et erreurs (~1,400 nœuds). developer.chrome.com
• W3C Web Accessibility Initiative (WAI) : WAI-ARIA APG - Disclosure Navigation Pattern. Standards d’interaction clavier et gestion des états accessibles. w3.org
• Lectures complémentaires: Mega Menu Best Practices, Mobile Drawer Menu Design, Navigation and Page Speed, Mobile Navigation Beyond the Hamburger et Navi+ Setup Guides for Shopify Themes.