Badges sur les cartes de produits dans les collections et la recherche

Libellés « Achetez-en 2, économisez 10 % » sur les cartes de produits : comment ils correspondent et leur style.

3 min de lecture

L'intégration des badges de cartes ajoute un petit libellé sur les cartes de produits partout où le thème renvoie à un produit : pages de collections, résultats de recherche, sections de produits mis en avant, produits associés.

Libellés par type d'offre : « Achetez-en 2, économisez 10 % » (Quantité), « 3 pour 60 € » (Mix & Match), « Bundle et économisez », « Cadeau gratuit dès 100 € » ou « Cadeau avec 2 » (Achetez X, obtenez Y). « Souvent achetés ensemble » n'a pas de badge, sauf si le groupe a une remise.
Un badge par carte : l'offre active la plus prioritaire couvrant le produit gagne ; les offres à l'échelle de la boutique s'appliquent à chaque carte.
La position (haut gauche / droite) et le style (plein / contour) sont définis dans les paramètres de l'intégration ; les couleurs suivent la couleur d'accentuation dans les Paramètres.

La correspondance se fait par le handle (identifiant unique) du produit, cela fonctionne donc sur tout thème qui lie les cartes à /products/<handle>. Les cartes chargées ultérieurement (défilement infini, filtres) sont automatiquement décorées.

Problèmes fréquents

Aucun badge ne s'affiche.

Activez l'intégration dans l'éditeur de thème (Paramètres › Configuration du thème › Enable) et sauvegardez. Cliquez ensuite une fois sur Re-sync pour inclure les handles de produits dans les données de la boutique.

Les badges apparaissent sur le mauvais élément ou chevauchent l'image.

Les thèmes nomment les conteneurs de leurs cartes différemment. Ajoutez une règle dans Paramètres › Avancé › CSS personnalisé, par exemple .bf-card-badge { top: 1em; }, ou envoyez le nom de votre thème au support.

Plus dans Boutique

← Tous les articles · Suivant : Personnaliser l'apparence : Styles prédéfinis, Couleurs, Polices, CSS personnalisé · Toujours bloqué ? Contactez le support