- Go to Admin > Online Store > Themes.
- Find the theme that you want to edit, and then click Customize > Theme settings > Product badges.
- Click Save.
Product Badges
Product badges are small highlighted labels displayed on product images to help customers quickly identify special product statuses such as Sale, Sold Out, New, Preorder, or Custom labels. Badges can appear on both product cards and product pages depending on the theme layout.
A maximum of two badges can be displayed at the same time on product cards.
Badge Position
Badges appear in the top-left corner of the product image by default.
On mobile devices, badges will display below the image when using List View product cards.
Sale Badge
The Sale badge automatically appears on products where a compare-at price is set higher than the actual selling price.
Settings
- Enable or disable the Sale badge visibility
- Choose badge style and colors
- Select badge type
Available Badge Type
- Percentage Off
Displays the discount percentage automatically.
Style Settings
- Background Color:
#020714 - Text Color:
#FFFFFF - Icon:
Drop
Sold Out Badge
The Sold Out badge appears automatically when a product is unavailable or out of stock.
Settings
- Enable or disable the Sold Out badge
- Customize badge colors and icon
Style Settings
- Background Color:
#555555 - Text Color:
#FFFFFF - Icon:
None
New Badge
The New badge highlights recently added or featured products.
Badge Conditions
The New badge can be displayed using one or more of the following methods:
Collection Based
Show the badge for products included in selected collections.
Example:
- “New” Collection
Tag Based
Show the badge for products containing a specific product tag.
Default Tag:
New
Recently Created Products
Automatically show the badge for products created within a specified number of days.
Default:
6 days
Style Settings
- Background Color:
#BFFD3B - Text Color:
#020714 - Icon:
None
Preorder Badge
The Preorder badge appears automatically when the product template name contains the word:
preorder
This helps customers identify products available for preorder before stock arrives.
Style Settings
- Background Color:
#007E12 - Text Color:
#FFFFFF - Icon:
None
Custom Badge
Custom badges allow merchants to create personalized product labels such as:
- Limited Edition
- Bestseller
- Exclusive
- Trending
How to Use
Create a product metafield with:
- Namespace:
theme - Key:
badge - Type:
Single line text
The metafield value will be displayed as the badge text.
Example
| Metafield | Value |
|---|---|
theme.badge | Bestseller |
Style Settings
- Background Color:
#2C7E3F - Text Color:
#FFFFFF - Icon:
None
Notes
- A maximum of two badges will appear on product cards.
- Badge visibility and styling can be fully customized from the theme settings.
- Badge appearance may vary slightly depending on the selected product card layout and device size.