Badges produits personnalisés : mettre en avant les nouveautés, promotions et meilleures ventes

« Nouveau », « Promo » et « Meilleure vente » font partie des étiquettes d’angle les plus utiles sur une vignette produit, mais dans PrestaShop, seules deux existent nativement, l’une dépend discrètement d’un réglage que la plupart des marchands ne vérifient jamais, et la troisième n’existe tout simplement pas. Avant de chercher un module de badges, il vaut donc la peine de savoir exactement ce que la plateforme fait déjà, où se trouvent les interrupteurs dans le back-office et où commence le véritable manque. Ce guide explique comment afficher ces badges sur votre boutique : l’implémentation, les réglages, les templates, les règles. (Savoir si les badges font vraiment progresser les clics et les conversions est une autre question, que nous traitons dans les badges et libellés fonctionnent-ils vraiment, cet article part du principe que vous avez décidé d’en utiliser et vous montre comment les mettre en place correctement.)

Ce que PrestaShop fournit nativement, et ce qu’il ne fournit pas

Nativement, PrestaShop affiche une petite pile de « flags » dans l’angle supérieur de chaque miniature produit. Ils sont générés par un seul partiel de template, themes/your-theme/templates/catalog/_partials/product-flags.tpl, qui parcourt {$product.flags} et affiche chaque élément sous la forme <li class="product-flag {$flag.type}"> dans un <ul class="product-flags">. Cette classe est le point d’accroche que vous utiliserez ensuite pour le style. Les types de flags fournis par le cœur de PrestaShop forment une liste fixe : new, on-sale, discount, online-only et pack :

Voilà l’ensemble de base que la plateforme vous fournit. Les badges de stock et de disponibilité (« Rupture de stock », « Dernières pièces en stock ») relèvent d’un autre mécanisme : ils ne correspondent pas à une entrée fixe dans cette même liste de flags, et leur affichage dépend de votre thème et de votre version. Le texte de disponibilité et les éventuels libellés de stock personnalisés se règlent dans Paramètres de la boutique → Paramètres produit. Les thèmes et modules peuvent aussi ajouter leurs propres libellés par-dessus l’ensemble natif ; ne partez donc pas du principe qu’un badge de stock vu ailleurs provient de cette même boucle {$product.flags}.

Remarquez ce qui manque dans cette liste : il n’existe aucun flag natif « Meilleure vente ». PrestaShop suit bien les meilleures ventes en interne (cela alimente le bloc ps_bestsellers et la page des meilleures ventes lorsque vous les activez), mais il n’appose jamais de badge sur la vignette. C’est le premier vrai manque, et nous y reviendrons.

Vérifier la période du badge « Nouveau » (le réglage que la plupart des marchands ne regardent jamais)

Le badge « Nouveau » est contrôlé par un seul nombre. Allez dans Paramètres de la boutique → Paramètres produit et cherchez Nombre de jours pendant lesquels le produit est considéré comme "nouveau" (la valeur de configuration PS_NB_DAYS_NEW_PRODUCT). Sur une installation neuve, la valeur par défaut est 20 : les produits récemment ajoutés portent donc bien le badge nativement. Mais beaucoup de boutiques en production l’ont à 0 (quelqu’un l’a remise à zéro, ou une migration l’a laissée vide), et lorsqu’elle vaut 0, plus rien n’est jamais nouveau et le flag ne s’affiche jamais. Si votre badge « Nouveau » n’apparaît pas, vérifiez donc cette valeur en premier. Réglez-la sur une durée raisonnable, 20 ou 30 jours est courant, et PrestaShop marquera automatiquement tout produit dont la date de création (et non la date de dernière modification) entre dans cette fenêtre.

Qu’est-ce que cela signifie concrètement pour vous ? Deux conséquences pratiques. D’abord, le badge « Nouveau » dépend uniquement de la date et fonctionne de manière entièrement automatique : vous ne le modifiez jamais produit par produit, et il expire tout seul lorsque la période est dépassée. Ensuite, il se base sur la date d’ajout d’origine ; réenregistrer un ancien produit pour le « rafraîchir » ne le marquera donc pas de nouveau. Si vous voulez redonner une apparence de nouveauté à un produit permanent, vous devez le dupliquer ou utiliser une règle de module (voir plus bas). Adaptez la durée au rythme réel de renouvellement de votre catalogue : une fenêtre de 30 jours sur une boutique qui ajoute deux produits par an revient à dire que presque rien ne portera jamais le badge.

Le badge « Promo » : deux notions différentes sous le même mot

C’est ici que les marchands se trompent souvent. PrestaShop a deux concepts distincts qui ressemblent tous deux à une « promo », mais ils ne fonctionnent pas ensemble automatiquement :

• La case « En promotion » (fiche produit, onglet Prix) affiche le flag on-sale. C’est un flag manuel et, à lui seul, il ne modifie pas le prix : c’est uniquement un libellé que vous cochez.
• Une réduction de prix, un Prix spécifique sur le produit, ou une Règle de prix catalogue sous Catalogue → Réductions, affiche automatiquement le flag discount et modifie réellement le montant payé par le client. Le thème par défaut de PrestaShop l’affiche comme une étiquette de baisse de prix, souvent avec le pourcentage.

