Comment adapter un menu de navigation au thème de votre boutique Shopify (Couleurs, Polices, Menu mobile)

Un menu de navigation ne devrait jamais ressembler à une pièce rapportée. Lorsque les visiteurs parcourent votre catalogue, la typographie, les couleurs, les espacements et les arrondis des liens de menu doivent se fondre harmonieusement dans l’ensemble de votre boutique. Pourtant, de nombreux marchands Shopify constatent que si leurs bannières d’accueil sont élégantes, leur navigation détonne—affichant des polices génériques, des arrière-plans disparates, des bordures brutes ou un tiroir mobile sans aucune mise en forme.

Le principe fondamental est simple : un menu correspond à votre thème lorsqu’il réutilise les valeurs que votre thème utilise déjà. Au lieu d’inventer de nouveaux codes hexadécimaux ou de choisir des polices au hasard, lisez d’abord les jetons de conception de votre thème, notez-les sur une feuille de référence, puis appliquez cette même feuille à votre en-tête bureau, à votre tiroir mobile et aux menus de vos applications tierces.

Quick Answer: How to Match a Navigation Menu to Your Store Theme

Pour harmoniser un menu de navigation avec le thème de votre boutique, reprenez les valeurs que votre thème utilise déjà : sa palette de couleurs, ses polices, le rayon d’arrondi et les espacements. Appliquez-les d’abord via les réglages de l’en-tête, puis comblez les écarts avec un peu de CSS personnalisé sur un thème dupliqué, et vérifiez aussi le tiroir mobile.

Suivez ces cinq étapes concrètes :

1. Lire les jetons de conception du thème : Examinez les paramètres de thème pour relever la palette active, les familles de polices et les rayons d’arrondi des boutons.
2. Utiliser les paramètres d’en-tête natifs : Sélectionnez votre menu, attribuez la palette de couleurs correspondante et testez les options de mise en page intégrées.
3. Combler les écarts avec du CSS personnalisé : Ajoutez de courtes règles CSS dans la section En-tête en référençant les variables du thème au lieu de valeurs fixes.
4. Harmoniser le tiroir mobile : Alignez l’arrière-plan du tiroir coulissant, les polices des liens, les lignes de séparation et l’icône hamburger.
5. Harmoniser les menus d’applications : Appliquez les mêmes valeurs aux barres d’onglets inférieures ou aux méga menus dans leurs paramètres de design respectifs.

Gardez à l’esprit que les modifications apportées dans la section globale Paramètres de thème s’appliquent à l’ensemble de votre boutique en ligne. Modifier uniquement le menu de navigation nécessite donc du CSS personnalisé au niveau de la section ou les réglages d’une application dédiée.

What “Matching Your Theme” Means: The Theme Match Sheet

La cohérence visuelle donne à une boutique un aspect abouti. Notre guide sur la conception de menu et l’identité de marque présente les principes de marque qui sous-tendent ce point ; le guide que vous lisez en est la partie pratique et technique. Un menu harmonisé ne se contente pas d’être fonctionnel ; il semble faire corps avec la boutique.

Pour y parvenir sans tâtonner, établissez une Feuille de correspondance du thème (Theme Match Sheet). Ce tableau de synthèse rassemble les sept propriétés visuelles clés définies dans votre thème et indique où les trouver et comment les appliquer :

Lors de votre vérification, concentrez-vous sur quatre actions précises :

• Copy theme colors : Extrayez la palette de couleurs exacte attribuée à la section d’en-tête au lieu de sélectionner des teintes arbitraires.
• Reuse theme fonts : Appliquez directement la famille de polices de votre boutique à vos éléments de menu.
• Match corner radius : Veillez à ce que les conteneurs déroulants et boutons de menu partagent la même courbure que les boutons du storefront.
• Mobile menu match : Étendez votre palette de couleurs, vos polices et vos séparateurs au tiroir mobile pour offrir la même expérience sur smartphone.

Step 1: Read Your Theme’s Design Tokens

Un « jeton de conception » (design token) est simplement une décision de conception nommée—une valeur enregistrée définissant une couleur, une police, un espacement ou un rayon d’arrondi. En collectant ces valeurs directement depuis votre thème Shopify, vous éliminez tout risque d’incohérence visuelle.

Colors and color schemes

Dans votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes, cliquez sur Personnaliser, puis ouvrez l’onglet Paramètres de thème. Ouvrez le volet Couleurs.

Les thèmes Shopify gèrent les couleurs via le concept de Color scheme (palette de couleurs)—une combinaison prédéfinie de couleurs d’arrière-plan, de texte et de boutons. Dans l’éditeur de thèmes Shopify, vous pouvez gérer jusqu’à 21 palettes de couleurs. Identifiez la palette actuellement assignée à votre section En-tête et relevez ses nuances de fond et de texte.

