Modifier le menu mobile Shopify : Liens, icône et tiroir (2026)

Points clés à retenir

Le menu mobile utilise la même navigation que sur ordinateur par défaut.

Les paramètres d’apparence du menu mobile se trouvent dans l’Éditeur de thème > section En-tête (Header).

Vous pouvez modifier le style de l’icône hamburger et le comportement du tiroir dans l’Éditeur de thème.

Pour une navigation mobile complètement différente (des liens ou une disposition différents), vous avez besoin de code ou de Fudge.

Pour modifier le menu mobile dans Shopify, modifiez ses liens dans Boutique en ligne > Navigation > Menu principal, et son icône, le style du tiroir et les boutons dans Boutique en ligne > Thèmes > Personnaliser > En-tête (Header). L’ordinateur et le mobile partagent le même menu à moins que votre thème ne vous permette d’en attribuer un distinct.

Pourquoi vous pouvez nous faire confiance

Nous avons créé et personnalisé des centaines de boutiques Shopify. Nous développons également Fudge, l’opérateur IA pour les boutiques Shopify, avec une note de 4.9 sur le Shopify App Store.

L’apparence du menu mobile se configure dans l’éditeur de thème, et non dans la section Navigation.

Étape 1. Allez dans Boutique en ligne > Thèmes > Personnaliser (Customize).

Étape 2. Dans la barre latérale gauche, cliquez sur la section En-tête (Header).

Étape 3. Cherchez les paramètres liés au menu mobile. Selon votre thème, vous pourriez voir :

Style de l’icône du menu (Menu icon style) - hamburger (trois lignes) vs icône X, taille de l’icône
Type de menu mobile (Mobile menu type) - tiroir (glisse depuis la gauche) vs superposition (couvre tout l’écran)
Afficher les liens de réseaux sociaux dans le menu mobile (Show social media links in mobile menu) - interrupteur
Afficher le sélecteur de pays/langue dans le menu mobile (Show country/language selector in mobile menu) - interrupteur
Un paramètre de menu mobile (Mobile menu) où vous pouvez attribuer un menu spécifique à utiliser sur mobile (sur certains thèmes)

Étape 4. Faites vos modifications et enregistrez.

Par défaut, Shopify utilise le Menu principal (Main menu) pour la navigation sur ordinateur et sur mobile. Toutes les modifications que vous apportez dans Boutique en ligne > Navigation > Menu principal s’appliquent aux deux.

Cela convient à la plupart des boutiques. Si vous voulez les mêmes liens dans un ordre différent sur mobile, ou des liens entièrement différents sur mobile, vous devez :

Attribuer un menu différent à la navigation mobile (si votre thème le permet)
Utiliser du code pour afficher du contenu différent de manière conditionnelle

Pour ajouter, renommer et imbriquer les liens eux-mêmes, voir comment modifier les menus de navigation dans Shopify.

Certains thèmes (en particulier les thèmes payants) vous permettent d’assigner un menu distinct pour la navigation mobile dans les paramètres d’en-tête de l’éditeur de thème. Si vous voyez une option « Menu mobile » ou « Menu secondaire » dans la section En-tête qui accepte un élément de menu, vous pouvez :

Créer un nouveau menu dans Boutique en ligne > Navigation (ex. : « Navigation mobile »)
Ajouter les liens que vous souhaitez spécifiquement pour le mobile
Assigner ce nouveau menu dans l’Éditeur de thème > En-tête > paramètre du menu mobile

Si votre thème ne propose pas cette option, la création d’une navigation spécifique au mobile nécessite des modifications dans le code.

Pour une personnalisation plus poussée – largeur de tiroir personnalisée, différentes tailles de police sur mobile, un en-tête mobile collant (sticky) avec des icônes personnalisées, une barre de navigation en bas sur mobile – vous devez modifier les fichiers Liquid et CSS de l’en-tête de votre thème.

Personnalisations courantes du menu mobile effectuées via le code :

Barre de navigation en bas (Bottom tab bar) - une barre inférieure fixe avec des icônes pour Accueil, Boutique, Recherche, Panier, Compte
Superposition plein écran (Full-screen overlay) avec des liens centrés et un texte en gros
Position ou style du bouton de fermeture personnalisé
Barre de recherche à l’intérieur du tiroir du menu mobile
Liens d’accès rapide en haut du tiroir mobile (Compte, Suivi de commande, etc.)

