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
Les besoins complexes en matière de badges — plusieurs types de badges, des badges basés sur des tags, des badges qui ne s’affichent que pendant certaines périodes ou des styles de badge personnalisés — constituent un excellent cas d’usage pour Fudge :
“Ajoute un badge ‘Nouveau’ aux produits tagués ‘new-arrival’, un badge ‘Meilleure Vente’ aux produits tagués ‘best-seller’, et affiche une réduction en pourcentage sur le badge Promo. Aligne le style de tous les badges avec nos couleurs de marque.”
Fudge implémente la logique Liquid et le CSS sous forme de brouillon. Vérifiez et approuvez avant la mise en ligne.
FAQ
Pourquoi mon badge Promo ne s’affiche-t-il pas sur un produit en promotion ?
Trois causes fréquentes : (1) le “prix comparé à” (compare-at price) n’est pas supérieur au prix actuel (Shopify exige compare_at_price > price), (2) la variante que vous consultez possède son propre prix sans “prix comparé à”, ou (3) votre thème n’affiche le badge que sur les cartes de collection, et non sur la page produit elle-même. Vérifiez en premier lieu le prix de la variante.
Puis-je avoir différentes couleurs de badges pour différents produits ?
Oui, grâce au CSS conditionnel basé sur les tags. Ajoutez des tags aux produits dans l’admin (par ex., badge-color-green), puis décrivez l’association de couleurs à Fudge et il rédigera le CSS pour chaque tag sans que vous ayez à chercher les bons sélecteurs. Certains thèmes intègrent nativement des badges multicolores dans les paramètres du thème — jetez-y un œil d’abord.
L’ajout de badges de produits va-t-il ralentir ma page Shopify ?
L’impact est négligeable pour les badges texte en simple CSS. Quelques éléments DOM supplémentaires par carte n’ajoutent aucun coût mesurable. Les badges basés sur des images (fichiers PNG/SVG importés comme fond) peuvent affecter le LCP sur les pages de collection — gardez-les légers (moins de 5 Ko chacun) ou utilisez du SVG en ligne (inline SVG).
Dois-je utiliser un badge de pourcentage (“Économisez 25 %”) ou un badge générique “Promo” ?
Les badges affichant un pourcentage ont tendance à mieux convertir dans les catégories sensibles au prix où la réduction est le signal clé. Le terme générique “Promo” fonctionne bien pour les marques premium, où l’affichage de la réduction peut paraître inséré de force. Faites des tests avec votre audience — le test A/B de deux styles de badges n’est pas coûteux et produit des données réelles.
Pourquoi mon badge Promo apparaît-il sur tous les produits ?
Vous avez sans doute défini un “prix comparé à” par défaut sur tous vos produits (ceci arrive souvent lors d’un import CSV). Éditez vos produits en masse dans l’administration Shopify : filtrez avec “Le prix comparé à n’est pas vide” et effacez la valeur des articles qui ne sont pas réellement en promotion.
Si vous ne l’avez pas encore mis en place, commencez par ajouter des badges de produits dans Shopify.