Comportement du menu mobile Shopify : Tiroir & En-tête fixe (2026)

Points clés

Le comportement du menu mobile est contrôlé dans l’éditeur de thème, dans la section Header (En-tête).

Les options courantes incluent le style de l’icône hamburger, le menu tiroir (drawer) vs 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.

Pour modifier le comportement du menu mobile dans Shopify, allez dans Boutique en ligne > Thèmes > Personnaliser, passez à l’aperçu téléphone et sélectionnez la section Header. La plupart des thèmes vous permettent d’y définir le style du menu (tiroir ou plein écran), l’emplacement de la recherche et d’ajouter un en-tête fixe (sticky) sans 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.

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. Idéal pour les boutiques avec de grands arbres de navigation où vous avez besoin de plus d’espace pour afficher toutes les catégories.

Cherchez ce paramètre dans Header → Mobile menu style (le nom varie selon le thème).

Visibilité de la barre de recherche sur mobile

Vous pouvez souvent contrôler l’apparition de la barre de recherche :

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)

Si vos clients font beaucoup de recherches, gardez la barre visible dans l’en-tête ; sinon, placez-la dans le tiroir pour ne pas encombrer l’en-tête.

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.

É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

Shopify utilise le même menu de navigation sur ordinateur et sur mobile par défaut. Si vous souhaitez des liens différents sur mobile — par exemple, un lien “Nous appeler” 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 distinct. Allez dans Boutique en ligne → Navigation → Ajouter un menu. Créez un menu “Mobile Navigation” avec les liens de votre choix. Ensuite, dans certains thèmes, vous pouvez attribuer ce menu spécifiquement à l’emplacement de navigation mobile dans les paramètres du Header.

Tous les thèmes ne prennent pas en charge un menu mobile séparé. Consultez la documentation de votre thème.

Option B — Utiliser du code ou Fudge. Pour avoir un contrôle total sur ce qui apparaît dans le menu mobile par rapport à la version ordinateur, du code personnalisé est nécessaire. Fudge, l’opérateur IA pour les boutiques Shopify, peut l’écrire pour vous. Décrivez la modification à son éditeur de boutique :

“Affiche un bouton ‘Nous appeler’ dans le menu mobile qui n’apparaît pas dans la navigation sur ordinateur.”

Fudge écrit le menu sous forme de code natif dans votre thème et l’enregistre comme brouillon, ce qui vous permet d’ouvrir l’aperçu sur votre téléphone et de le tester avant la mise en ligne. Si cela ne plaît pas à vos clients, vous pouvez annuler la modification en un clic.

Personnalisez votre menu mobile en le décrivant.

Démarrer l'essai gratuit

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.

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 menu différentes selon le groupe de clients (connecté vs invité)

FAQ

Pourquoi mon menu mobile ne se ferme-t-il pas quand je tape à l'extérieur ?

Il s'agit généralement d'un bug JavaScript dans une ancienne version du thème, ou d'une application installée qui interfère avec la détection des clics extérieurs. Vérifiez si une mise à jour est disponible pour votre thème — les thèmes modernes comme Dawn, Sense et Refresh gèrent cela correctement. Si vous avez installé une app de navigation, désactivez-la temporairement pour confirmer si elle est en cause.

Puis-je avoir une barre de navigation fixe en bas (sticky) comme sur une app native au lieu d'un hamburger ?

Peu de thèmes en proposent une. Une option : décrivez ce que vous voulez à Fudge ("ajoute une nav mobile fixée en bas avec les icônes Accueil, Boutique, Recherche et Panier, masquée sur ordinateur") et il générera la section en code de thème natif. La structure est simple (conteneur fixé en bas, 3-5 icônes, mobile uniquement via media query) mais sur la plupart des thèmes, il faut le coder soi-même plutôt que d'activer une simple option.

Pourquoi mes menus déroulants ne s'ouvrent-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 convertissent automatiquement les menus au survol pour qu'ils s'ouvrent au toucher sur mobile. Si ce n'est pas le cas, votre thème est trop ancien — mettez-le à jour, ou ajoutez du JavaScript qui active une classe "open" au toucher.

Quelle doit être la taille des zones tactiles dans le menu mobile ?

Apple recommande au moins 44x44 points et le Material Design de Google 48x48dp. Des liens de menu trop rapprochés entraînent des erreurs de clic. Augmentez l'espacement (padding) des liens de navigation plutôt que d'agrandir la police.

Dois-je afficher une barre de recherche dans le menu mobile ?

Pour les boutiques avec un large catalogue, oui — beaucoup d'acheteurs sur mobile préfèrent chercher directement plutôt que de naviguer dans des menus complexes. Pour les marques très sélectives avec moins d'une trentaine de produits (SKU), la recherche surcharge l'interface sans réel bénéfice. Si les clients recherchent beaucoup, gardez la recherche visible dans l'en-tête ; sinon, mettez-la dans le menu tiroir pour garder l'en-tête épuré.