Tips PrestaShop #2 : Ajouter un badge personnalisé sur la page catégorie ou produit
Comment mettre en avant un produit avec un badge personnalisé sur PrestaShop ?
Mettre en avant certains produits sur votre boutique en ligne peut considérablement augmenter leur visibilité et leur attrait. Dans ce tutoriel, nous allons voir comment ajouter un badge statique, comme « Exclusivité » ou celui de votre choix, sur des produits ayant une référence spécifique. Ce badge apparaîtra à la fois sur les miniatures produits et sur la fiche produit. Une méthode simple et efficace pour attirer l’attention des visiteurs !
Étape 1 : Ajouter le badge sur les miniatures produits (page catégorie)
Pour afficher le badge « Exclusivité » sur les miniatures produits
(visible sur les pages catégories ou les résultats de recherche)
Suivez ces étapes :
Modifier le fichier product.tpl
- Chemin du fichier :
themes/NOMDUTHEME/templates/catalog/_partials/miniatures/product.tpl2. Recherchez le code suivant :
Recherchez la ligne suivante :
<div class="thumbnail-top">
{block name='product_thumbnail'}3. Ajoutez immédiatement ce code juste en dessous :
{if strpos($product.reference, 'BDG') !== false}
<span class="exclusive-badge">Exclusivité</span>
{/if}
Votre code devrait maintenant ressembler à ceci :
<div class="thumbnail-top">
{block name='product_thumbnail'}
{if strpos($product.reference, 'BDG') !== false}
<span class="exclusive-badge">Exclusivité</span>
{/if}
{if $product.cover}Étape 2 : Ajouter le badge sur la fiche produit
Pour afficher le badge sur la fiche produit, modifiez le fichier contenant l’image principale du produit.
Modifier le fichier product-cover-thumbnails.tpl
- Chemin du fichier :
themes/NOMDUTHEME/templates/catalog/_partials/product-cover-thumbnails.tpl2. Ajoutez le code suivant :
Recherchez la ligne suivante :
<div class="product-cover">
Ajoutez immédiatement ce code juste après :
{if strpos($product.reference, 'BDG') !== false}
<span class="exclusive-badge">Exclusivité</span>
{/if}
Étape 3 : Ajouter les styles CSS
Pour styliser le badge et l’afficher correctement sur vos produits, ajoutez ces styles dans votre fichier CSS principal.
Chemin du fichier CSS :
themes/NOMDUTHEME/assets/css/theme.css
Code css :
.exclusive-badge {
position: absolute;
bottom: 0px; /* Position en bas */
left: 0px; /* Aligné à gauche */
background-color: #ff4500;
color: #fff;
font-size: 12px;
font-weight: bold;
padding: 5px 10px;
border-radius: 3px;
text-transform: uppercase;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
z-index: 1;
}
Étape 4 : Tester vos modifications
Vérifiez les conditions des produits : Assurez-vous qu’un produit possède une référence contenant « BDG » (par exemple, produit-BDG, BDG123, ou simplement BDG).
Rechargez votre boutique : Accédez à une catégorie ou une fiche produit contenant une référence valide.
Videz le cache : Dans votre back-office PrestaShop :
- Allez dans Paramètres avancés > Performances.
- Cliquez sur Vider le cache.
Résultat attendu
- Sur les miniatures produits : Les produits ayant une référence contenant « BDG » afficheront un badge « Exclusivité » en bas à gauche de leur miniature.
- Sur la fiche produit : Le badge sera visible en bas à gauche de l’image principale du produit.
Personnalisation
- Changer l’intitulé : Vous pouvez modifier « Exclusivité » directement dans les 2 fichiers
.tpl:
<span class="exclusive-badge">Votre texte ici</span>- Modifier les styles : Adaptez les couleurs, la taille, ou ajoutez une animation CSS pour rendre le badge plus attrayant.
- Changer le critère de déclenchement : Si vous souhaitez afficher le badge pour un autre mot-clé ou condition, modifiez
BDGdans les 2 fichiers.tpl:
{if strpos($product.reference, 'BDG') !== false}Boostez la visibilité de vos produits grâce à des badges personnalisés sur PrestaShop
En suivant ce tutoriel, vous avez ajouté un moyen simple et efficace de mettre en avant vos produits avec un badge « Exclusivité ». Vous pouvez personnaliser cet ajout pour refléter votre charte graphique ou des promotions spécifiques. Un petit détail qui peut faire toute la différence sur votre boutique PrestaShop ! 🚀
Vous souhaitez encore plus de conseils ? Restez connectés pour découvrir notre Tips PrestaShop #3 !
Thierry
Voir un exemple sur la page catégorie : https://demo.thierry-creation.fr/fr/8-accessoires-de-maison
Et sur la fiche produit : https://demo.thierry-creation.fr/fr/accessoires-de-maison/7-mug-the-adventure-begins.html