Product badges
General
Product badges help highlight important product statuses like discounts, new arrivals, or pre-order availability. They make it easier for customers to quickly spot key product information when browsing collections.
How badges work
When badges are enabled in the theme settings, they are automatically shown for products based on the following conditions:
-
SALE: Displayed when the product’s price is lower than its compare-at price.
-
NEW: Displayed when the product has the tag
new
. -
PRE-ORDER: Displayed when the product has the tag
preorder
.
You can turn badge visibility on or off on product cards using the “Show on product cards” toggle (Theme settings > Product badges).
Also check the product template settings related to badges (Product > Template > Badges).
Custom Badges
You can define your own badges based on product tags. The format is:
[Tag]:[Badge background color]:[Text color]
Example: Biggest & Baddest:linear-gradient(135deg, #ff6d00,#be0d0d):#FFFFFF
To add multiple custom badges, separate each with a semicolon ;
.
On sale badge text options
You can choose how the text appears on SALE badges using the “On sale badge text” setting.
There are three options:
-
"Sale" – Displays a simple text label
-
"Savings" – Shows the exact amount the customer saves. For example: “Save $10.00”.
-
"% Off" – Displays the discount as a percentage. For example: “25% Off”.
The correct value is calculated automatically based on the product’s compare-at price and sale price.
Color Settings
You can customize the color of each built-in badge type:
-
On sale
-
New
-
Pre-order
-
Sold out
Each type allows you to set a background color and a text color independently.
Badge Text Translations
The default text for badges can be customized through the theme’s language settings. Go to Edit default theme content and navigate to Products > Badges to change labels like “Sale” or “Pre-order” to match your store’s tone of voice or language.