Comment ajouter des liens promotionnels à la navigation Shopify (2026)

Points clés

• Ajoutez le lien promotionnel via Boutique en ligne > Navigation > Ajouter un élément de menu.
• Certains thèmes supportent nativement la mise en valeur d’éléments du menu de navigation - vérifiez l’Éditeur de thème > En-tête.
• Pour des couleurs personnalisées, du texte en gras ou un badge, vous devez cibler cet élément de navigation spécifique avec du CSS.
• Fudge peut styliser n’importe quel lien de navigation de la façon dont vous le décrivez sans écrire de code.

Un lien “Promo” ou “Nouveau” dans la navigation de l’en-tête - particulièrement avec une couleur contrastante comme le rouge - génère toujours des clics. Voici comment l’ajouter et le faire ressortir.

Pourquoi vous pouvez nous faire confiance

Nous avons créé et personnalisé des centaines de boutiques Shopify. Nous avons également développé Fudge - un éditeur de boutique IA avec une note de 5,0 sur le Shopify App Store.

Étape 1 - Ajouter l’élément au menu

Étape 1. Allez dans Boutique en ligne > Navigation > cliquez sur Menu principal.

Étape 2. Cliquez sur Ajouter un élément au menu.

Étape 3. Définissez le Nom sur ce que vous souhaitez afficher dans la navigation - “Promo”, “Nouveautés”, “Offres”, “Édition limitée”, etc.

Étape 4. Définissez le Lien vers la destination - généralement une collection : cliquez sur le champ de lien et recherchez votre collection en promo, ou tapez le chemin manuellement (ex. /collections/sale).

Étape 5. Cliquez sur Ajouter, puis Enregistrer le menu.

L’élément apparaît maintenant dans votre navigation. Par défaut, il est identique à tous les autres éléments de navigation. L’étape suivante consiste à le faire ressortir.

Étape 2 - Styliser le lien promotionnel

Vérifiez si votre thème le supporte nativement

Certains thèmes Shopify incluent une option intégrée pour mettre en évidence un élément de navigation spécifique. Avant d’écrire du code, vérifiez :

Boutique en ligne > Thèmes > Personnaliser > En-tête

Recherchez des paramètres tels que :

• “Mettre un élément de menu en évidence” - entrez le nom de l’élément à surligner
• “Accentuer le lien de navigation” - choisissez un lien à afficher différemment
• Sélecteurs de couleur par élément dans les paramètres de navigation

Des thèmes comme Impulse, Prestige, et Broadcast l’incluent souvent. Si votre thème l’a, utilisez-le - c’est l’implémentation la plus propre.

Option 2 - Ciblage CSS

Si votre thème n’a pas d’option de mise en évidence intégrée, vous pouvez cibler l’élément de navigation en utilisant du CSS. Le sélecteur dépend de la façon dont votre thème rend la navigation, mais une approche courante consiste à cibler via l’attribut href du lien :

a[href="/collections/sale"] {
  color: #e00;
  font-weight: 700;
}

Cela peut être ajouté au fichier CSS de votre thème (Boutique en ligne > Thèmes > Modifier le code > assets/base.css ou similaire) ou via une balise <style> dans un snippet Liquid personnalisé.

Vous pouvez décrire cela à Fudge : “Affiche l’élément ‘Promo’ de la navigation principale avec du texte rouge.” Fudge identifie le bon sélecteur pour votre thème spécifique et applique le style.

Article lié : Modifier les menus de navigation sur Shopify.

Ajouter un badge à un élément de navigation

Un petit badge (une pastille de couleur ou un point superposé à l’élément de navigation) est un signal visuel plus fort que la couleur seule. Cela nécessite une petite modification HTML et CSS dans le modèle de votre en-tête.

Approches :

• Utiliser un pseudo-élément CSS ::after pour ajouter le badge sans modifier le code HTML
• Ou ajouter un élément <span> à l’intérieur de la balise d’ancrage de l’élément de navigation avec une classe pour le styliser