À retenir : si vous voulez afficher un badge de remise, créez la réduction et laissez le flag discount faire son travail ; ne cochez pas aussi « En promotion » en pensant que cela fera le calcul. Affichez le pourcentage quand c’est possible (« -20 % » attire davantage qu’un simple « Promo », car il quantifie l’économie). Et si vous gérez des baisses de prix à grande échelle, le travail fastidieux qui consiste à modifier des centaines de prix spécifiques dans le back-office est un problème à part entière : voyez les mises à jour de prix en masse pour le faire sans y passer votre après-midi.

Le manque côté « Meilleure vente », et les trois façons de le combler

Comme il n’existe pas de flag natif pour les meilleures ventes, vous devez en fabriquer un. Trois approches sont possibles, par ordre croissant d’effort et décroissant de maintenance manuelle :

Approche 1, Manuelle, avec une caractéristique produit

L’option sans développeur : créez une Caractéristique dans Catalogue → Attributs & Caractéristiques (par exemple « Badge » avec les valeurs « Meilleure vente », « Coup de cœur »), affectez-la aux bons produits, puis faites-la afficher par votre thème. Cela ne coûte rien et fonctionne sur toutes les versions, mais c’est entièrement manuel : vous décidez ce qui est une meilleure vente et vous maintenez la liste à jour à la main. C’est très bien pour « Coup de cœur » ou « Primé », qui nécessitent de toute façon un jugement humain. C’est pénible pour « Meilleure vente », qui est censé refléter les ventes réelles et se décale donc dès que vous cessez de l’entretenir.

Approche 2, Modifier le template du thème

L’option développeur : étendre product-flags.tpl (ainsi que le partiel de cellule de liste, _partials/miniatures/product.tpl) pour afficher votre propre <li class="product-flag bestseller"> lorsqu’une condition est vraie. Vous obtenez ainsi un contrôle total, sans coût de licence. Le piège est le même que pour toute modification de thème : cela vit dans votre thème, donc un changement de thème ou une reconstruction du thème enfant peut le faire disparaître, et la logique « ce produit est-il une meilleure vente ? » doit venir de quelque part. Généralement d’une requête qu’il faut aussi écrire et maintenir. Contrôle total, responsabilité totale.

Approche 3, Un module de badges piloté par des règles

Si les modules de badges existent, c’est précisément pour combler ce manque : vous voulez un badge « Meilleure vente » (ou « Série limitée », ou « Dernières pièces ») qui se recalcule tout seul à partir des ventes ou du stock, au lieu d’une feuille de calcul que vous mettez à jour le premier du mois. Notre module Custom Product Badges ajoute exactement cela sur PrestaShop 1.6 à 9 : vous importez ou choisissez un badge, puis vous l’épinglez à des produits précis ou vous l’attachez à une règle pour qu’il s’applique automatiquement. Qu’est-ce que cela vous apporte concrètement ? Le badge de meilleure vente suit les produits qui se vendent réellement sans que vous ayez à les réétiqueter ; un badge « Stock limité » apparaît et disparaît quand la quantité franchit un seuil que vous définissez ; et comme le module s’accroche à l’affichage produit au lieu de modifier votre thème, il survit aux changements de thème et aux mises à jour. Il s’installe et se configure depuis le back-office, pas depuis une facture de développeur. C’est la différence pratique entre un programme de badges qui se dégrade dès que vous êtes débordé et un système qui reste fiable tout seul.

Style et positionnement. Là où la classe CSS devient utile

Quelle que soit l’approche choisie, le balisage arrive dans le même conteneur <ul class="product-flags">, ce qui permet de garder un style cohérent. Quelques réalités propres à PrestaShop concernant le placement :

• La position par défaut est en haut à gauche, en pile. Le thème par défaut positionne .product-flags en absolu au-dessus de l’image. Si vous ajoutez d’autres types de flags, ils s’empilent dans ce même coin ; c’est pourquoi la retenue compte plus qu’il n’y paraît (voir section suivante).
• Stylisez par type de flag, pas à la main. Comme chaque flag porte son type sous forme de classe (.product-flag.new, .product-flag.discount, votre .product-flag.bestseller), vous définissez le code couleur une fois en CSS et il s’applique partout où la miniature est rendue : grille de catégorie, résultats de recherche, blocs de page d’accueil, lignes de ventes croisées. Les associations classiques, rouge pour une remise, vert pour une nouveauté, doré pour une meilleure vente, se lisent immédiatement, car les clients les attendent déjà.
• Placez le CSS personnalisé au bon endroit. Modifier directement la feuille de style du thème sera écrasé lors d’une mise à jour du thème ; un petit custom.css (ou la propre feuille de style de votre module) est l’emplacement sûr pour les couleurs et le positionnement des badges lors des mises à niveau.
• Testez à 375px. Le conteneur de flags rétrécit avec la miniature sur mobile. Un badge de deux mots, net sur ordinateur, peut devenir une tache illisible dans une grille sur téléphone : vérifiez le point de rupture étroit avant de publier.

