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.

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