Comment créer un menu bureau et un menu mobile sur Shopify (Étape par étape)

Lors de la configuration d’une boutique Shopify, l’en-tête pour ordinateur est souvent conçu pour exposer l’ensemble du catalogue : collections, sous-catégories et menus déroulants détaillés. Mais sur un écran de smartphone, cette navigation dense se transforme rapidement en un tiroir latéral encombré qui impose un défilement interminable.

Les marchands cherchent naturellement une option simple dans l’administration Shopify pour afficher un menu sur ordinateur et un menu plus court sur mobile. Cependant, de nombreux thèmes ne proposent pas de réglage séparé pour le mobile. Si Shopify permet de créer plusieurs menus dans Contenu > Menus, c’est le thème qui détermine où ils s’affichent — et la majorité des thèmes partagent la même liste de liens entre bureau et mobile.

Pour les séparer, vous pouvez conserver un menu unique et épuré, modifier le code du tiroir de votre thème ou recourir à une application de navigation. Ce guide vous présente les trois approches étape par étape.

Réponse rapide : Shopify peut-il afficher un menu différent sur mobile ?

Pas avec la plupart des thèmes par défaut. Vous créez vos menus dans Contenu > Menus, mais c’est le thème qui décide où ils s’affichent, et des thèmes comme Dawn alimentent le même menu pour l’en-tête ordinateur et le tiroir mobile. Pour les séparer, modifiez le code du tiroir ou utilisez une application de menu.

Trois options principales s’offrent à vous :

• Option 1 : Conserver un menu unique et laisser le tiroir du thème gérer le mobile. Gardez une liste claire dans Contenu > Menus sans toucher au code.
• Option 2 : Assigner un menu mobile séparé en modifiant le code du thème. Dupliquez votre thème et modifiez snippets/header-drawer.liquid (dans Dawn) pour appeler l’identifiant de votre menu mobile.
• Option 3 : Utiliser une application de navigation. Construisez un méga menu pour ordinateur et un tiroir ou une barre d’onglets pour mobile, en contrôlant la visibilité par appareil sans coder.

Pour identifier la solution la plus adaptée à vos besoins, consultez notre tableau comparatif dans la section Compromis ci-dessous.

Fonctionnement des menus Shopify sur ordinateur et mobile

Concept illustration : un menu principal Shopify unique alimente à la fois l’en-tête bureau et le tiroir mobile.

Dans Shopify, les liens de navigation sont gérés dans Contenu > Menus. Cependant, comme le précise la documentation du Centre d’aide Shopify sur les menus déroulants, l’emplacement d’affichage dépend entièrement de votre thème.

Dans le thème par défaut de Shopify, Dawn, la section En-tête (Header) ne comprend qu’un seul paramètre de type link_list (par défaut main-menu). Sur ordinateur, ce menu s’affiche horizontalement, ouvrant les sous-catégories dans un Header dropdown.

Sur écran mobile, un bouton hamburger ouvre le Mobile drawer. Dans le code de Dawn, le fichier responsable de ce tiroir est snippets/header-drawer.liquid. La boucle Liquid principale s’écrit :

{%- for link in section.settings.menu.links -%}

Le tiroir lisant directement section.settings.menu.links — le même paramètre que celui utilisé sur ordinateur —, toute modification apportée à votre Main menu met à jour simultanément les deux affichages.

Certains thèmes proposent peut-être un champ spécifique pour menu mobile dans les paramètres d’en-tête de l’éditeur de thème. Vérifiez vos paramètres d’en-tête avant toute modification de code ou installation d’application.

Étape 1 : Créer vos menus bureau et mobile dans Contenu > Menus

Que vous choisissiez d’éditer le code ou d’utiliser une application, la première démarche consiste à créer vos deux menus dans l’administration.

Utilisez toujours le chemin Contenu > Menus.

Créer le menu pour ordinateur (menu principal avec sous-menus)

1. Dans votre admin Shopify, rendez-vous dans Contenu > Menus.
2. Cliquez sur Menu principal (Main menu) ou sur Ajouter un menu.
3. Cliquez sur Ajouter un élément de menu pour insérer vos pages et catégories principales.
4. Glissez les éléments sous un élément parent pour créer des menus déroulants. Selon les recommandations officielles de Shopify sur les menus déroulants, un élément de premier niveau peut comporter jusqu’à deux niveaux de menus déroulants imbriqués (soit trois niveaux au total).

Créer un menu mobile plus court

1. Dans Contenu > Menus, cliquez sur Ajouter un menu.
2. Donnez-lui un nom explicite, par exemple Mobile menu.
3. Relevez l’identifiant (handle, par exemple mobile-menu). L’option 2 nécessite impérativement cet identifiant.
4. Limitez-vous aux liens essentiels : collections phares, recherche, suivi de commande et contact. Gardez une structure peu profonde.
5. Cliquez sur Enregistrer le menu.

