À retenir
- Le badge « En solde » s’affiche automatiquement lorsqu’un prix avant réduction est défini - aucun code n’est nécessaire.
- Le badge « Épuisé » s’affiche automatiquement lorsque toutes les variantes sont en rupture de stock.
- Le texte, les couleurs et les types de badges supplémentaires se configurent dans les paramètres du thème ou nécessitent du CSS/code.
- Fudge permet d’ajouter une logique de badges entièrement personnalisée – comme « Nouveau », « Meilleure vente » ou des tags spécifiques à un produit – sans avoir à coder manuellement.
Les badges de produits – ces petites étiquettes sur les fiches produits indiquant « En solde », « Nouveau » ou « Épuisé » – sont de puissants leviers de conversion. Voici comment les gérer sur Shopify.
Pourquoi vous pouvez nous faire confiance
Jacques possède plus de 15 ans d’expérience en développement Shopify. Nous avons créé Fudge — un éditeur de vitrine basé sur l’IA, utilisé par des centaines de boutiques Shopify et noté 4.9 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 permet pas de modifier les couleurs des badges dans les Paramètres du thème, remplacez-les avec du CSS personnalisé.
Allez dans Paramètres du thème → CSS personnalisé et ajoutez :
/* Sale badge */
.badge--sale,
.product-badge--sale {
background-color: #e63946;
color: #ffffff;
}
/* Sold out badge */
.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
Trois causes habituelles : (1) le prix avant réduction n'est pas supérieur au prix actuel (Shopify exige compare_at_price > price), (2) la variante que vous consultez a son propre prix sans prix avant réduction, ou (3) votre thème affiche le badge uniquement sur les cartes de collection, pas sur la page produit elle-même. Vérifiez d'abord la tarification de la variante.
Oui, avec du CSS conditionnel par tag. Ajoutez des tags aux produits dans l'admin (par ex., badge-color-green), puis décrivez le mappage des couleurs à Fudge et il écrira le CSS par tag sans que vous ayez à chercher les bons sélecteurs. Certains thèmes proposent des badges de plusieurs couleurs de façon native dans les paramètres du thème — vérifiez d'abord là-bas.
L'impact est négligeable pour les badges texte stylisés en CSS. Quelques éléments DOM supplémentaires par carte n'ajoutent aucun coût mesurable. Les badges basés sur des images (PNG/SVG téléchargés comme arrière-plans) peuvent affecter le LCP sur les pages de collection — gardez-les petits (moins de 5 Ko chacun) ou utilisez du SVG en ligne.
Les badges en pourcentage ont tendance à mieux convertir dans les catégories sensibles au prix où la remise est le signal clé. Le badge générique "Promo" fonctionne pour les marques premium où l'affichage de la remise ne semble pas approprié. Testez avec votre audience — faire un test A/B sur deux styles de badges est peu coûteux et produit des données réelles.
Vous avez probablement défini un prix avant réduction par défaut sur tous les produits (cela arrive souvent lors d'un import CSV). Modifiez en masse vos produits dans l'admin Shopify : filtrez par "Compare at price is set" (Prix avant réduction défini) et effacez la valeur sur les articles qui ne sont pas réellement en promotion.
Si vous n’avez pas encore configuré cela, commencez par ajouter des badges de produits dans Shopify.