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 corners

• 15 = fully rounded

• Recommended: 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: 11px

• Right: 10px

• Top: 4px

• Bottom: 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.