Comment créer un menu responsive sur Shopify (navigation mobile)

Plus de 60% du trafic des boutiques Shopify vient des smartphones. Pourtant, le menu de navigation est souvent la partie la moins soignée d'une boutique e-commerce mobile. Des liens illisibles, des dropdowns qui ne fonctionnent pas au toucher, un hamburger qui s'ouvre mais que personne ne ferme : les détails qui irritent les visiteurs et font chuter les taux de conversion.

Bonne nouvelle : Shopify gère nativement une bonne partie du travail. Mauvaise nouvelle : les thèmes ne sont pas tous équivalents, et certains cas demandent soit du code, soit une app.

Voici comment aborder ça par ordre de complexité.

Comprendre comment Shopify gère la navigation par défaut

Avant d'installer quoi que ce soit, il faut comprendre ce que Shopify fait déjà.

Sur Shopify, la navigation est gérée depuis Boutique en ligne > Navigation. Tu crées des menus (liste de liens) et tu les assignes à des emplacements dans ton thème (header, footer, mobile...).

La plupart des thèmes Shopify 2.0 récents convertissent automatiquement le menu principal en menu hamburger sur mobile. Ça signifie que si ton thème est à jour, une partie du travail est déjà faite. Ce que tu dois vérifier :

1. Le menu s'affiche-t-il correctement sur mobile ? Teste sur un vrai smartphone, pas juste le mode responsive de Chrome.
2. Les sous-menus (dropdowns) fonctionnent-ils au toucher ? Sur desktop ils s'ouvrent au survol, sur mobile il faut un tap.
3. Le menu se ferme-t-il quand on clique ailleurs ? Un menu qui reste ouvert perturbe la navigation.

"Avant de modifier quoi que ce soit, prends 10 minutes à naviguer sur ta boutique depuis ton téléphone comme si tu étais client. Tu trouveras tes problèmes de menu bien plus vite que dans le dashboard Shopify."

Option 1 : modifier le menu via l'éditeur natif Shopify (sans code)

C'est le point de départ.

Étape 1 : créer ou modifier un menu

Dans ton admin Shopify, va dans Boutique en ligne > Navigation, puis clique sur le menu que tu veux modifier (souvent "Menu principal").

Tu peux ajouter des liens vers :

• Des collections
• Des produits
• Des pages
• Des URLs externes
• Des articles de blog

Étape 2 : créer des sous-niveaux

Certains thèmes supportent un deuxième niveau de navigation (dropdowns). Pour en créer un, dans l'éditeur de menu, glisse un lien sous un autre lien en le décalant légèrement. Il devient un sous-élément.

Attention : tous les thèmes ne supportent pas les menus à plusieurs niveaux. Si le tien ne le permet pas, aucune manipulation dans l'éditeur de menu ne changera ça.

Étape 3 : assigner le menu au bon emplacement

Dans l'éditeur de thème (Personnaliser), les thèmes modernes permettent d'assigner différents menus à différents emplacements : header desktop, navigation mobile, footer. Si ton thème le permet, tu peux créer un menu mobile spécifique plus épuré que le menu desktop.

Voici une configuration simple qui fonctionne bien :

Option 2 : personnaliser le CSS pour le responsive (développeurs)

Si tu sais éditer du CSS, tu peux affiner le comportement mobile directement dans Thème > Modifier le code > Assets > theme.css (ou son équivalent dans ton thème).

Les personnalisations CSS courantes pour la navigation mobile :

/* Agrandir les liens du menu hamburger pour le toucher */
.mobile-nav__item a {
  padding: 14px 20px;
  font-size: 16px;
  display: block;
}

/* Masquer des éléments desktop sur mobile */
@media screen and (max-width: 768px) {
  .header__nav-desktop {
    display: none;
  }
}

Ce n'est pas une solution universelle : les classes CSS varient selon le thème. Avant d'éditer le CSS, identifie les classes de ton thème spécifique via l'inspecteur du navigateur.

Règle importante : si ton thème a des mises à jour, les modifications CSS dans les fichiers du thème peuvent être écrasées. Pour éviter ça, utilise le fichier custom.css ou additional-css si ton thème en propose un.

Option 3 : les apps de mega menu

Si tes besoins vont au-delà de ce que le thème propose nativement, les apps de méga menu sont la solution la plus rapide.

Les plus utilisées en 2026 :

Qikify Mega Menu Permet de créer des menus multi-colonnes avec images, collections en grille, et navigation mobile adaptée. Interface sans code. Gratuit jusqu'à un certain niveau, puis ~$9-15/mois.

Buddha Mega Menu Similaire à Qikify, avec une emphase sur les menus visuels (images de catégories dans le menu). Populaire pour les boutiques mode et décoration. Freemium aussi.

Ces apps injectent leur propre HTML/CSS pour remplacer le menu natif du thème. Avantages : beaucoup plus de flexibilité visuelle. Inconvénient : une app supplémentaire qui charge du JS, ce qui peut légèrement impacter les performances.

Si tu as déjà accéléré ton site Shopify, tu sais que chaque script supplémentaire a un coût. À prendre en compte dans la décision.

