Product badges

Product badges highlight key product states — Sale, Sold out, Pre-order — and let you add custom labels like "New" or "Bestseller" via a metafield.

Product badges appear on product cards across collection pages, search results, and the cart. Three badges fire automatically based on product state; beyond those, you can add up to four custom labels per product using a metafield.

---

Automatic badges

Avante shows three badges automatically — no setup required:

Badge	When it appears
Sale	Whenever a product has a Compare-at price set in Shopify Admin
Sold out	When inventory reaches zero across all variants
Pre-order	On products using the product.preorder template

You can customize the label text and colors for each in Theme Editor → Theme settings → Product badges.

---

Custom badges

Beyond the automatic three, Avante supports up to 4 custom badge slots per product, each driven by the custom.badge metafield.

1

Step 1 — Create the metafield definition

1. Go to Shopify Admin → Settings → Metafields and metaobjects → Products
2. Click Add definition
3. Fill in:

   • Name: Badge
   • Namespace and key: custom.badge
   • Type: Single line text — List of values
4. Save

Set the type to List of values, not single value. This allows multiple badges on one product (e.g., "New" and "Bestseller" at the same time).

2

Step 2 — Add badges to products

1. Open a product in Shopify Admin
2. Scroll down to Metafields
3. Find Badge and enter each badge name as a separate value
4. Save

3

Step 3 — Register badge names in Theme Editor

1. Go to Theme Editor → Theme settings → Product badges → Custom badges
2. In the Badge 1–4 fields, enter the badge names exactly as entered in the metafield
3. Set text and background colors for each badge
4. Save

Badge names must match the metafield values exactly — including capitalization and spacing. "New" and "new" are treated as different values.

Use cases: New, Bestseller, Limited edition, Bundle, Staff pick, Coming soon — any label that helps customers make faster decisions.

---

Troubleshooting

Custom badge not showing

The most common cause is a mismatch between the metafield value and the badge name in Theme Settings. Check both for:

• Exact spelling — "Bestseller" vs "bestseller" will not match
• Trailing spaces — an invisible space at the end of the metafield value breaks the match. Re-enter the value to be sure.
• Combined values — entering "New - Bestseller" as a single string won't create two badges. Each badge must be a separate value in the metafield list.

Custom badge disappears when product sells out

When a product goes out of stock, the Sold out badge takes priority and replaces custom badges. This is the theme's default behavior — only one badge displays at a time, with Sold out taking precedence. This is a known limitation.

Sale badge showing after a sale ended

The Sale badge appears automatically whenever a product has a Compare-at price set — regardless of whether a sale is currently active. If the badge is showing unexpectedly, check that Compare-at prices were removed from the products after the sale.

If you want to hide the Sale badge globally without removing Compare-at prices, add this to Theme settings → Custom CSS:

.card__badges-item--sale {
  display: none;
}

To hide it on collection pages only, add the same snippet to Theme Editor → Collection page → Collection page section → Custom CSS.