À retenir
- Le comportement du menu mobile se gère dans l’éditeur de thème, dans la section En-tête (Header).
- Les options courantes incluent le style de l’icône hamburger, le type de menu (tiroir ou plein écran) et la visibilité de la barre de recherche.
- Avoir des éléments de menu différents sur mobile et sur ordinateur nécessite du code personnalisé ou Fudge.
- Testez toujours la navigation mobile sur un vrai appareil — l’aperçu de l’éditeur de thème s’en rapproche, mais ne reproduit pas tous les comportements tactiles.
La navigation mobile est l’un des éléments les plus utilisés sur votre boutique Shopify. Un menu mal conçu rend la recherche de produits plus difficile pour les acheteurs, ce qui signifie moins de conversions. La bonne nouvelle, c’est que la plupart des thèmes vous donnent un vrai contrôle sur le comportement du menu mobile — sans avoir à toucher au code.
Comment modifier la vue mobile sur Shopify ?
Commencez par l’aperçu mobile de l’éditeur de thème. Allez dans Boutique en ligne → Thèmes → Personnaliser, puis cliquez sur l’icône de téléphone en haut de l’éditeur. Allez dans la section En-tête (Header) dans la barre latérale gauche pour accéder aux paramètres du menu mobile.
Ce que vous pouvez modifier dans l’éditeur de thème
Style de l’icône hamburger
La plupart des thèmes vous laissent choisir entre :
- Lignes (hamburger classique) — trois lignes horizontales
- Lignes + texte (label) — le mot “Menu” à côté de l’icône
- Variations d’icônes — certains thèmes proposent d’autres styles d’icônes
L’option avec texte peut aider les utilisateurs qui ne sont pas familiers avec l’icône hamburger, en particulier les publics plus âgés. Pour un guide complet sur la modification du contenu et des liens du menu mobile, consultez comment modifier le menu mobile sur Shopify.
Type de menu — tiroir vs plein écran
C’est le paramètre qui a le plus d’impact :
Menu tiroir (Drawer) — glisse depuis la gauche (ou la droite) et se superpose au contenu. Très populaire sur la plupart des thèmes Shopify modernes. Permet aux utilisateurs de voir qu’ils n’ont pas quitté la page.
Menu plein écran — occupe tout l’écran une fois ouvert. Fonctionne bien pour les boutiques avec de grands arbres de navigation où vous avez besoin de plus d’espaces pour afficher toutes les catégories.
Cherchez ce paramètre dans En-tête (Header) → Style du menu mobile (le nom varie selon le thème).
Visibilité de la barre de recherche sur mobile
Vous pouvez souvent contrôler la façon dont la barre de recherche apparaît :
- Dans l’en-tête mobile (toujours visible)
- À l’intérieur du tiroir/menu (visible uniquement quand le menu est ouvert)
- Entièrement masquée (recherche uniquement sur ordinateur)
Pour les boutiques avec beaucoup de produits, il est judicieux de garder une barre de recherche visible sur mobile — beaucoup d’acheteurs utilisent la recherche plutôt que la navigation.
En-tête fixe (sticky) sur mobile
Certains thèmes vous permettent de contrôler l’en-tête de manière indépendante pour mobile et ordinateur. Un en-tête fixe (sticky header) sur mobile garde votre navigation accessible pendant que les utilisateurs font défiler la page. Cherchez “En-tête fixe” (Sticky header) dans les paramètres de la section En-tête.
Comment modifier le style du menu ?
Étape 1 — Ouvrez l’éditeur de thème. Boutique en ligne → Thèmes → Personnaliser.
Étape 2 — Sélectionnez la section En-tête. Cliquez sur “En-tête” (Header) dans la barre latérale gauche ou cliquez sur la zone d’en-tête directement dans l’aperçu.
Étape 3 — Parcourez les paramètres. Dans le panneau de droite, cherchez les sections intitulées “Menu mobile”, “Navigation” ou “Menu”. Les termes exacts dépendent de votre thème.
Étape 4 — Passez à l’aperçu mobile. Cliquez sur l’icône de téléphone pour voir le résultat en contexte.
Étape 5 — Enregistrez.
Modifier les liens qui s’affichent sur mobile
Par défaut, Shopify utilise le même menu de navigation pour l’ordinateur et le mobile. Si vous voulez des liens différents sur mobile — par exemple, un lien “Appelez-nous” sur mobile mais pas sur ordinateur, ou une liste de catégories simplifiée — vous avez deux options :
Option A — Créer un menu mobile séparé. Allez dans Boutique en ligne → Navigation → Ajouter un menu. Créez un menu “Navigation mobile” avec les liens que vous souhaitez. Ensuite, dans certains thèmes, vous pouvez assigner spécifiquement ce menu à l’emplacement de navigation mobile dans les paramètres de l’en-tête.
Tous les thèmes ne prennent pas en charge un menu mobile séparé. Vérifiez la documentation de votre thème.
Option B — Utiliser du code ou Fudge. Pour un contrôle total sur ce qui apparaît dans le menu mobile par rapport à l’ordinateur, du code personnalisé est nécessaire. Décrivez ce que vous voulez à Fudge:
“Affiche un bouton ‘Appelez-nous’ dans le menu mobile qui n’apparaît pas dans la navigation sur ordinateur.”
Fudge génère le code sous forme de brouillon pour que vous puissiez le vérifier avant sa mise en ligne.
Problèmes fréquents de menu mobile et leurs solutions
Le menu ne se ferme pas lorsqu’on touche à l’extérieur. C’est un problème de comportement JavaScript. Vérifiez si une mise à jour est disponible pour votre thème — c’est souvent corrigé dans les versions plus récentes.
Les sous-menus ne fonctionnent pas sur mobile. Les menus déroulants qui dépendent du survol (hover) ne fonctionnent pas sur les écrans tactiles. Votre thème devrait convertir ces survols en comportement tactile (appuyer pour développer) sur mobile. Si ce n’est pas le cas, c’est une limitation du thème.
Les éléments du menu sont trop petits à toucher. Les zones tactiles doivent faire au moins 44x44px (directives d’Apple). Si les liens du menu semblent trop serrés, vérifiez dans l’éditeur de thème les paramètres de taille des éléments du menu ou de taille de la police. Le CSS peut aussi augmenter le padding sur les liens de navigation. Consultez notre guide pour rendre les boutons Shopify plus adaptés au tactile pour des solutions détaillées.
Le menu chevauche le contenu. C’est un conflit de z-index avec une application ou une section personnalisée. Inspectez avec les DevTools de votre navigateur et augmentez le z-index sur l’overlay du menu.
Quand utiliser une navigation mobile personnalisée
L’éditeur de thème couvre la plupart des cas d’utilisation. Le code sur mesure est utile lorsque vous avez besoin de :
- Une barre de navigation en bas (comme une application native) au lieu d’un menu hamburger
- Une navigation par onglets avec des icônes pour chaque catégorie
- Des structures de menus différentes selon le groupe de clients (connecté vs invité)
Si vous avez d’abord besoin d’un menu déroulant standard, commencez par consulter comment créer un menu déroulant sur Shopify. Pour masquer du contenu spécifique sur mobile plutôt que de modifier le menu, consultez comment masquer du contenu sur mobile dans Shopify.
Ces éléments vont au-delà de la personnalisation standard de thème, mais sont simples à réaliser avec Fudge.
FAQ
Pourquoi mon menu mobile ne se ferme-t-il pas lorsque je tape en dehors ?
C’est généralement dû à un bug JavaScript dans une ancienne version de thème, ou à une application installée qui interfère avec la détection de clic à l’extérieur. Vérifiez si une mise à jour de votre thème est disponible — les thèmes modernes comme Dawn, Sense et Refresh gèrent cela correctement. Si vous avez installé une application de navigation, désactivez-la temporairement pour voir si elle est en cause.
Puis-je avoir une barre de navigation sticky en bas comme sur une application native au lieu d’un hamburger ?
Aucun thème Shopify standard ne le propose nativement. Le chemin le plus rapide : décrivez ce que vous voulez à Fudge (« ajoute une barre de navigation mobile sticky en bas avec les icônes Accueil, Boutique, Recherche et Panier, masquée sur desktop ») et il génère la section sous forme de code de thème natif. Sa création est simple en soi — conteneur sticky en bas, 3 à 5 liens avec icônes, visible seulement sur mobile via une media query — mais cela doit être codé ; aucun thème ne l’affiche comme paramètre.
Pourquoi mes menus déroulants ne se déploient-ils pas sur mobile ?
Le thème utilise des menus déroulants au survol qui ne fonctionnent pas sur les écrans tactiles. Les thèmes Shopify modernes adaptent automatiquement les menus au survol en menus tactiles sur mobile. Si le vôtre ne le fait pas, c’est que votre thème est ancien — mettez-le à jour ou ajoutez du JavaScript pour ajouter une classe “open” au clic.
Quelle doit être la taille des zones cliquables d’un menu mobile ?
Les directives HIG d’Apple et Material de Google recommandent toutes deux au moins 44x44px (ou environ 48x48dp). Des liens de menu trop petits et rapprochés provoquent des erreurs de clic, surtout en tapant à deux pouces. Augmentez le padding de vos liens de navigation plutôt que d’agrandir simplement la taille de la police.
Dois-je afficher une barre de recherche dans le menu mobile ?
Pour les boutiques qui ont un large catalogue de produits, oui — de nombreux acheteurs mobiles préfèrent faire une recherche plutôt que de parcourir des menus imbriqués. Pour des marques plus spécifiques avec moins de 30 références (SKU), la recherche ajoute de la confusion sans réel avantage. Analysez vos statistiques de recherche : si la recherche sur mobile génère au moins 10 % des sessions, laissez-la visible dans le header au lieu de la cacher derrière le hamburger.