[!NOTE] Créer un Separate mobile menu dans Contenu > Menus enregistre seulement la liste. Il ne sera visible sur votre boutique qu’une fois appelé par votre thème, votre code Liquid ou une Menu app.

Option 1 : Utiliser un seul menu et laisser le drawer gérer le mobile

Pour les boutiques au catalogue resserré, la solution la plus simple consiste à conserver un Main menu unique et à laisser le Mobile drawer de votre thème s’adapter automatiquement aux smartphones.

Vous concevez alors votre menu principal de manière sobre. Sur smartphone, le thème rassemble naturellement ces liens dans un tiroir latéral.

• Avantages : Aucun code, aucun coût d’application et maintenance minimale. Modifier un menu met à jour tous les appareils.
• Inconvénients : Ordinateur et mobile restent strictement identiques. Un méga menu étendu sur bureau génère un tiroir mobile interminable nécessitant un scroll important.

Vérifiez si votre éditeur de thème propose des options de configuration du tiroir. Pour approfondir la structure de vos tiroirs, consultez notre guide sur les mobile drawer menu best practices.

Option 2 : Assigner un menu mobile séparé en modifiant le code du thème

Si vous souhaitez afficher un menu dédié sur mobile sans passer par une application, vous pouvez modifier le fichier Liquid de votre tiroir pour pointer directement vers votre second menu.

Dupliquez d’abord votre thème

Comme le préconise le Centre d’aide Shopify pour la gestion des thèmes, faites toujours une copie de sauvegarde pour annuler facilement vos modifications en cas de problème.

1. Allez dans Boutique en ligne > Thèmes.
2. Cliquez sur les trois points (...) à côté de votre thème actif et sélectionnez Dupliquer.
3. Travaillez exclusivement sur cette copie non publiée.

Pointez le tiroir vers votre menu mobile

1. Sur la copie de votre thème, cliquez sur les trois points (...) puis sur Modifier le code.
2. Dans le thème Dawn, ouvrez snippets/header-drawer.liquid.
3. Trouvez la boucle principale :

{%- for link in section.settings.menu.links -%}

1. Selon la documentation Liquid de Shopify sur l’objet linklists, vous pouvez cibler un menu spécifique via l’objet linklists en utilisant son identifiant. Remplacez la ligne par :

{%- for link in linklists['mobile-menu'].links -%}

(Remplacez 'mobile-menu' par l’identifiant exact noté à l’Étape 1.)

Une solution similaire a été documentée dans la communauté Shopify pour le thème Ride.

[!WARNING] Le nom de fichier ci-dessus est un exemple pour Dawn ; les autres thèmes utilisent un autre fichier, cherchez une boucle similaire qui lit section.settings.menu. Ne modifiez que la boucle externe ; les boucles enfants doivent rester intactes pour afficher les sous-menus. Le code Liquid personnalisé peut devoir être réappliqué après une mise à jour du thème.

Prévisualisez soigneusement le thème dupliqué sur ordinateur et mobile avant de le publier.

Option 3 : Utiliser une application de menu pour séparer bureau et mobile

Si vous préférez une gestion visuelle sans manipuler de code Liquid, une Menu app dédiée constitue une alternative efficace.

Ces applications permettent d’éditer des mises en page distinctes selon les écrans : un méga menu multi-colonnes pour ordinateur, et un tiroir fluide ou une barre d’onglets inférieure pour smartphone.

Critères clés lors du choix d’une application :

• Contrôles de visibilité par appareil : Possibilité d’activer un menu pour Mobile, Bureau ou les deux.
• Aperçu mobile intégré : Prévisualisation des interfaces tactiles directement dans l’application.
• Mode d’installation : Vérifiez si l’application s’ajoute via un Theme App Embed ou si elle vous demande de modifier les fichiers du thème.
• Compatibilité avec le thème : Intégration fluide avec l’en-tête de votre thème actuel.

Pour déterminer la disposition idéale pour vos produits, consultez notre article choose the right menu type for each screen.

Règles de conception pour un menu mobile

Concept illustration : menus déroulants trop imbriqués comparés à une navigation condensée avec de larges cibles tactiles.

Pour concevoir un menu mobile ergonomique, appliquez ces principes UX :

