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.