Badges

Style the Sale, Sold out, Pre-order and custom badges shown on product cards and product pages.

---

Badges are small labels on product cards and product pages, such as Sale or Sold out. In Theme settings > Badges you choose their shape and colors, how the sale badge reads, and set up your own custom badge.

In earlier versions, these settings were called Styles. In V9.0 the category is named Badges.

1. Open the Badges settings

Steps:

• In the theme editor, click Theme settings.

• Open Badges.

• Click Save after making changes.

2. Settings

• Style: The corner shape of all badges: Square / Slightly rounded / Pill.

• Sale badge: Shown when a product's compare-at price is higher than its price.

  • Type: Text / Percentage / Amount. Text shows "Sale". Percentage shows the discount, for example "Save 20%". Amount shows the amount saved, for example "Save $10.00".

  • Background and Text: The badge colors.

• Sold out badge: Shown when a product is out of stock.

  • Background and Text: The badge colors.

• Pre-order badge: Shown on products tagged pre-order or preorder. See Pre-order.

  • Background and Text: The badge colors.

• Custom badge: Your own badge, such as "New In" or "Best Seller".

  • Enable custom badge: Shows the badge on products with the _theme_custom_badge tag.

  • Badge text: The text on the badge. Default is "New".

  • Background and Text: The badge colors.

3. Add a custom badge to a product

Steps:

• From your Shopify admin, go to Products.

• Open the product you want to highlight.

• Add the tag _theme_custom_badge.

• Click Save.

• In Theme settings > Badges, turn on Enable custom badge and enter the Badge text.

4. Where badges appear

• Product cards: Badges show automatically.

• Product page: In the Price block, turn on Show sale badge, Show sold out badge or Show custom badge. The Pre-order badge always shows for tagged products.

When a product qualifies for more than one badge:

• The Pre-order badge replaces all other badges.

• Sold out comes next. Sale and custom badges only show on products that are in stock.

5. Tips

• Use Percentage or Amount to make discounts easier to see at a glance.

• Keep custom badge text short, one or two words, so it fits on small product cards.