• Fewer items (Moins d’éléments) : L’espace vertical sur smartphone est restreint. Mettez en avant vos meilleures ventes, collections majeures, recherche et support. Déplacez les liens secondaires (presse, recrutement) dans le pied de page.
• Larger tap targets (Cibles tactiles plus larges) : Les doigts manquent de la précision d’une souris. Selon la norme WCAG 2.2 Critère 2.5.8 (Taille minimale des cibles), la taille de la cible tactile doit mesurer au moins 24×24 pixels CSS (avec quelques exceptions). Des marges généreuses évitent les erreurs de frappe.
• Shallow nesting (Imbrication superficielle) : Les accordéons profondément imbriqués sont plus difficiles à utiliser sur un petit écran. Privilégiez un Shallow nesting composé d’une liste simple ou d’un seul sous-niveau.
• Au-delà du hamburger : Les études du Nielsen Norman Group montrent que l’icône hamburger n’est pas comprise immédiatement par tous les profils. Associer un tiroir à des éléments visibles, comme une barre d’onglets inférieure, rend les sections clés immédiatement accessibles.

Découvrez les structures hybrides dans notre article sur la mobile navigation beyond the hamburger menu.

Tester avant de publier

Comme le recommande le Centre d’aide Shopify, testez vos menus sur des appareils mobiles réels pour vous assurer que les menus déroulants se déploient convenablement.

Étapes de contrôle recommandées :

1. Aperçu dans l’éditeur de thème : Basculez entre les vues Ordinateur et Mobile pour vérifier le rendu initial.
2. Test sur un smartphone réel : Ouvrez le lien d’aperçu sur un téléphone sous Safari et Chrome.
3. Ouverture du tiroir : Assurez-vous que le tiroir s’ouvre et se referme sans à-coups.
4. Déploiement des sous-menus : Appuyez sur chaque accordéon pour vérifier qu’aucun texte ne déborde.
5. Vérification des liens : Vérifiez que chaque élément mène à une collection active sans erreur 404.
6. Orientation paysage : Tournez l’appareil à l’horizontale pour vérifier la lisibilité et l’accès au bouton de fermeture.
7. Parcours multi-pages : Testez la navigation depuis l’accueil, une collection et une fiche produit.

Problèmes fréquents et solutions

• L’ancien menu s’affiche toujours sur mobile : Vous visualisez peut-être votre thème en ligne alors que vos modifications ont été faites sur une copie non publiée. Vérifiez également que l’identifiant dans linklists['mobile-menu'].links correspond exactement à celui défini dans Contenu > Menus.
• Le nouveau menu n’apparaît nulle part : Créer un menu dans Contenu > Menus enregistre seulement la donnée. Il ne sera visible qu’après avoir été configuré dans l’en-tête du thème, appelé par code Liquid ou activé dans une application.
• Supprimer un parent a effacé tous les sous-éléments : Selon les règles d’édition de menu Shopify, supprimer un élément parent supprime automatiquement les éléments imbriqués. Faites glisser les éléments enfants hors du parent avant de supprimer le parent.
• Les menus déroulants ne s’ouvrent pas sur mobile : Contrôlez la profondeur d’arborescence. Shopify autorise au maximum deux niveaux imbriqués sous un parent ; restez dans cette limite pour votre menu mobile et testez-le dans le tiroir de votre thème.
• Les sous-menus du tiroir ont disparu après modification du code : Assurez-vous d’avoir uniquement remplacé la boucle externe for link in section.settings.menu.links. Modifier les boucles internes (for childlink in link.links) empêchera l’affichage des sous-catégories.

Compromis : quand ne pas séparer vos menus

Quand ne pas séparer vos menus

Créer deux menus distincts n’est pas toujours nécessaire :

• Catalogues restreints : Un catalogue petit et simple s’accommode très bien d’un menu unique.
• Ressources de gestion limitées : Gérer deux menus implique de mettre à jour deux listes dans Contenu > Menus à chaque nouveauté. Tout oubli pénalise l’expérience mobile.
• Mises à jour fréquentes sans assistance technique : Les modifications Liquid manuelles peuvent devoir être réappliquées après une mise à jour du thème.

Si un menu sobre répond aux attentes sur tous les écrans, conserver une structure unifiée reste la solution la plus stable.

Où se positionne Navi+

Si vous préférez ne pas modifier le code du thème, Navi+ vous permet de créer un méga menu pour ordinateur et un menu mobile ou une tab bar distincte, puis de choisir sur quel appareil chacun s’affiche. Vous pouvez l’essayer avec le forfait gratuit tout en laissant votre thème intact.

Navi+ permet aux marchands de créer des barres d’onglets inférieures fixes, des méga menus multi-colonnes, des tiroirs mobiles et des boutons flottants par glisser-déposer sans coder.

Dans l’onglet Publish de chaque menu, Navi+ propose des boutons d’activation indépendants :

• Bouton Mobile : Affiche le menu sur les smartphones.
• Bouton Desktop : Affiche le menu sur les écrans d’ordinateur.

Par défaut, seul l’affichage Mobile est actif lors de la création d’un menu mobile. Vous pouvez conserver cette configuration pour votre tiroir sur téléphone et activer uniquement le mode Desktop pour un méga menu sur ordinateur. Les deux menus coexistent indépendamment et acceptent jusqu’à trois niveaux d’arborescence.