Fonts and text size

Ouvrez ensuite Paramètres de thème > Typographie. Vous y trouverez les familles de polices sélectionnées pour les Titres et le Corps du texte, ainsi que leurs graisses.

Prenez note de ces choix. L’aide officielle de Shopify précise que les modifications apportées dans la section Paramètres de thème s’appliquent à l’ensemble de votre boutique en ligne. Si vous modifiez les polices ici, chaque titre et chaque paragraphe de votre boutique sera impacté. Par ailleurs, la documentation de Shopify suggère d’envisager des polices système pour votre typographie.

Corner radius and spacing

Parcourez les réglages des boutons, des cartes et des champs de saisie dans les Paramètres de thème. De nombreux thèmes proposent un réglage d’arrondi des angles, souvent appelé Button radius ; le nom exact varie selon le thème.

Observez si vos boutons ont des angles droits, un léger arrondi ou une forme de pilule entièrement arrondie. Lorsque vos sous-menus et vos étiquettes partagent cette même courbure, l’ensemble paraît intentionnel. Regardez également l’espacement autour de vos boutons et de vos sections pour décider si l’espacement entre vos liens doit être compact ou généreux.

Reading CSS variables in your browser

Pour inspecter la manière dont votre thème stocke ces propriétés sous forme de code, ouvrez les outils de développement de votre navigateur :

1. Ouvrez votre boutique en ligne ou un aperçu dans Chrome, Firefox ou Safari.
2. Faites un clic droit sur votre en-tête de navigation et sélectionnez Inspecter.
3. Sélectionnez l’élément <html> ou <body> et observez le volet Styles.

Les thèmes Shopify modernes comme Dawn déclarent les options de personnalisation directement en variables CSS dans theme.liquid. Dawn associe ces réglages à des variables telles que :

• --font-body-family : reflète la police choisie pour le corps du texte.
• --font-heading-family : correspond à la police principale des titres.
• --color-foreground : représente la couleur active du texte, stockée sous forme de trois nombres (rouge, vert, bleu) ; on l’utilise donc ainsi : rgb(var(--color-foreground)).
• --buttons-radius : reprend la valeur d’arrondi des boutons définie dans l’éditeur.

En identifiant les jetons pour Color scheme, Typography et Button radius, vous pouvez exploiter l’architecture native du thème sans coder de valeurs statiques en dur. Les noms de variables pouvant varier d’un thème à l’autre, vérifiez toujours vos sélecteurs dans les DevTools.

Concept illustration : Panneau des paramètres de thème à côté d’une feuille de correspondance récapitulant la palette, la typographie et l’arrondi des boutons à appliquer au menu.

Step 2: Use the Header Settings Your Theme Already Has

Avant d’écrire du code personnalisé ou d’installer des outils externes, explorez l’ensemble des configurations natives disponibles dans votre éditeur de thème Shopify.

Connecting your menu and color scheme

1. Dans l’éditeur de thème, ouvrez la section En-tête.
2. Repérez le paramètre du menu (son libellé varie selon le thème) et assurez-vous que votre liste de navigation principale est bien sélectionnée. Les menus sont gérés dans Boutique en ligne > Navigation, où vous pouvez imbriquer des liens jusqu’à trois niveaux de profondeur.
3. Recherchez un réglage de palette de couleurs dans les réglages de la section En-tête (son libellé varie selon le thème). Choisissez la palette notée sur votre feuille de correspondance.
4. Vérifiez l’aperçu : selon votre thème, l’en-tête et le menu peuvent désormais reprendre les couleurs de fond et de texte de cette palette.

Evaluating header menu layouts

Les thèmes Shopify proposent diverses présentations pour la barre de navigation. Selon la documentation de Shopify, le menu principal et les menus déroulants s’affichent à différents emplacements selon votre thème, et un élément de premier niveau peut comporter jusqu’à deux niveaux de menus déroulants imbriqués.

Selon votre thème, vous pouvez configurer :

• Type de menu : Liste déroulante classique, méga menu sur plusieurs colonnes ou tiroir latéral.
• Position sur ordinateur : En haut à gauche, centré au-dessus du logo ou aligné avec la recherche.
• En-tête fixe (Sticky) : Maintien de la barre de navigation visible en haut de l’écran lors du défilement.

Native customizer boundaries

Les réglages d’en-tête natifs sont pratiques mais ont des limites évidentes :

