Vous passez des heures à organiser vos collections et à imbriquer vos liens dans l’administration Shopify. Sur un grand écran d’ordinateur, vos catégories se déploient élégamment dans un méga menu spacieux. Mais lorsque vous ouvrez le tiroir de navigation sur votre smartphone, la structure semble souvent déconnectée ou désynchronisée.
De nombreux marchands pensent qu’avoir deux mises en page différentes oblige à gérer deux menus séparés. En réalité, vous n’avez pas besoin de deux arborescences distinctes. Vous pouvez conserver une hiérarchie de catégories unique comme source de vérité, tout en laissant chaque appareil présenter cette structure selon sa mise en page idéale.
Réponse rapide : un seul menu peut-il alimenter ordinateur et mobile ?
Oui. Dans Dawn, le menu principal de l’en-tête alimente à la fois le menu pour ordinateur et le tiroir mobile, la structure est donc déjà partagée. Ce qui change, c’est la mise en page : l’ordinateur affiche des colonnes, le mobile navigue niveau par niveau. Choisissez la méthode qui préserve une source de vérité unique.
- Méthode 1 (Paramètres natifs du thème sans code) : Conservez un menu unique dans Shopify et passez le type de menu de l’en-tête sur Méga menu ; le thème adapte automatiquement l’affichage mobile.
- Méthode 2 (Menus séparés dans l’admin) : Créez une linklist mobile distincte et faites-y pointer le code du tiroir, en acceptant une charge de maintenance doublée.
- Méthode 3 (Modification du modèle de tiroir) : Modifiez le code Liquid du tiroir pour que les sous-catégories apparaissent dès l’ouverture sans nécessiter plusieurs clics.
Comment les thèmes Shopify réutilisent un menu sur ordinateur et mobile
Dans Shopify, les données de navigation sont indépendantes de la présentation visuelle. Lorsque vous créez un menu dans Contenu > Menus, Shopify l’enregistre en tant qu’objet linklist. Selon la Documentation pour développeurs Shopify, “Vous pouvez imbriquer des liens jusqu’à trois niveaux de profondeur” : un élément de premier niveau suivi de deux niveaux enfants. Pour concevoir votre arborescence, consultez notre Shopify menu guide.
Comme chaque linklist est une structure de données pure, le thème actif décide de la façon de l’afficher (Shopify Dev Docs). Dans le fichier sections/header.liquid de Dawn, le paramètre menu_type_desktop permet de basculer entre menu déroulant, méga menu ou tiroir sur ordinateur (GitHub Shopify Dawn).
Quel que soit le style retenu sur ordinateur, le tiroir mobile de Dawn puise dans cette exacte même linklist. Dans snippets/header-drawer.liquid, le tiroir parcourt le menu avec for link in section.settings.menu.links et descend jusqu’aux petits-enfants avec for grandchildlink in childlink.links (GitHub Shopify Dawn). Liquid gère également la profondeur d’imbrication grâce à la propriété levels de l’objet lien (Shopify Liquid API).
La structure de base est donc déjà partagée. Vous disposez d’un One menu tree unique ; seule l’organisation visuelle s’adapte à l’écran.
Pourquoi les deux mises en page semblent toujours différentes
Même en partageant un menu commun, l’expérience entre ordinateur et mobile diffère en raison de modèles d’interaction dissemblables.
Figure 1 : Illustration conceptuelle (Concept illustration) — Pourquoi les deux mises en page semblent toujours différentes
Sur ordinateur, survoler une catégorie déclenche un large Hover panel. Les clients découvrent instantanément plusieurs colonnes regroupant catégories et liens de produits sans quitter la page.
Sur mobile, l’étroitesse de l’écran interdit les colonnes multiples. Les thèmes recourent à un tiroir coulissant fonctionnant par niveaux successifs. Pour explorer une sous-catégorie, le client doit toucher la ligne parente, attendre l’animation du panneau, puis toucher à nouveau. Cette exigence de Two taps est une plainte exprimée par certains utilisateurs de Dawn dans la communauté Shopify (Shopify Community). Pour approfondir ce fonctionnement, consultez notre analyse sur l’mobile drawer menu architecture.
Les écrans tactiles créent également des contraintes ergonomiques :
- Parent link not clickable : Dans de nombreux tiroirs mobiles, toucher le nom de la catégorie parente ouvre uniquement le sous-panneau au lieu d’ouvrir la page de la collection.
- Erreurs de sélection tactile : Les recherches du Nielsen Norman Group indiquent que “les petites options dans les méga menus provoquent des erreurs de sélection sur les écrans tactiles” (NN/g).
- Modèles mobiles séparés : Des applications comme Meteor séparent volontairement les modèles d’ordinateur et de mobile (Helium Meteor Docs), tandis que Clean Canvas préconise un menu mobile à niveau unique avec liens directs vers les produits pour Symmetry (Clean Canvas).
Méthode 1 : Conserver un menu Shopify et passer l’affichage ordinateur en Méga menu
La méthode sans code la plus propre consiste à exploiter le méga menu natif de votre thème. Vous gardez un seul menu dans l’administration, et le thème ajuste la disposition pour chaque écran.
Procédez en quatre étapes :
- Construire la hiérarchie à 3 niveaux dans l’admin : Dans Contenu > Menus, organisez votre menu principal avec des éléments parents, des sous-titres et des liens finaux.
- Assigner le menu à l’en-tête : Dans Boutique en ligne > Thèmes > Personnaliser > En-tête, sélectionnez votre linklist sous le paramètre Menu.
- Passer le type de menu ordinateur en Méga menu : Dans les réglages d’en-tête, modifiez Menu type pour sélectionner Mega menu (GitHub Shopify Dawn). Pour Dawn, suivez notre guide pour add a mega menu to Dawn.
- Vérifier le tiroir mobile : Basculez l’aperçu en mode Mobile et ouvrez le tiroir. Il reprend automatiquement la même arborescence (GitHub Shopify Dawn).
D’autres thèmes peuvent nommer ce réglage différemment ; consultez la documentation de votre thème (Shopify Dev Docs).
Méthode 2 : Utiliser deux menus distincts dans l’administration Shopify
Si votre menu ordinateur contient de nombreuses bannières ou liens secondaires qui encombrent les écrans mobiles, vous pouvez créer deux menus indépendants.
Vous créez un menu principal pour ordinateur et un menu allégé nommé “Mobile Menu” dans Contenu > Menus. Pour connecter ce dernier, les développeurs éditent snippets/header-drawer.liquid afin que le tiroir lise la variable du menu mobile au lieu de section.settings.menu (Shopify Community). Consultez la documentation de votre thème pour savoir s’il propose un réglage distinct pour le menu du tiroir, ce qui évite de toucher au code.
Bien que cette approche permette une totale liberté visuelle sur mobile, elle exige un travail de gestion constant :
- Chaque ajout de collection ou opération commerciale nécessite une mise à jour sur deux menus.
- Les deux menus peuvent diverger avec le temps, privant les utilisateurs mobiles de liens présents sur ordinateur. Les marchands qui veulent « reproduire leur menu ordinateur sur mobile » cherchent justement à éviter cela (Shopify Community).
Réservez la Méthode 2 aux boutiques dont l’expérience mobile exige une structure de navigation radicalement différente.
Méthode 3 : Modifier le tiroir pour afficher les niveaux imbriqués immédiatement
De nombreux marchands souhaitent que le tiroir mobile affiche les sous-catégories immédiatement sans forcer les clients à cliquer à travers des écrans successifs (Shopify Community).
Le modèle de tiroir de Dawn parcourt déjà les liens enfants et petits-enfants (GitHub Shopify Dawn). En modifiant le code Liquid et CSS, il est possible de supprimer les panneaux masqués pour afficher les niveaux imbriqués sous forme de liste dépliée par défaut.
Prenez néanmoins ces précautions techniques essentielles :
- Évolution des versions : Les codes partagés sur les forums en 2022 étaient prévus pour d’anciennes versions de Dawn. La structure des fichiers et des classes CSS a évolué.
- Dupliquer votre thème : Créez toujours une copie de sauvegarde de votre thème avant de toucher aux fichiers Liquid. Ne modifiez jamais de code non testé en production.
- Défilement vertical prolongé : Si votre méga menu compte de nombreux liens, tout déplier d’un coup sur mobile engendre une liste longue qui oblige à faire défiler longuement.
Ce qui est conservé du méga menu ordinateur sur mobile
Lorsqu’un méga menu d’ordinateur passe sur smartphone, ses éléments graphiques doivent s’adapter. Le Nielsen Norman Group recommande de regrouper les options en ensembles logiques (NN/g). Pour approfondir la hiérarchisation visuelle, consultez notre guide sur les mega menu layout and grouping best practices.
Figure 2 : Illustration conceptuelle (Concept illustration) — Ce qui est conservé du méga menu ordinateur sur mobile
| Élément ordinateur | Comportement sur mobile | Action recommandée |
|---|---|---|
| Grille à plusieurs colonnes | La largeur réduite ne permet pas d’aligner plusieurs colonnes (Navi+ Docs) | Les Columns become one column empilées verticalement dans une liste défilante unique |
| En-têtes de colonnes | Les en-têtes qui ne font qu’étiqueter une colonne ordinateur prennent de la place dans une liste étroite | Supprimez-les en général lorsque les colonnes s’empilent ; un Divider between columns fin garde visible l’ancien regroupement |
| Images et bannières promotionnelles | Les grands blocs de Promo banner repoussent les liens sous la ligne de flottaison | Masquez les visuels lourds sur mobile ; utilisez des options comme Exclude when embedded pour alléger le tiroir (Navi+ Docs) |
| Profondeur du menu | Shopify limite les linklists à trois niveaux au total (Shopify Dev Docs) | Limitez votre arborescence à ≤ 3 niveaux pour éviter que des liens ne soient ignorés par les boucles Liquid |
| Liens textuels compacts | Les textes trop rapprochés provoquent des erreurs de sélection tactile (NN/g) | Augmentez l’espacement pour respecter la norme WCAG 2.2 d’au moins 24 par 24 pixels CSS (W3C WCAG 2.2) |
Tester sur des appareils réels avant de publier
Les outils d’émulation dans les navigateurs sur ordinateur ne reproduisent pas la portée réelle du pouce ni la sensibilité tactile. Effectuez ces vérifications sur du matériel physique :
- Tester sur smartphones iOS et Android réels : Ouvrez l’aperçu sur différents appareils physiques, en mode portrait et paysage.
- Toucher chaque niveau de lien : Appuyez sur les liens parents, sous-catégories et liens terminaux pour valider les redirections.
- Contrôler les lignes parentes : Vérifiez que toucher une catégorie parente ouvre bien la collection ou déploie le sous-menu sans bloquer.
- Mesurer les cibles tactiles : Assurez-vous que chaque élément interactif mesure au minimum 24x24 pixels selon WCAG 2.2 (W3C WCAG 2.2).
- Tester le défilement du tiroir : Faites défiler du haut jusqu’aux liens de compte en bas pour vous assurer qu’aucun élément n’est coupé.
- Utiliser un thème dupliqué : Testez toujours dans un aperçu de thème non publié avant toute mise en ligne.
Problèmes fréquents et solutions
Lors de l’alignement des menus ordinateur et mobile, quatre difficultés reviennent fréquemment :
Le menu mobile nécessite deux clics
- Cause : Le fonctionnement du tiroir exige de toucher une catégorie, d’attendre l’ouverture du volet, puis de toucher à nouveau (Shopify Community).
- Solution : Adaptez le code du tiroir pour déplier les sous-menus directement (Méthode 3), ou choisissez une disposition qui supprime le palier intermédiaire des colonnes.
Les niveaux profonds sont coupés
- Cause : Shopify prend en charge trois niveaux au maximum (Shopify Dev Docs). Dawn ne boucle pas au-delà des petits-enfants (GitHub Shopify Dawn).
- Solution : Réorganisez vos catégories pour que toutes les pages importantes se situent dans la limite des trois niveaux.
Le lien parent n’est pas cliquable
- Cause : Sur écran tactile, toucher la ligne parente sert uniquement à déplier le panneau secondaire.
- Solution : Ajoutez un lien “Tout voir dans [Catégorie]” en première position du sous-menu.
Le menu mobile affiche des éléments différents
- Cause : Votre boutique utilise la Méthode 2 via du code dans
snippets/header-drawer.liquidou une application pointant vers un menu distinct (Shopify Community). - Solution : Examinez les réglages de l’en-tête et le code du tiroir pour identifier la linklist appelée.
Compromis : quand une structure unique est un mauvais choix
Partager une structure de navigation simplifie la gestion, mais chaque méthode présente des compromis précis :
| Méthode | Effort de mise en place | Code requis | Lieu de gestion | Principaux compromis et limites |
|---|---|---|---|---|
| Méthode 1 : Méga menu natif | Faible (minutes) | Aucun (réglages du thème) | Un seul menu dans Shopify | Dépend des capacités du thème ; le tiroir mobile conserve la navigation par étapes |
| Méthode 2 : Deux menus distincts | Moyen | Légère retouche Liquid ou réglage thème | Deux menus dans l’admin | Risque de désynchronisation ; double travail lors de chaque modification du catalogue |
| Méthode 3 : Tiroir personnalisé | Élevé | Modifications Liquid et CSS | Un seul menu dans Shopify | Peut casser lors des mises à jour de thème ; les longues listes fatiguent au défilement |
Quand séparer délibérément vos menus
Bien qu’une source de vérité unique évite les décalages, créer deux menus distincts se justifie dans certains contextes :
- Catalogues très volumineux : Les boutiques comptant des milliers d’articles répartis sur de nombreuses sous-catégories risquent de saturer les mobiles. Un menu mobile épuré à un seul niveau avec liens directs offre une navigation tactile plus fluide (Clean Canvas).
- Raccourcis spécifiques au mobile : Les acheteurs sur smartphone peuvent tirer parti d’accès directs en tête de menu (Suivi de commande, Trouver une boutique).
- Indexation SEO : Si vous masquez des catégories sur mobile, assurez-vous que toutes les pages de collections restent accessibles via les pages de collections, le fil d’Ariane et le sitemap. Lisez nos conseils pour keep your menu crawlable.
Où se situe Navi+
Si votre thème actuel manque d’options de méga menu ou si modifier le code Liquid vous semble risqué, Navi+ offre un moyen structuré de partager la navigation entre appareils.
Selon la documentation de Navi+, voici comment le menu ordinateur et le menu mobile fonctionnent ensemble :
- Desktop Mega Menu : Sur grand écran, Navi+ Desktop Mega Menu propose des panneaux multicolonnes avec images et bannières. Il ne s’affiche pas sur smartphone car les colonnes larges ne tiennent pas sur un écran étroit (Navi+ Docs).
- Intégration dans le Mobile Menu : Au lieu de tout ressaisir, Navi+ Mobile Menu intègre votre méga menu existant via un élément d’intégration placé au niveau 1 du tiroir (Navi+ Docs).
- Empilement en colonne unique : Lors de l’intégration, les Columns become one column empilées nettement (Navi+ Docs). Le palier intermédiaire est supprimé, permettant d’atteindre le lien en une touche.
- Contrôle de visibilité : Activez l’option Exclude when embedded pour masquer les bannières lourdes sur smartphone (Navi+ Docs).
- Modifier à un seul endroit : Le tiroir réutilise les éléments du méga menu : vous modifiez votre méga menu une seule fois (Edit once) et la copie intégrée dans le tiroir suit. Pour supprimer un méga menu, retirez simplement l’élément d’intégration du Mobile Menu au préalable (Navi+ Docs).
- Trois niveaux de profondeur : Navi+ Mobile Menu prend en charge trois niveaux (catégories, sous-catégories et liens) (Navi+ Docs).
Pour le configurer :
- Dans Navi+, copiez l’élément d’intégration de votre Desktop Mega Menu.
- Collez cet élément au niveau 1 de votre Mobile Menu.
- Activez Exclude when embedded sur les bannières ou éléments exclusivement destinés aux ordinateurs.
Pour le détail des réglages, découvrez comment reuse a Desktop Mega Menu on phones et comment gérer la visibilité avec Exclude when embedded.
Si vous utilisez déjà Navi+ pour un Desktop Mega Menu, essayez de copier son élément d’intégration dans un Mobile Menu et d’afficher l’aperçu sur votre téléphone — si le résultat ne vous convient pas, supprimez l’élément d’intégration et rien d’autre ne change.
Checklist d’action
Suivez cette liste pour coordonner votre méga menu d’ordinateur et votre menu mobile :
- Définir un arbre de menu unique : Établissez votre hiérarchie dans Contenu > Menus, en respectant la limite de trois niveaux de Shopify.
- Choisir votre méthode : Optez pour les réglages natifs du thème (Méthode 1), des menus séparés (Méthode 2) ou une retouche de code du tiroir (Méthode 3).
- Dupliquer votre thème : Créez une sauvegarde de votre thème avant de toucher aux fichiers Liquid.
- Passer les colonnes en une seule colonne : Assurez-vous que les colonnes d’ordinateur se transforment en une liste simple sur mobile.
- Masquer les visuels trop lourds : Retirez les grandes bannières promotionnelles du tiroir mobile.
- Vérifier les liens parents : Assurez-vous que les catégories parentes ouvrent la collection ou comportent un lien “Tout voir”.
- Tester sur un appareil physique : Vérifiez la réactivité tactile, la fluidité du défilement et la taille minimale de 24x24 px sur un smartphone.
Foire aux questions (FAQ)
Puis-je utiliser un seul menu pour l’ordinateur et le mobile ?
Oui. Dans les thèmes comme Dawn, le tiroir mobile se construit à partir du même menu que l’en-tête. Vous gérez une seule linklist et le thème applique la mise en page appropriée à chaque écran.
Combien de niveaux un menu Shopify peut-il avoir ?
Un élément principal dans Shopify peut avoir jusqu’à deux niveaux enfants imbriqués, soit trois niveaux de navigation au total. Le modèle de tiroir de Dawn gère les liens jusqu’au niveau des petits-enfants.
Pourquoi mon menu mobile demande-t-il deux touches ?
Les tiroirs mobiles par défaut utilisent souvent une structure par étapes : toucher une catégorie ouvre un sous-panneau, et un deuxième toucher sélectionne le lien. On peut supprimer cette étape intermédiaire en dépliant les sous-menus ou en éliminant le niveau des colonnes.
Les colonnes et les images d’un méga menu fonctionnent-elles sur mobile ?
Les grilles à plusieurs colonnes ne rentrent pas sur les écrans de smartphone et sont empilées sur une seule colonne. Les images et bannières occupent trop d’espace vertical et sont généralement masquées sur mobile.
Dois-je modifier le code du thème ?
Non. Si votre thème prend en charge les méga menus nativement, vous pouvez l’activer directement dans l’éditeur de thème sans toucher au code. Une modification de code n’est nécessaire que si vous souhaitez changer le comportement du tiroir ou cibler un menu distinct.
Sources
- Shopify Developer Documentation: Navigation and Search — Spécifications sur les linklists et l’imbrication sur trois niveaux.
- Shopify Dawn Repository: header.liquid — Implémentation des types de menu sur ordinateur : déroulant, méga menu et tiroir.
- Shopify Dawn Repository: header-drawer.liquid — Boucle du tiroir mobile jusqu’au niveau des petits-enfants.
- Shopify Liquid API Reference: Link Object — Documentation sur les attributs de lien, y compris la profondeur d’imbrication.
- Nielsen Norman Group: Mega Menus Work Well Anywhere — Recherches UX sur les erreurs tactiles, le regroupement d’options et la hiérarchie visuelle.
- W3C Web Accessibility Initiative: Target Size Minimum (WCAG 2.2) — Norme d’accessibilité exigeant des cibles tactiles d’au moins 24 par 24 pixels CSS.
- Shopify Community: Main menu nesting mobile vs desktop — Discussion sur la contrainte du double clic dans la navigation mobile de Dawn.
- Shopify Community: Desktop Mega Menu and Mobile Hamburger Menu — Conseils de la communauté pour assigner un menu mobile séparé dans le tiroir.
- Shopify Community: DAWN how to show nested menu/submenu on mobile — Demandes pour afficher simultanément les niveaux 2 et 3 sur mobile dans Dawn.
- Shopify Community: How can I make my desktop menu identical on mobile — Questions de marchands sur la reproduction de menus d’ordinateur sur mobile.
- Helium Meteor Documentation: Welcome to Meteor — Présentation des modèles distincts pour ordinateur et mobile.
- Clean Canvas Blog: Mega Menu Your Shopify Store — Recommandations pour un menu mobile à niveau unique sur le thème Symmetry.
- Navi+ Documentation: Create a Desktop Mega Menu — Guide technique sur l’empilement en colonne, l’intégration et la visibilité.
- Navi+ Documentation: Create a Mobile Menu — Instructions pour structurer un menu mobile à 3 niveaux et intégrer un tiroir.
- Navi+ Documentation: Item Visibility — Guide pour masquer des éléments selon l’appareil avec Exclude when embedded.
Explorez les sujets
Ce guide renvoie vers des articles ciblés — approfondissez chaque thème.