C’est une demande fréquente. Décrivez-le à Fudge : “Ajoute un petit badge rouge ‘NEW’ à l’élément ‘Nouveautés’ dans la navigation principale.”

Liens promotionnels saisonniers

De nombreuses boutiques utilisent des liens de navigation promotionnels pour des périodes limitées - un lien “Black Friday” en novembre, un lien “Soldes d’été” en juillet. Une bonne pratique est de :

1. Créer la collection à l’avance
2. Ajouter l’élément au menu quand la promo commence
3. Le retirer après la fin de la promo (Boutique en ligne > Navigation > supprimer l’élément > Enregistrer)

Certaines boutiques utilisent un menu “promotionnel” séparé qui est activé/désactivé via les paramètres de l’Éditeur de thème pendant les périodes de campagne. Demandez à votre développeur de configurer cela une fois, et les futures campagnes ne nécessiteront qu’un changement de menu.

Article lié : Mettre à jour les couleurs de la marque sur Shopify.

Article lié : Créer un Mega Menu sur Shopify.

Article lié : Créer une page promotionnelle sur Shopify.

Liens de navigation animés ou clignotants

Certaines boutiques vont plus loin et ajoutent une animation subtile au lien de navigation promotionnel - une légère pulsation, un point clignotant ou une transition de couleur - pour attirer encore plus l’attention.

C’est réalisable avec les animations CSS keyframes. Décrivez l’effet exact que vous souhaitez à Fudge : “Fais pulser doucement le lien de navigation ‘Soldes’ entre le texte blanc et rouge toutes les 2 secondes.”

FAQ

Un lien “Soldes” mis en évidence dans la navigation générera-t-il vraiment plus de clics ?

Oui - généralement 2 à 4 fois le taux de clic d’un élément de navigation non stylisé. L’augmentation vient du contraste, pas du mot “Soldes” en particulier. Faites le test sur votre boutique : un lien “Nouveautés” ou “Meilleures ventes” mis en évidence par une couleur fonctionne souvent aussi bien que “Soldes” sans avoir l’effet dévalorisant pour la marque qu’ont les remises permanentes.

Dois-je garder un lien de navigation “Soldes” actif en permanence ?

Probablement pas. Un lien “Soldes” permanent habitue les acheteurs à attendre les réductions et dévalorise vos produits à prix fort. Gardez-le pour les vraies périodes de soldes (BFCM, liquidations de fin de saison) et retirez-le entre les campagnes. C’est en partie son aspect temporaire qui le rend efficace.

Puis-je faire en sorte qu’un lien de navigation promotionnel ne s’affiche que sur mobile (ou que sur desktop) ?

Oui, avec du CSS. Ajoutez une classe à l’élément de menu via le Liquid de votre header (ou utilisez le sélecteur [href="..."]) et appliquez display: none dans un bloc @media (max-width: 768px) ou @media (min-width: 769px) selon le breakpoint sur lequel vous voulez le masquer.

Comment ajouter un emoji ou une icône à un lien de navigation ?

Le plus simple : tapez l’emoji directement dans le nom de l’élément de menu (ex. 🔥 Soldes). Plus propre : décrivez ce que vous voulez à Fudge (“affiche un SVG de flamme à côté du lien de navigation Soldes”) et il modifie le Liquid du header pour afficher une icône dans la balise anchor en fonction de l’URL ou du handle de l’élément de menu.

Puis-je suivre les clics sur un lien de navigation promotionnel ?

Oui. Ajoutez un événement dataLayer personnalisé dans le Liquid du header qui se déclenche lorsque le lien est cliqué, ou utilisez Google Tag Manager pour configurer un déclencheur de clic qui cible le sélecteur CSS du lien. L’événement peut ensuite être envoyé vers GA4, Meta ou toute autre plateforme d’analytics.