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 intègrent nativement des styles de mise en évidence pour les éléments de navigation - vérifiez dans Éditeur de thème > En-tête.
• Pour des couleurs personnalisées, du texte en gras ou un badge, il vous faudra du CSS ciblant cet élément de navigation spécifique.
• Fudge peut styliser n’importe quel lien de navigation exactement comme vous le souhaitez sans que vous ayez à écrire de code.

Un lien “Soldes” ou “Nouveau” dans la navigation de l’en-tête - en particulier dans 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 créé Fudge - un éditeur de boutique IA avec une note de 4.9 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 le moindre code, vérifiez :

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

Recherchez des paramètres tels que :

• « Highlight menu item » - entrez le libellé de l’élément de menu à mettre en avant
• « Accent navigation link » - choisissez un lien à afficher différemment
• Des sélecteurs de couleurs par élément dans les paramètres de navigation

Des thèmes comme Impulse, Prestige et Broadcast incluent souvent cette option. Si votre thème la propose, utilisez-la : 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 le 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 “Soldes” dans la navigation principale avec du texte rouge. » Fudge identifie le bon sélecteur pour votre thème spécifique et applique le style.

Sur le même sujet : Modifier les menus de navigation dans Shopify.

Ajouter un badge à un élément de navigation

Un petit badge (une pastille colorée ou un point superposé sur l’élément de navigation) est un signal visuel plus fort que la couleur seule. Cela nécessite une petite modification HTML et CSS du template de votre header.

Approches :

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

C’est une demande courante. Décrivez-la à 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