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

Points clés à retenir

• Ajoutez le lien promotionnel via Boutique en ligne > Navigation > Ajouter un élément de menu.
• Certains thèmes prennent en charge des styles de mise en évidence natifs pour les éléments de navigation - vérifiez dans l’Éditeur de thème > En-tête.
• Pour des couleurs personnalisées, du texte en gras ou un badge, vous avez besoin de CSS ciblant cet élément de navigation spécifique.
• Fudge peut styliser n’importe quel lien de navigation comme vous le décrivez sans que vous ayez à écrire de code.

Pour ajouter un lien promotionnel à la navigation Shopify, ajoutez un élément de menu sous Boutique en ligne > Navigation > Menu principal, liez-le à votre collection en promotion, puis stylisez-le avec le paramètre de mise en évidence de l’en-tête de votre thème ou une petite modification CSS. Un lien “Soldes” ou “Nouveau” dans une couleur contrastante comme le rouge a tendance à attirer les clics.

Pourquoi vous pouvez nous faire confiance

Nous avons créé et personnalisé des centaines de boutiques Shopify. Nous avons également créé Fudge, l’opérateur IA pour les boutiques Shopify, avec une note de 4.9 sur le Shopify App Store.

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

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

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

Étape 3. Définissez le Nom sur ce que vous souhaitez afficher dans la navigation - “Soldes”, “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 promotion, ou tapez le chemin manuellement (par ex., /collections/sale).

Étape 5. Cliquez sur Ajouter, puis sur 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 gère 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 (Header)

Cherchez des paramètres comme :

• “Mettre en évidence un élément de menu” (Highlight menu item) - entrez le libellé de l’élément à mettre en évidence
• “Accentuer le lien de navigation” (Accent navigation link) - 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 le propose, 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 par l’attribut href du lien :

.header__menu-item[href='/collections/sale'] {
    color: #e00;
    font-weight: 700;
}

Ce sélecteur cible les liens du menu d’en-tête de Dawn. Dans d’autres thèmes, préfixez le sélecteur avec la classe de navigation d’en-tête de votre thème, car un simple a[href='/collections/sale'] modifie également le style des liens du pied de page et des boutons de bannière qui pointent vers la même collection.

Ajoutez le CSS au fichier CSS de votre thème ou à une balise <style> dans un snippet Liquid personnalisé. Pour ouvrir le fichier CSS, allez dans Boutique en ligne > Thèmes, cliquez sur le menu à trois points (…) à côté de votre thème, puis sur Modifier le code, et ouvrez assets/base.css ou similaire.

Vous pouvez décrire cela à Fudge, l’opérateur IA pour les boutiques Shopify, dans son éditeur de boutique : “Mets l’élément ‘Soldes’ de la navigation principale en texte rouge.” Fudge identifie le bon sélecteur pour votre thème spécifique et prépare le style pour que vous puissiez le prévisualiser.

Pour d’autres modifications de menu, consultez 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 de votre modèle d’en-tête.

Approaches :

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

Décrivez-le à Fudge : “Ajoute un petit badge rouge ‘NOUVEAU’ à 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 consiste à :

1. Créer la collection à l’avance
2. Ajouter l’élément de navigation lorsque la promotion est lancée
3. Le supprimer une fois la promotion terminée (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 le configurer une fois, et les futures campagnes ne nécessiteront qu’un changement de menu.

Pour donner à la campagne sa propre landing page, consultez Créer une page promotionnelle dans Shopify.

Liens animés ou clignotants

Certaines boutiques vont plus loin et ajoutent une animation subtile au lien 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 des animations CSS keyframe. Décrivez l’effet exact que vous souhaitez à Fudge : “Fais pulser doucement le lien ‘Soldes’ entre le blanc et le rouge toutes les 2 secondes.”

FAQ