Before you start
- From your Shopify admin, go to Online Store > Themes.
- Next to the theme you want to edit, click Customize.
- In the left-hand panel, click Theme settings, then select Product badges.
Everything below applies inside this Product badges panel. Click Save in the top-right corner of the editor after making any change.
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: theme.badge
Value: 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.
- If a product qualifies for more than two badges, [confirm and add your actual priority order here — e.g. “Preorder and Sold Out always take priority over Sale and New”].
Troubleshooting
Badge not showing on a product? Confirm the badge type is enabled in Theme settings, and check the product actually meets that badge’s condition (e.g. a compare-at price set higher than the selling price for Sale).
Custom badge not appearing? Confirm the product’s metafield matches the exact namespace and key (theme.badge) you configured, and that the metafield type is set to Single line text.
Changes not showing on your store? Make sure you’re editing the theme currently published as your live theme, not a draft or duplicate.