• Les libellés d’options diffèrent d’un thème à l’autre ; certains thèmes permettent d’ajuster l’espacement des liens, d’autres non.
• Les paramètres de typographie s’appliquant à l’ensemble du site, vous ne pouvez pas modifier isolément la police des liens de menu à l’aide des réglages par défaut sans altérer le reste de vos pages.

Lorsque les options natives ne permettent pas de satisfaire votre feuille de correspondance, passez au CSS personnalisé ciblé.

Step 3: Close the Gaps with Custom CSS That Reuses Theme Variables

Le CSS personnalisé vous permet d’ajuster l’esthétique de votre navigation sans modifier les fichiers de modèles Liquid. Rédiger des règles concises et bien ciblées garantit une maintenance simplifiée.

Duplicate the theme first

Avant d’ajouter du CSS personnalisé, créez toujours une copie de sauvegarde de votre thème.

La documentation officielle de l’aide Shopify sur la duplication des thèmes souligne qu’il est judicieux de faire une copie de sauvegarde afin de pouvoir annuler vos modifications et recommencer si nécessaire. Dans l’administrateur Shopify sous Boutique en ligne > Thèmes, ouvrez le menu d’actions à côté de votre thème actif et choisissez Dupliquer. Effectuez d’abord vos réglages sur cette copie, vérifiez le résultat, puis publiez-la quand vous êtes prêt.

Where custom CSS goes and its limits

Shopify fournit deux emplacements pour insérer du CSS sans toucher au code source :

1. CSS à l’échelle du thème : Dans Paramètres de thème > CSS personnalisé, affectant l’ensemble de la boutique.
2. CSS spécifique à une section : Au bas du panneau des propriétés de la section, dans CSS personnalisé (par exemple dans la section En-tête).

Prenez note des restrictions techniques imposées par Shopify :

• Les règles CSS affectant l’ensemble du thème sont limitées à 1500 caractères.
• Les règles CSS affectant une section spécifique sont limitées à 500 caractères.
• Lorsque vous ajoutez du CSS à une section, sa portée est automatiquement restreinte à cette section.
• Le CSS à l’échelle du thème ne s’applique pas à la page de paiement (checkout).

Puisque les liens de navigation sont contenus dans l’En-tête, placer de courtes règles dans le champ CSS personnalisé de la section En-tête est la méthode la plus sûre.

Use var() instead of hard-coded values

Évitez d’inscrire des codes de couleur statiques ou des noms de polices en dur dans votre CSS. Si vous modifiez ultérieurement votre charte graphique, ces valeurs deviendront obsolètes. Utilisez plutôt la fonction var() pour lire les variables CSS du thème, comme documenté par le MDN :

.header__menu-item {
  font-family: var(--font-heading-family);
  color: rgb(var(--color-foreground));
}

(Remarque : les classes et variables ci-dessus suivent le thème Dawn ; inspectez les vôtres dans les DevTools).

Grâce à var(--font-heading-family) et rgb(var(--color-foreground)), vos liens de menu suivent votre thème lorsque vous modifiez vos couleurs ou polices dans les paramètres du thème. Pour annuler, supprimez simplement le bloc CSS ou rétablissez votre thème dupliqué.

Step 4: Make the Mobile Menu Match, Not Just the Desktop Menu

Une erreur récurrente consiste à peaufiner l’en-tête sur ordinateur tout en laissant le tiroir mobile sobre ou mal assorti.

Why mobile drawers diverge

Dans de nombreux thèmes Shopify, les menus bureau et mobile ne partagent pas le même balisage HTML. Les liens sur grand écran sont souvent organisés horizontalement dans l’en-tête, tandis que la navigation mobile est générée au sein d’un tiroir latéral coulissant ou d’une superposition masquée.

Comme le tiroir mobile est souvent un élément distinct, les règles CSS écrites pour les liens du bureau peuvent ne pas l’atteindre. De plus, la couleur de l’icône hamburger est souvent héritée de la couleur du texte de l’en-tête ; le tiroir lui-même peut donc nécessiter son propre fond, sa propre couleur de texte et ses propres séparateurs.

Aligning drawer styling

Pour offrir une navigation homogène sur smartphone, assurez-vous que votre tiroir mobile intègre :

• Same font family : Les liens du tiroir doivent reprendre la police utilisée dans l’en-tête bureau.
• Same text color : Les rubriques principales et sous-liens doivent adopter la couleur de texte de l’en-tête.
• Same divider style : Les lignes séparant les catégories mobiles doivent rappeler la finesse des bordures de vos fiches produits.

