Comment modifier les badges de produits dans Shopify (2026)

L’essentiel

• Le badge “Promo” apparaît automatiquement lorsqu’un produit possède un prix avant réduction - aucun code n’est nécessaire.
• Le badge “Épuisé” apparaît automatiquement lorsque toutes les variantes sont en rupture de stock.
• Le texte, les couleurs et les types de badges supplémentaires sont contrôlés dans les paramètres du thème ou nécessitent du CSS/du code.
• Fudge peut ajouter une logique de badge entièrement personnalisée - comme “Nouveau”, “Meilleure vente” ou des tags spécifiques au produit - sans avoir à coder manuellement.

Les badges de produits - ces petites étiquettes sur les fiches produits affichant “Promo”, “Nouveau” ou “Épuisé” - sont de puissants déclencheurs de conversion. Voici comment les contrôler dans Shopify.

Pourquoi vous pouvez nous faire confiance

Jacques a plus de 15 ans d’expérience en développement Shopify. Nous avons créé Fudge — un éditeur de vitrine assisté par l’IA utilisé par des centaines de boutiques Shopify, avec une note de 5.0 sur le Shopify App Store.

Comment fonctionne le badge Promo dans Shopify

Shopify affiche automatiquement le badge “Promo” sur n’importe quel produit pour lequel un prix avant réduction (compare-at price) est défini.

Pour déclencher le badge Promo :

Étape 1. Accédez à l’administration Shopify → Produits → cliquez sur un produit.

Étape 2. Dans la section Tarifs, définissez un Prix avant réduction supérieur au prix actuel (par exemple, prix avant réduction de 60 €, prix actuel de 45 €).

Étape 3. Enregistrez.

La fiche produit affichera désormais un badge Promo sur votre boutique. Le texte et le style du badge sont contrôlés par votre thème.

Comment modifier les badges sur Shopify

L’apparence des badges - les couleurs, la taille de la police, la forme - est généralement contrôlée à l’un de ces deux endroits :

Paramètres du thème. Allez dans Boutique en ligne → Thèmes → Personnaliser → Paramètres du thème. Cherchez une section “Badges”, “Étiquettes de produits” ou “Fiches produits”. Certains thèmes y exposent les paramètres de couleur et de style des badges.

Paramètres de section. Sur votre page de collection ou dans la section des produits mis en avant, cliquez sur la section dans l’éditeur de thème et cherchez les paramètres liés aux badges dans le panneau de configuration de la section.

Si aucun de ces emplacements ne permet de contrôler les badges, votre thème gère les badges entièrement via le CSS. Vous devrez alors surcharger les styles manuellement.

Pour une approche similaire, consultez comment ajouter des étiquettes personnalisées sur les pages produits Shopify.

Comment ajouter des badges de produits dans Shopify

Au-delà de “Promo” et “Épuisé”, l’ajout de nouveaux types de badges - “Nouveau”, “Meilleure vente”, “Édition limitée” - n’est pas une fonctionnalité native de Shopify dans la plupart des thèmes.

Méthode 1 - Les tags (balises) de produits. Certains thèmes prennent en charge les badges basés sur les tags. Ajoutez un tag comme badge:new ou label:new à un produit dans l’interface Prix de l’administration, et le thème affichera un badge à partir de ce tag. Consultez la documentation de votre thème pour voir s’il gère cette option.

Méthode 2 - Une application Shopify. Des applications comme Badgify ou Product Labels & Badges de l’App Store de Shopify procurent une gestion flexible des badges sans nécessiter de code.

Méthode 3 - Code personnalisé via Fudge. Pour les thèmes qui ne gèrent pas nativement les badges basés sur les tags, Fudge peut ajouter cette fonctionnalité. Il vous suffit de dire à Fudge :

“Ajoute un badge ‘Nouveau’ aux produits avec le tag ‘new-arrival’. Mets-le en vert, situé dans le coin supérieur gauche de la fiche produit, en gardant le même style que le badge Promo existant.”

Sur le même sujet : Ajouter des badges Meilleure vente dans Shopify.

Sur le même sujet : Ajouter des badges Nouveau dans Shopify.

Comment changer le texte du badge Promo dans Shopify

L’étiquette “Promo” ou “Sale” est généralement définie dans le fichier de langue de votre thème, et non dans l’éditeur de thème.

Étape 1. Allez dans Boutique en ligne → Thèmes → Actions (ou trois petits points) → Modifier le contenu du thème par défaut (ou Modifier les langues).

Étape 2. Recherchez “Sale” ou “Promo” dans la barre de recherche.

Étape 3. Trouvez le champ concerné (souvent classé sous “Produits” ou “Étiquettes”) et mettez à jour le texte.

Étape 4. Enregistrez.

Cela modifiera le texte de l’étiquette pour tous les produits dotés d’un prix avant réduction.

Comment changer les couleurs des badges avec du CSS

Si votre thème ne propose pas d’options pour les couleurs des badges dans ses paramètres, vous pouvez les remplacer à l’aide de CSS personnalisé.

Accédez à Paramètres du thème → CSS personnalisé et ajoutez :

/* Badge Promo */
.badge--sale,
.product-badge--sale {
  background-color: #E63946;
  color: #FFFFFF;
}

/* Badge Épuisé */
.badge--sold-out,
.product-badge--sold-out {
  background-color: #6B6B6B;
  color: #FFFFFF;
}

Trouvez les noms de classe exacts en faisant un clic droit sur un badge dans votre boutique en ligne → Inspecter.

Comment afficher le pourcentage de réduction dans le badge Promo

Certains thèmes affichent le pourcentage d’économie dans le badge Promo (par ex. “-25 %” ou “25% de remise”) plutôt qu’un simple “Promo”. Il s’agit d’une fonctionnalité propre au thème.

Vérifiez les paramètres de votre thème ou de section pour une option “Afficher le pourcentage de réduction” ou “Type de badge”. Si elle n’est pas présente, vous devrez modifier le modèle Liquid de la fiche produit de votre thème pour réaliser le calcul et afficher ce pourcentage.

Le calcul en Liquid :

{%- assign savings = product.compare_at_price | minus: product.price -%}
{%- assign savings_percent = savings | times: 100.0 | divided_by: product.compare_at_price | round -%}
Économisez {{ savings_percent }}%

Décrivez simplement ce besoin à Fudge si vous souhaitez qu’il l’implémente sans avoir à écrire le code vous-même.

Utiliser Fudge pour une logique de badge personnalisée

Des contraintes complexes concernant les badges - de multiples types de badges, des badges basés sur les tags, des badges qui ne s’affichent qu’à certaines dates, ou des styles entièrement sur-mesure - sont un cas d’usage parfait pour Fudge:

“Ajoute un badge ‘Nouveau’ aux produits ayant le tag ‘new-arrival’, un badge ‘Meilleure vente’ pour ceux avec le tag ‘best-seller’, et affiche un pourcentage de réduction dans le badge Promo. Harmonise le style de tous les badges avec les couleurs de notre marque.”

Fudge implémente la logique Liquid et le CSS sous forme de brouillon. Révisez et approuvez tout avant de l’appliquer en ligne.

Si vous ne l’avez pas encore fait, commencez par ajouter des badges de produits dans Shopify.