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.

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 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

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 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.

Vous voulez une navigation mobile sur mesure ? Décrivez-la à Fudge.

Try Fudge for Free

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 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.

Après avoir apporté des modifications, testez toujours sur un véritable appareil mobile, et pas seulement en redimensionnant la fenêtre de votre navigateur. Le redimensionnement du navigateur ne simule pas de manière précise les événements tactiles, le rendu des polices ou le véritable espace d’affichage (viewport) mobile.

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