Les études d’ergonomie menées par le Nielsen Norman Group (Pernice & Budiu, 2016) indiquent qu’une navigation masquée (comme les menus hamburger) est moins facile à repérer qu’une navigation visible. Parce que l’accès au menu mobile exige un tap préalable, les déclencheurs visibles et la surface du tiroir doivent être nets, lisibles et conformes à votre marque.

Pour approfondir la hiérarchie des liens sur petit écran, consultez notre guide sur les bonnes pratiques pour le menu tiroir mobile. Testez toujours votre menu sur un smartphone physique.

Concept illustration : L’en-tête bureau et le tiroir mobile utilisent la même famille de polices, la même couleur de texte et le même style de séparateurs issus du thème.

Step 5: Match a Menu Added by an App (Tab Bar, Mobile Menu, Mega Menu)

Lorsque votre catalogue dépasse le cadre des listes déroulantes de base, vous pouvez installer une application pour ajouter une barre d’onglets mobile fixée au bas de l’écran, un méga menu étendu ou un bouton flottant.

Les menus d’applications étant ajoutés à votre boutique indépendamment de votre thème, ils peuvent ne pas suivre automatiquement les réglages de couleurs et de polices de votre thème. Sans configuration, un menu d’application peut sembler différent du reste de votre boutique.

Applying your theme match sheet to app settings

Reportez-vous à votre feuille de correspondance pour configurer l’application :

1. Typographie : Choisissez la police et la graisse correspondant aux titres ou aux textes de votre thème.
2. Couleurs : Entrez les codes hexadécimaux de votre palette d’en-tête pour le fond, les libellés et les états actifs.
3. Rayon d’arrondi : Ajustez la courbure des conteneurs et boutons en accord avec le rayon d’arrondi des boutons du thème.
4. Séparateurs : Calibrez les bordures sur celles utilisées pour les cartes de produits de votre boutique.

Keeping custom CSS inside the app

Si le menu de l’application réclame des retouches CSS pointues, saisissez ce code directement dans le champ CSS prévu au sein du tableau de bord de l’application, plutôt que dans les fichiers du thème.

Si l’application stocke son CSS en dehors des fichiers de votre thème, une mise à jour de thème ou un changement de thème ne supprime pas ce style. Vérifiez comment votre application gère ce point avant de vous y fier.

Pour vos premiers pas avec un outil de ce type, découvrez comment commencer avec une application de création de menu.

Common Mismatches and How to Fix Them

Utilisez ce tableau de diagnostic pour identifier les incohérences fréquentes et leur solution technique :

Trade-offs: When Not to Restyle the Menu

Adapter le style visuel est essentiel, mais ce n’est pas toujours la réponse appropriée :

Problèmes structurels du catalogue

Si les visiteurs peinent à s’orienter en raison d’une arborescence confuse ou surchargée, changer les couleurs ne résoudra rien. L’habillage graphique ne compense pas une architecture de l’information déficiente. Consultez les limites des menus de thèmes Shopify pour déterminer si votre boutique a besoin d’une restructuration de ses collections plutôt que de simples ajustements esthétiques.

Maintenance et limites de caractères du CSS du thème

L’injection de CSS dans les thèmes engendre une dette technique. Le CSS général étant plafonné à 1500 caractères et celui des sections à 500 caractères, les règles complexes s’avèrent vite limitées. Lors de chaque mise à jour majeure du thème, ce code doit être vérifié et réappliqué manuellement.

Effets collatéraux sur la typographie globale

Modifier la typographie dans les Paramètres de thème change les polices de toutes vos fiches produits, titres de collection et paragraphes. La documentation de Shopify suggère d’envisager des polices système ; ajouter une police distincte uniquement pour les liens du menu mérite donc réflexion.

Where Navi+ Fits

Si votre thème Shopify actuel ne dispose pas de formats de navigation avancés—tels qu’une barre d’onglets mobile, un méga menu en colonnes, un tiroir coulissant, un menu d’icônes ou un bouton flottant—Navi+ met à votre disposition une boîte à outils dédiée pour les créer.

Dans l’interface Navi+, l’onglet Design offre des commandes claires pour paramétrer la couleur de fond, la typographie (choix de police et taille de base) ainsi que les icônes ou images. Les marchands peuvent y retranscrire fidèlement les données de leur feuille de correspondance.

Navi+ comprend également un éditeur de CSS personnalisé où les règles reçoivent automatiquement un préfixe propre à chaque menu et sont conservées indépendamment des fichiers du thème. Une mise à jour ou un changement complet de thème Shopify n’altérera donc jamais l’apparence de vos menus configurés dans Navi+.

Pour planifier sereinement votre configuration, gardez à l’esprit nos caractéristiques techniques :

