Points clés
- Par défaut, le menu mobile utilise la même navigation que sur ordinateur.
- Les paramètres d’apparence du menu mobile se trouvent dans l’éditeur de thème (Theme Editor) > section En-tête (Header).
- Vous pouvez modifier le style de l’icône hamburger et le comportement du tiroir (drawer) dans l’éditeur de thème.
- Pour une navigation mobile complètement différente (liens ou mise en page différents), vous aurez besoin de code ou de Fudge.
Sur mobile, la plupart des thèmes Shopify réduisent la navigation de l’en-tête en un menu hamburger qui ouvre un tiroir (drawer) ou se superpose à l’écran (overlay). Voici comment le personnaliser.
Pourquoi vous pouvez nous faire confiance
Nous avons créé et personnalisé des centaines de boutiques Shopify. Nous avons également créé Fudge - un éditeur de boutique IA noté 5.0 sur le Shopify App Store.
Comment modifier les paramètres du menu mobile dans l’éditeur de thème
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.
Liens du menu mobile - identiques à la version bureau par défaut
Par défaut, Shopify utilise le Menu principal (Main menu) pour la navigation sur bureau et sur mobile. Toute modification effectuée dans Boutique en ligne > Navigation > Menu principal s’applique aux deux.
C’est très bien pour la plupart des boutiques. Si vous voulez les mêmes liens dans un ordre différent sur mobile, ou des liens totalement différents sur mobile, vous devez soit :
Sur le même sujet : Modifier les menus de navigation sur Shopify.
- Assigner un menu différent à la navigation mobile (si votre thème le permet)
- Utiliser du code pour afficher un contenu différent sous certaines conditions
Comment assigner un menu différent sur mobile
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.
Modifier l’apparence du menu mobile via le code
Pour une personnalisation plus poussée (largeur de tiroir sur mesure, différentes tailles de police sur mobile, un en-tête mobile 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 (header) de votre thème.
Personnalisations fréquentes du menu mobile effectuées via le code :
- Barre de navigation en bas (bottom tab bar) - une barre fixe en bas de l’écran avec des icônes pour l’Accueil, la Boutique, la Recherche, le Panier, le Compte
- Overlay plein écran avec des liens centrés et du grand texte
- Position ou style personnalisé du bouton de fermeture
- Barre de recherche à l’intérieur du tiroir du menu mobile
- Liens d’accès rapide en haut du tiroir mobile (Compte, Suivre ma commande, etc.)
Décrivez ce que vous voulez à Fudge : “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 fixée en bas de l’écran.” Fudge génère le code et affiche un brouillon avant publication.
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.
Menu mobile et vitesse de la page
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 du 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 rajouter du JavaScript qui lui, affecte les performances.
Si vous remarquez des lenteurs dans le menu mobile après avoir installé une application de navigation, vérifiez si l’exécution du script de l’application peut être différée (deferrable). La plupart des développeurs d’applications pourront vous conseiller à ce sujet.
Sur le même sujet : Rendre les boutons Shopify plus faciles à cliquer sur mobile.
Sur le même sujet : Créer un menu déroulant sur Shopify.
Tester votre menu mobile
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 desktop ?
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 sera différent de la version desktop. Allez dans l’Éditeur de thème → En-tête (Header) pour chercher un sélecteur de “Menu mobile” ou “Menu secondaire”, puis 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 (hover) au lieu du tap ?
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” constant lors d’un tapotement de doigt. Le menu mobile doit s’ouvrir au toucher. iOS simule bien le survol pour certaines interactions, mais ce n’est pas 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. La méthode la plus rapide : décrivez ce que vous voulez à Fudge (“ajouter 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 afficher un SVG par élément de menu en fonction de l’URL ou du handle. Méthode manuelle : ajoutez des tags à vos éléments de menu et écrivez le rendu conditionnel vous-même.
Dois-je inclure une barre de recherche dans le tiroir du menu mobile ?
Oui pour les boutiques de plus de 30 références (SKU) — la recherche génère une part significative des sessions mobiles sur les boutiques avec beaucoup de produits. Pour les marques aux collections plus restreintes de moins de ~30 SKU, la recherche ajoute de l’encombrement sans grand avantage. Gardez-la à l’intérieur du tiroir plutôt que toujours visible pour éviter d’encombrer l’en-tête.
Puis-je ajouter le lien du compte client au menu mobile ?
La plupart des thèmes modernes incluent automatiquement des liens Compte/Connexion dans le tiroir mobile lorsque les comptes clients sont activés (Paramètres → Comptes clients). Si ce n’est pas le cas pour le vôtre, ajoutez le lien manuellement via Boutique en ligne → Navigation → Menu principal (ou votre menu mobile) et ajoutez /account comme URL.
Pour plus de détails, consultez notre guide sur la façon de modifier le comportement du menu mobile dans Shopify.