L’essentiel
- Le badge “En promotion” s’affiche automatiquement lorsqu’un produit a un prix de comparaison 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 personnalisé du badge, ses couleurs et les types de badges supplémentaires sont contrôlés dans les Paramètres du thème ou nécessitent du CSS/code.
- Fudge peut ajouter une logique de badge entièrement personnalisée - comme “Nouveau”, “Meilleure vente” ou des tags spécifiques au produit - sans codage manuel.
Pour modifier les badges de produits dans Shopify, définissez un prix de comparaison pour déclencher le badge En promotion, modifiez le texte du badge dans le contenu par défaut de votre thème, et modifiez son style dans les Paramètres du thème ou avec du CSS. Les badges Nouveau ou Meilleure vente nécessitent des tags de produit, une application ou du code personnalisé.
Vous débutez avec les badges ? Commencez par comment ajouter des badges de produits dans Shopify.
Pourquoi vous pouvez nous faire confiance
Jacques a plus de 15 ans d’expérience en développement et a aidé de nombreuses marques Shopify avec leurs boutiques. Nous développons Fudge, l’opérateur IA pour les boutiques Shopify, avec une note de 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 - couleurs, taille de police, 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 “Cartes de produits”. Certains thèmes y proposent les paramètres de couleur et de style des badges.
Paramètres de la section. Dans votre page de collection ou votre section de produits en vedette, cliquez sur la section dans l’Éditeur de thème et cherchez les paramètres liés aux badges dans le panneau des paramètres de la section.
Si aucun de ces emplacements ne propose de contrôles pour les badges, votre thème gère les badges entièrement via le CSS. Vous devrez surcharger les styles manuellement.
Pour les étiquettes de page produit, consultez comment ajouter des étiquettes personnalisées sur les pages de produits Shopify.
Comment ajouter des badges de produits dans Shopify
Au-delà de “En promotion” 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 - Tags de produit. 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 d’administration Produits, et le thème affichera un badge à partir de ce tag. Consultez la documentation de votre thème pour voir si cela est pris en charge.
Méthode 2 - Une application Shopify. Des applications comme Badgify ou Product Labels & Badges du Shopify App Store ajoutent une gestion flexible des badges sans nécessiter de code.
Méthode 3 - Code personnalisé via Fudge. Pour les thèmes qui ne prennent pas en charge les badges basés sur les tags de manière native, Fudge, l’opérateur IA pour les boutiques Shopify, peut l’ajouter en tant que code natif du thème plutôt que via une autre application. Demandez à Fudge :
“Ajoute un badge ‘Nouveau’ aux produits tagués avec ‘new-arrival’. Mets-le en vert, placé dans le coin supérieur gauche de la carte de produit, en l’assortissant au style du badge En promotion existant.”
Pour un badge Meilleure vente, consultez comment ajouter des badges de meilleure vente dans Shopify.
Comment changer le texte du badge Promo dans Shopify
L’étiquette “En promotion” 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 → menu à trois points (…) à côté de votre thème → Modifier le contenu par défaut du thème.
Étape 2. Cherchez “Sale” ou “En promotion” dans la barre de recherche.
Étape 3. Trouvez le champ correspondant (souvent sous “Products” ou “Labels”) et mettez à jour le texte.
Étape 4. Enregistrez.
Cela modifie l’étiquette du badge sur tous les produits ayant un prix de comparaison.
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 les tags, des badges qui ne s’affichent qu’à certaines dates, ou des styles de badges personnalisés — sont un excellent cas d’usage pour l’éditeur de boutique de Fudge :
“Ajoute un badge ‘Nouveau’ aux produits tagués ‘new-arrival’, un badge ‘Meilleure vente’ aux produits tagués ‘best-seller’, et affiche un pourcentage de réduction dans le badge En promotion. Adapte le style de tous les badges de manière cohérente avec les couleurs de notre marque.”
Fudge implémente la logique Liquid et le CSS sous forme de brouillon, vous permettant ainsi de vérifier les badges sur de vraies cartes de produits avant de les approuver. Une fois qu’ils sont en ligne, Fudge peut vous montrer le taux de conversion sur les pages modifiées, avant et après.
FAQ
Pourquoi mon badge En promotion ne s'affiche-t-il pas sur un produit remisé ?
Trois causes habituelles : (1) le prix de comparaison 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 de comparaison, 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.
Puis-je avoir différentes couleurs de badge pour différents produits ?
Oui, avec du CSS conditionnel basé sur les tags. Taguez les produits dans l'interface d'administration (par ex., badge-color-green), puis décrivez la correspondance des couleurs à Fudge. Il écrira le CSS par tag sans que vous ayez à chercher les bons sélecteurs. Certains thèmes proposent nativement des badges multicolores dans les Paramètres du thème — vérifiez-y d'abord.
L'ajout de badges de produits supplémentaires va-t-il ralentir ma page Shopify ?
C'est négligeable pour de simples badges textuels 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 (fichiers PNG/SVG importés comme arrière-plans) peuvent affecter le LCP sur les pages de collection — gardez-les légers (moins de 5 Ko chacun) ou utilisez du SVG en ligne.
Dois-je utiliser un badge en pourcentage ("Économisez 25 %") ou un badge "En promotion" générique ?
Les badges en pourcentage conviennent aux catégories sensibles aux prix où la réduction est le signal clé. Le badge générique "En promotion" fonctionne bien pour les marques premium où l'affichage de la réduction semble inadapté. Testez avec votre audience — faire un test A/B de deux styles de badges est peu coûteux et produit des données réelles.
Pourquoi mon badge En promotion apparaît-il sur tous les produits ?
Vous avez probablement défini un prix de comparaison par défaut sur tous les produits (cela arrive souvent lors d'un import CSV). Modifiez vos produits en masse dans l'administration Shopify : filtrez par "Compare at price is set" (Le prix de comparaison est défini) et effacez la valeur sur les articles qui ne sont pas réellement en promotion.