• Les menus Navi+ prennent en charge une arborescence allant jusqu’à 3 niveaux.
• L’onglet Design propose des curseurs visuels pour les 2 premiers niveaux.
• La personnalisation de tailles de police ou d’icônes spécifiques pour les niveaux 2 et 3 s’effectue via de courtes lignes dans l’encart CSS personnalisé de l’application.

If your theme doesn’t have the menu type you need, such as a bottom Tab Bar or a mega menu, Navi+ lets you build one and set its fonts and colors from your theme match sheet in the Design tab — you can try it on a duplicate theme first.

Action Checklist Before You Publish

Passez en revue ces 10 points avant de déployer vos retouches :

• Thème dupliqué : Copie de sauvegarde créée pour annuler facilement les changements en cas de besoin.
• Feuille de correspondance complétée : Données sur la palette, les polices, les graisses et les arrondis de boutons soigneusement consignées.
• Palette d’en-tête validée : Vérifié que la section En-tête de l’éditeur applique la bonne palette de couleurs.
• Polices harmonisées : Confirmé que les liens de menu adoptent la police Titres ou Corps définie dans les paramètres du thème.
• Contraste WCAG vérifié : Rapport de contraste d’au moins 4.5:1 pour le texte courant et 3:1 pour les grands titres validé.
• Arrondis coordonnés : Conteneurs déroulants, badges et boutons alignés sur le rayon d’arrondi des boutons du storefront.
• Survol et focus contrôlés : Réaction nette au passage de la souris et présence d’un anneau de focus accessible au clavier.
• Tiroir mobile testé sur smartphone réel : Icône hamburger, fond de tiroir, bordures et réactivité tactile validés en conditions réelles.
• Menus d’applications synchronisés : Données de la feuille de correspondance appliquées aux modules tiers (tab bars, méga menus).
• CSS concis et sécurisé : Règles courtes (dans les limites de 500/1500 caractères) exploitant les variables CSS via var().

FAQ

Can I change only the menu font without changing my whole store’s font?

Les réglages de typographie du thème s’appliquent à l’ensemble du site. Pour modifier uniquement la police du menu, ajoutez une règle CSS ciblée dans la section En-tête du personnalisateur de thème ou configurez la police directement dans votre application de menu.

Where do I add custom CSS in Shopify?

Dans l’éditeur de thème, vous pouvez insérer du CSS personnalisé soit pour tout le thème (limite de 1500 caractères), soit pour une section spécifique comme l’En-tête (limite de 500 caractères). Le CSS de section est circonscrit à celle-ci, et le CSS global n’agit pas sur la page de paiement.

Why does my mobile menu look different from my desktop menu?

Les thèmes construisent généralement le tiroir mobile sous forme d’élément HTML indépendant, que les styles de bureau n’atteignent pas. Si l’icône hamburger hérite souvent de la couleur de texte de l’en-tête, le fond et la typographie du tiroir doivent être configurés séparément.

How do I keep my menu matching after I change theme colors later?

Référencez les variables CSS du thème avec la fonction var() (comme var(--font-heading-family) ou var(--font-body-family)) au lieu de figer des valeurs hexadécimales. Ainsi, vos menus suivent vos réglages lors de futures évolutions de votre palette ou de vos polices.

What contrast should menu text have?

D’après les directives pour l’accessibilité aux contenus Web (WCAG 2.1), le texte du menu doit respecter un rapport de contraste minimal de 4.5:1 pour le texte standard et de 3:1 pour les textes de grande taille par rapport à la couleur de fond.

Should I edit CSS or use an app?

Commencez par les paramètres natifs d’en-tête et utilisez un peu de CSS pour de légers ajustements. Si votre boutique nécessite des formats absents du thème—comme une barre d’onglets mobile ou un méga menu structuré—adoptez une application dédiée, et vérifiez qu’elle conserve ses styles en dehors des fichiers du thème afin qu’ils survivent aux changements de thème.

Sources

• Shopify Help Center: Customizing Theme Settings
• Shopify Help Center: Adding Custom CSS to Your Theme
• Shopify Help Center: Duplicating Themes
• Shopify Help Center: Set up Drop-Down Menus in Your Online Store
• Shopify Developer Documentation: Navigation and Search Architecture
• W3C Web Accessibility Initiative: WCAG 2.1 Understanding Contrast (Minimum)
• MDN Web Docs: Using CSS Custom Properties (Variables)
• Nielsen Norman Group: Hamburger Menus and Hidden Navigation (Pernice & Budiu, 2016)
• Shopify Dawn Theme Repository: theme.liquid layout configuration
• Navi+ Help Center: Using Built-in Settings or Custom CSS
• Fudge: How to Change the Mobile Menu in Shopify