Fudge, l’opérateur IA pour les boutiques Shopify, effectue ces modifications à partir d’une description en langage clair dans son store editor : « Ajoute une barre de navigation en bas sur mobile avec des icônes pour l’Accueil, les Collections, la Recherche et le Panier. Elle doit rester collée en bas de l’écran. » Fudge écrit le code de l’en-tête sous forme de brouillon, vous permettant ainsi d’essayer la nouvelle navigation sur votre téléphone avant de la publier. Les petites zones de clic et les mises en page qui cassent sur les petits écrans font également partie des éléments qu’il vérifie quand vous lui demandez de trouver où les acheteurs sur mobile abandonnent.

Envie d'une navigation mobile sur mesure ? Décrivez-la à Fudge.

Démarrer l'essai gratuit

L’icône hamburger - qu’est-ce que c’est et comment la modifier

L’icône hamburger (trois lignes horizontales) est le bouton qui ouvre le menu mobile. Dans l’Éditeur de thème > En-tête, vous pouvez éventuellement :

Modifier sa taille
Choisir d’afficher ou non une étiquette de texte (“Menu”) à côté
Modifier sa couleur (souvent héritée de la couleur du texte de l’en-tête)

Pour une icône entièrement personnalisée (une icône SVG, un symbole différent ou une animation sur mesure), il faut modifier le template Liquid de l’en-tête.

Le menu mobile est souvent chargé dans le HTML de la page même lorsqu’il n’est pas ouvert (il est simplement masqué avec le CSS). Cela signifie que le contenu du menu n’a pas d’impact significatif sur la vitesse de chargement de la page. Cependant, les applications qui ajoutent des fonctionnalités de menu peuvent ajouter du JavaScript qui affecte les performances.

Si vous avez remarqué une lenteur du menu mobile après l’installation d’une application de navigation, vérifiez si le script de l’application peut être différé (deferrable). La plupart des développeurs d’applications peuvent vous conseiller à ce sujet.

Pour les liens du menu qui sont difficiles à cliquer, voir comment rendre les boutons Shopify plus faciles à taper.

Après avoir effectué des modifications, testez toujours sur un véritable appareil mobile - pas seulement en redimensionnant la fenêtre de votre navigateur. Le redimensionnement du navigateur ne simule pas avec précision les événements tactiles, le rendu des polices ou le véritable viewport mobile.

Utilisez l’émulation mobile de Chrome DevTools pour une vérification rapide, puis validez sur de véritables appareils iOS et Android avant de considérer la modification comme terminée.

FAQ

Pourquoi mon menu mobile Shopify n'affiche-t-il pas les mêmes liens que sur ordinateur ?

Certains thèmes (souvent premium) permettent d'attribuer des menus Principal et Mobile distincts dans les paramètres de l'En-tête (Header). Si vous avez attribué un menu différent à l'emplacement mobile, il différera de celui sur ordinateur. Vérifiez dans Éditeur de thème → En-tête s'il y a un sélecteur "Menu mobile" ou "Menu secondaire", et alignez-le avec le menu principal si vous voulez qu'ils soient identiques.

Puis-je faire en sorte que le menu mobile s'ouvre au survol plutôt qu'au clic ?

Non. Les appareils tactiles ne prennent pas en charge les événements de survol (hover) de la même manière que les souris — il n'y a pas d'état de "survol" cohérent lorsqu'on tape avec le doigt. Le menu mobile doit s'ouvrir au clic (tap). iOS émule le survol pour certaines interactions, mais c'est peu fiable pour la navigation.

Comment ajouter des icônes à côté des éléments du menu mobile ?

L'éditeur de navigation de Shopify ne gère que le texte brut — les icônes nécessitent du code. Décrivez-le à Fudge ("ajoute des icônes Lucide à côté des éléments du menu mobile en fonction de leur handle") et il modifiera le Liquid de l'en-tête pour rendre un SVG par élément de menu conditionnellement à l'URL ou au handle. Manuellement : écrivez une condition dans le Liquid de l'en-tête qui choisit une icône pour chaque URL ou titre de lien.

Dois-je inclure une barre de recherche dans le tiroir du menu mobile ?

Oui pour les boutiques ayant plus de 30 SKUs — la recherche génère une part importante des sessions mobiles sur les boutiques avec beaucoup de produits. Pour les marques très sélectives avec moins de ~30 SKUs, la recherche ajoute de l'encombrement sans grand retour sur investissement. Si les acheteurs font beaucoup de recherches, gardez la recherche visible dans l'en-tête ; sinon, mettez-la dans le tiroir pour ne pas surcharger l'en-tête.

Puis-je ajouter le lien du compte client au menu mobile ?

La plupart des thèmes modernes incluent automatiquement les liens Compte/Connexion dans le tiroir mobile lorsque les comptes clients sont activés (Paramètres → Comptes clients). Si le vôtre ne le fait pas, ajoutez le lien manuellement via Boutique en ligne → Navigation → Menu principal (ou votre menu mobile) et ajoutez /account comme URL.