Badges
Product badges are visual indicators that highlight product status or promotions directly on product cards across your store. They improve visibility, boost urgency, and increase conversions by showing key information at a glance.
The Materia theme supports several badge types:
Sale
NEW
Pre-Order
Custom
Sold Out
Each badge can be customized for style, color, size, and visibility.
🔖 Sale Badge Settings
Display Sale Badge
Enable this to show a Sale badge on products that are discounted.
Sale Badge Display Style
Choose how the badge shows discounts:
Show Discount Percentage (e.g., “-30%”)
Show SALE Text
Show Discounted Price
Sale Badge Background Color
Customize the background color of the badge.
Example: #1E1E1E for dark gray
Sale Badge Text Color
Set the text color inside the badge.
Example: #FFFFFF for white text
Badge Corner Roundness
Adjust how rounded the badge corners look:
0= square corners15= fully roundedRecommended:
6
Sale Badge Font Size
Set the font size of the badge text (in pixels).
Default: 13
Sale Badge Border Color
Customize the border.
Tip: Leave it as transparent for no border.
Padding Settings
Control spacing inside the badge:
Left:
11pxRight:
10pxTop:
4pxBottom:
4px
NEW Badge Settings
Highlight new arrivals by displaying a NEW badge on selected products.
Enable NEW Badge for Desktop Only
Toggle ON to show the badge only on desktop.
Enable NEW Badge for Mobile Only
Toggle ON to show the badge only on mobile.
Product URLs for NEW Badge
Add specific product URLs to assign the badge:
/products/elixir-serum/products/moisturizing-serum/products/facial-cream/products/shiny-halter-top
📝 Add up to 5 groups of comma-separated product URLs for full flexibility.
'NEW' Badge Text
Customize the label — default is "NEW", but you can write anything (e.g., "Just Dropped", "Fresh", "Now Live").
'NEW' Badge Corner Radius
Set how rounded the corners are — default: 19px
'NEW' Badge Background Color
Choose the background color for this badge.
Example: #FF3838 (bright red)
'NEW' Badge Text Color
Define the text color inside the badge.
Example: #FFFFFF for white
Pre-Order Badge Settings
Use this badge to show products available for pre-order instead of immediate purchase.
Enable Pre-Order Badge
Toggle ON to display the badge.
Pre-Order Badge Background Color
Set the background color (e.g., #212121 for dark)
Pre-Order Badge Text Color
Set the text color (e.g., #FFFFFF)
Sold Out Badge Settings
Let customers know when a product is out of stock using the Sold Out badge.
Enable Sold-Out Badge
Enable this setting to automatically show a badge on products with no inventory.
Sold-Out Badge Background Color
Choose a neutral or dark tone like #666666
Sold-Out Badge Text Color
Set to something visible like white: #FFFFFF
✅ Best Practices for Using Badges
Keep badge text short and readable
Use high-contrast colors for visibility
Avoid too many badges at once — highlight what matters most
Test your badge colors on different background schemes for consistency
Badges are small — but powerful. Use them to guide, inform, and convert your visitors more effectively.
Last updated