Discounted products can carry their own badge in the storefront — a colored hint with the discount percentage and an extra text. That way campaigns stand out instantly.
The badge appears wherever the product is shown as discounted:
In the cross-selling slider (off-canvas, basket, checkout)
On the product detail page
In category listings
In search result pages and search suggestions
Per rule in the admin dashboard you can switch the badge on or off:
Open Cross-selling Checkout → Rule → Tab "Base".
Turn on Show badge on discount products.
Save the rule.
When off, matched products receive no badge — the discount itself is still applied in the basket.
In the tab Badge you set the look:
Badge text
Bundle deal, Top deal, Sale, Promo. Translatable per language.
Badge text color
Hex code such as #ffffff (white), #ffe600 (yellow), #000000 (black).
Badge background color
Hex code such as #d9534f (red), #198754 (green), #0d6efd (blue), #fd7e14 (orange).
The badge is then composed of the discount percentage and the badge text. Example: with discount = 15 and badge text = Sale you'll see:
−15 % Sale
Leaving colors empty falls back to the defaults defined in the Configuration.
Black Friday
#000000
#ffffff
Black Friday
Summer sale
#fd7e14
#ffffff
Summer Sale
Bundle discount
#0d6efd
#ffffff
Bundle deal
Loyalty campaign
#198754
#ffffff
Loyalty deal
Clearance
#d9534f
#ffffff
Clearance
Switch the language in the detail screen to maintain different texts per language. Empty translations fall back to the system language automatically.
When the discount value is 0 % no badge appears — a 0 % rule acts as a pure recommendation rule without discount.
One badge is shown per product. If a product is matched by several rules, the rule with the highest discount wins.
The badge uses simple inline CSS and is therefore compatible with virtually any storefront theme.
Last updated
Was this helpful?
Was this helpful?