Pour parfaire la navigation mobile, vous pouvez associer un tiroir à une bottom tab bar for Shopify, maintenant la recherche, le panier et les rubriques clés directement sous le pouce.

Checklist d’action

• Auditer le catalogue : Déterminer si deux menus distincts sont indispensables ou si un menu unique suffit.
• Créer le menu bureau : Dans Contenu > Menus, configurez votre menu principal avec collections et sous-menus.
• Créer le menu mobile : Dans Contenu > Menus, créez une liste allégée et notez son identifiant.
• Vérifier l’éditeur de thème : Vérifiez si votre section En-tête propose déjà un champ pour menu mobile.
• Choisir votre méthode : Optez pour l’option 1 (menu unique), l’option 2 (code) ou l’option 3 (application).
• Dupliquer le thème avant de coder : Si vous choisissez l’option 2, dupliquez votre thème et modifiez snippets/header-drawer.liquid sur la copie.
• Régler la visibilité par écran : Si vous utilisez une application, assignez le méga menu au bureau et le tiroir au mobile.
• Tester sur un smartphone réel : Contrôlez l’ouverture du tiroir, le déploiement des sous-menus et la rotation horizontale.
• Synchroniser les mises à jour : Mettez à jour les deux listes dans Contenu > Menus dès que votre offre évolue.

Foire aux questions (FAQ)

Puis-je afficher un menu différent sur mobile et sur ordinateur ?

Oui, mais la plupart des thèmes Shopify utilisent le même menu par défaut. Pour afficher des liens distincts, vous devez modifier le code du tiroir ou utiliser une application de menu.

Pourquoi mon menu mobile affiche-t-il les mêmes liens que mon menu pour ordinateur ?

Dans des thèmes comme Dawn, le tiroir mobile lit le paramètre de menu configuré dans la section En-tête (section.settings.menu.links). Modifier le menu principal affecte donc les deux formats.

Dois-je modifier le code du thème pour utiliser deux menus ?

Non, une application de menu permet d’attribuer des menus séparés par appareil sans toucher au code. Si vous choisissez de coder, dupliquez impérativement votre thème au préalable.

Où créer des menus dans Shopify ?

Vous créez et administrez l’ensemble des menus de votre boutique dans Contenu > Menus de votre interface Shopify.

Combien de niveaux un menu déroulant Shopify peut-il avoir ?

Un élément de premier niveau peut inclure jusqu’à deux niveaux de menus déroulants imbriqués, soit trois niveaux de navigation au maximum.

Que se passe-t-il si je supprime un élément de menu parent ?

Supprimer un élément parent entraîne automatiquement la suppression de tous les sous-éléments imbriqués en dessous. Déplacez vos sous-éléments hors du parent avant de supprimer le parent.

Sources

• Shopify Help Center: Editing Menus — Gestion des menus dans Contenu > Menus et règles de suppression des éléments imbriqués.
• Shopify Help Center: Drop-down Menus — Limite de deux niveaux d’imbrication, affichage selon le thème et tests mobiles.
• Shopify Help Center: Duplicating Themes — Bonnes pratiques pour dupliquer un thème avant toute retouche de code.
• Shopify Developer Documentation: Liquid linklists Object — Référence de l’objet Liquid linklists pour cibler un menu par son identifiant.
• Shopify Dawn Repository: sections/header.liquid — Code source du thème Dawn illustrant le paramètre link_list de l’en-tête.
• Shopify Dawn Repository: snippets/header-drawer.liquid — Code source montrant la boucle du tiroir mobile sur section.settings.menu.links.
• Shopify Community: Customizing Main Menu and Sidebar Menu for Desktop and Mobile — Solution communautaire pour adapter header-drawer.liquid sur le thème Ride.
• Shopify Community: Use Different Menu for Mobile and Desktop — Échange communautaire soulevant le besoin récurrent de menus dissociés.
• Fudge: How to Change Mobile Menu Behavior in Shopify — Guide sur l’unification par défaut des menus et les ajustements mobiles.
• W3C Web Accessibility Initiative: WCAG 2.2 Target Size (Minimum) — Critère 2.5.8 fixant la taille minimale des cibles tactiles à 24×24 pixels CSS.
• Nielsen Norman Group: Mobile Navigation Beyond the Hamburger — Étude d’utilisabilité sur la visibilité du menu hamburger et les modèles hybrides.
• Navi+ Help Center: Display Rules Settings — Guide de configuration des règles de visibilité Mobile et Desktop.
• Shopify App Store: Navi+ Navigation & Menu Bar — Détails de l’application pour concevoir méga menus, tiroirs et barres d’onglets.