Option 4 : liquid pour les thèmes avancés

Pour les développeurs Shopify, la navigation est gérée dans les fichiers Liquid du thème, généralement dans sections/header.liquid ou un fichier similaire.

Les points d'intervention courants :

• Modifier l'affichage conditionnel desktop/mobile avec {% if shop.metafields... %}
• Ajouter une classe CSS conditionnelle selon le niveau de menu
• Créer un render partiel pour un menu mobile dédié

C'est le niveau qui donne le plus de contrôle mais qui demande une vraie maîtrise de Liquid et Shopify CLI. Pour la plupart des boutiques, les options 1 à 3 couvrent 90% des besoins.

Les erreurs classiques à éviter

Trop de niveaux de menu Un menu à 3 niveaux de profondeur sur mobile est illisible. La règle pratique : max 2 niveaux. Si tu as plus de contenu, utilise des pages de catégories ou des landing pages pour organiser ça.

Des liens trop petits Les recommandations Google pour le mobile : zone de toucher minimale de 48x48 pixels pour chaque lien. En dessous, les erreurs de tap augmentent et le score d'ergonomie mobile baisse (ce qui impacte le SEO).

Oublier de tester sur plusieurs appareils Le mode responsive du navigateur desktop ne reproduit pas exactement le comportement sur iOS Safari ou Chrome Android. Teste sur au moins deux vrais appareils différents.

Un menu qui fait doublon avec le footer Le footer mobile est souvent négligé alors qu'il est parcouru par les visiteurs qui cherchent des informations pratiques (contact, CGV, retours). Évite de répliquer exactement le menu principal dans le footer : reserve-y les liens pratiques.

Ne pas mesurer Si tu modifies la navigation, surveille le taux de rebond mobile et le temps sur site avant/après. Un menu qui "semble" mieux peut en pratique gêner si les liens ne sont pas là où tes utilisateurs les cherchent.

Structure de menu recommandée pour une boutique e-commerce

Voici une structure qui fonctionne bien en pratique pour une boutique dropshipping ou e-commerce :

Menu mobile (5-6 éléments max) :

• Accueil
• Collections (ou catégories principales)
• Nouveautés / Bestsellers
• Promotions (si pertinent)
• Contact / FAQ

Menu desktop :

• Même structure + possible méga menu pour les collections si tu as plus de 5 catégories

Footer :

• À propos
• CGV / Mentions légales
• Politique de retour
• Contact
• Blog (si actif)

Outils pour tester ta navigation mobile

Après chaque modification, vérifie :

• Google PageSpeed Insights : l'onglet mobile signale les problèmes d'ergonomie de navigation
• Google Search Console : "Ergonomie mobile" liste les pages avec des problèmes de boutons trop petits ou de liens trop proches
• Ton téléphone : 10 minutes de navigation réelle valent mieux que tous les outils

En lisant le guide sur les applications Shopify indispensables, tu trouveras d'autres outils qui complètent la navigation, notamment pour la recherche interne et les filtres produits.

Résumé : par où commencer

Si tu n'as jamais optimisé ton menu mobile :

1. Teste ta boutique sur téléphone maintenant
2. Si les sous-menus ne fonctionnent pas ou les liens sont trop petits : commence par les paramètres du thème
3. Si le thème est limité : envisage Qikify ou Buddha Mega Menu pour les cas complexes
4. Si tu as des ressources dev : Liquid + CSS custom donnent le meilleur résultat
5. Mesure toujours avant et après

Un bon menu mobile ne se voit pas. Il se ressent dans le fait que les visiteurs trouvent ce qu'ils cherchent sans se tromper de lien.

FAQ

Est-ce que Shopify gère automatiquement le responsive mobile ? Les thèmes Shopify 2.0 récents sont responsive par défaut. Mais "responsive" ne signifie pas "optimisé" : ça signifie que le site s'adapte à la taille d'écran. L'optimisation de la navigation mobile demande souvent des ajustements supplémentaires.

Faut-il créer un menu séparé pour mobile sur Shopify ? Pas obligatoirement. Si ton menu principal est court et bien structuré, le même menu peut servir desktop et mobile. Un menu mobile dédié devient utile quand tu as beaucoup de catégories et que tu veux une version épurée pour les petits écrans.

Les apps de mega menu ralentissent-elles le site ? Elles chargent du JavaScript supplémentaire, ce qui peut impacter légèrement les performances. Mesure ton Core Web Vitals avant/après installation. Pour des boutiques à fort trafic, la performance prime parfois sur les fonctionnalités visuelles.

Comment vérifier si mon menu est bien indexé par Google ? Utilise Google Search Console > Inspection d'URL sur ta page d'accueil. Dans le rendu, les liens du menu doivent apparaître. Si Google ne voit pas les liens de navigation, ça peut indiquer un problème de chargement JavaScript.

Les méga menus avec images impactent-ils le SEO ? Pas négativement si les images ont des attributs alt corrects et que les liens de navigation restent dans le HTML visible. Certains méga menus construits entièrement en JavaScript peuvent être moins bien indexés.