Badges on product cards in collections and search

“Buy 2, save 10%” labels on product cards: how they are matched and styled.

3 min read

The card badges embed adds a small label on product cards wherever the theme links to a product: collection pages, search results, featured-product sections, related products.

Labels per offer type: “Buy 2, save 10%” (volume), “Any 3 for €60” (mix & match), “Bundle & save”, “Free gift over €100” or “Gift with 2” (Buy X get Y). Frequently bought together shows no badge.
One badge per card: the highest-priority live offer covering the product wins; store-wide offers apply to every card.
Position (top left / right) and style (filled / outlined) are set in the embed settings; colours follow the accent colour of Settings.

Matching is by product handle, so it works on any theme that links cards to /products/<handle>. Cards loaded later (infinite scroll, filters) are decorated automatically.

Common problems

No badges appear.

Enable the embed in the theme editor (Settings › Theme setup › Enable) and Save. Then press Re-sync once so product handles are included in the storefront data.

Badges appear on the wrong element or overlap the image.

Themes name their card containers differently. Add a rule in Settings › Advanced › Custom CSS, for example .bf-card-badge { top: 1em; } , or send support the theme name.

More in Storefront

← All articles · Next: Customising the look: presets, colours, fonts, custom CSS · Still stuck? Contact support