La règle qui compte plus que tout le style : la retenue

Le moyen le plus rapide de rendre les badges inefficaces est de laisser un produit en porter cinq. « Nouveau + En promotion + Remise + Meilleure vente + Livraison offerte » transforme une vignette propre en bruit visuel ; et quand tout est mis en avant, plus rien ne l’est. Deux garde-fous pratiques dans PrestaShop :

• Limitez-vous à environ deux flags par miniature. Si un produit remplit réellement plusieurs critères, définissez un ordre de priorité (une remise active l’emporte presque toujours sur « Nouveau ») et masquez le reste. Les modules de badges basés sur des règles vous permettent de définir cette priorité une fois ; avec les flags natifs, vous la gérez en évitant de trop cocher les libellés manuels.
• Ne laissez pas « Nouveau » s’éterniser. Une fenêtre de 90 jours pour les nouveaux produits signifie que la moitié de votre catalogue devient « nouveau » en permanence, ce qui apprend aux clients à ignorer le badge. Gardez PS_NB_DAYS_NEW_PRODUCT assez court pour que « Nouveau » garde un sens.

Où les badges s’insèrent dans l’ensemble de la fiche produit

Les badges sont une couche de signalisation sur la vignette ; ils fonctionnent mieux lorsque la page vers laquelle ils mènent tient la promesse. Quelques éléments voisins méritent d’être raccordés plutôt que répétés ici :

• « Meilleure vente » est une preuve sociale ; si vous voulez l’appuyer sur un vrai chiffre, un compteur total de produits vendus transforme « populaire » en « 1 240 vendus ».
• Le badge obtient le clic ; le reste de la page doit conclure. Commencez par les bonnes pratiques de conception de fiche produit et l’anatomie d’une fiche produit.
• Pour la question stratégique, savoir si ces libellés méritent vraiment l’effort, et lesquels justifient leur place, consultez l’article compagnon, les badges et libellés fonctionnent-ils vraiment.

Questions fréquentes

Mon badge « Nouveau » ne s’affiche sur aucun produit : qu’est-ce qui cloche ?

Vérifiez d’abord PS_NB_DAYS_NEW_PRODUCT, dans Paramètres de la boutique → Paramètres produit. S’il vaut 0 (cas fréquent après une migration ou lorsqu’un ancien propriétaire l’a remis à zéro), rien n’est jamais considéré comme nouveau et le flag ne s’affiche jamais. Réglez-le sur 20 ou 30. Si la valeur est correcte mais que le badge n’apparaît toujours pas, votre thème n’inclut peut-être pas le partiel product-flags.tpl dans ce template : un thème personnalisé ou fortement modifié peut l’avoir supprimé.

Pourquoi mon badge « Promo » apparaît-il alors que le prix n’a pas changé ?

Parce que vous avez coché la case En promotion, qui est un simple libellé et ne change rien au prix. Pour réduire réellement le prix et afficher le flag de remise, créez un Prix spécifique sur le produit ou une Règle de prix catalogue sous Catalogue → Réductions. Le flag de remise s’affiche alors automatiquement et montre la réduction réelle.

Puis-je faire en sorte qu’un badge « Meilleure vente » se mette à jour à partir des ventes réelles ?

Pas avec les flags natifs : PrestaShop n’a aucun flag « meilleure vente ». Vous devez soit le gérer à la main (avec une caractéristique produit que vous maintenez), soit utiliser un module de badges piloté par des règles qui recalcule à partir des données de vente, afin que le badge suive ce qui se vend réellement au lieu d’une liste que vous oubliez de mettre à jour. C’est précisément le manque que comble notre module Custom Product Badges.

Mon badge personnalisé survivra-t-il à un changement de thème ou à une mise à jour de PrestaShop ?

Tout dépend de la manière dont vous l’avez ajouté. Un badge intégré directement dans product-flags.tpl vit dans votre thème et peut être perdu lorsque vous changez de thème ou reconstruisez un thème enfant. Un badge ajouté via un module qui s’accroche à l’affichage produit survit aux mises à jour parce qu’il ne fait pas partie des fichiers du thème.

Combien de badges un produit devrait-il porter ?

Environ deux, au maximum. Lorsqu’un produit remplit plusieurs critères, définissez une priorité, une remise active l’emporte presque toujours sur « Nouveau », et masquez le reste. Cinq badges sur une seule vignette se lisent comme du bruit visuel ; et quand tout est mis en avant, plus rien ne l’est.

La version courte, spécifiquement pour PrestaShop : « Nouveau » est un gain gratuit qui dépend d’un seul réglage de nombre de jours (20 par défaut, vérifiez qu’il n’est pas à 0), « Promo » correspond à deux réglages cachés derrière un même mot (utilisez la réduction de prix, pas seulement la case à cocher), et « Meilleure vente » est celui que la plateforme ne vous fournit pas. La seule vraie décision consiste donc à choisir entre le gérer à la main ou laisser une règle le maintenir honnête pour vous. Une fois ces trois points maîtrisés, l’angle de chaque vignette commence à faire un travail utile avant même qu’un client lise la moindre ligne de texte.