À 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’usage. Le code personnalisé est utile quand vous avez besoin de :
- Une barre de navigation en bas (comme sur 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é ou invité)
Si vous avez d’abord besoin d’un menu déroulant standard, commencez par lire comment créer un menu déroulant sur Shopify. Pour masquer un contenu spécifique sur mobile plutôt que de modifier le menu, consultez comment masquer du contenu sur mobile dans Shopify.
Ces options vont au-delà de la personnalisation standard d’un thème, mais elles sont simples à réaliser avec Fudge.
