# Badges

![](https://docs-assets.foxecom.app/documentation/043b9f10-9d16-4468-bee0-f749c61b2e92.jpg)

Custom badges help highlight specific products in your storefront, making it easier for customers to spot featured items such as **New**, **Hot**, or **Popular**.

## How to show product badges

<Stepper>
  <Step title="Add product tags">
    Go to your product in **Shopify Admin > Products** and add tags.

    ![](https://docs-assets.foxecom.app/documentation/39f1850d-4319-4921-9b5b-dec1c55ffaf3.png)
  </Step>

  <Step title="Enter the tags you want to show as badges">
    1. In the theme editor, go to Theme settings > Badges.
    2. Add the product tags you want to show as product badges. <br/>Each tag must be in its own line.

    ![](https://docs-assets.foxecom.app/documentation/94ee2ff7-b71f-49f7-8cd8-2910be019906.png)
  </Step>
</Stepper>

Any product with a matching tag will automatically display the selected badge.

## Badge settings

Enter **one product tag per line** in the 3 custom badges list tags.

<Table widths="30%">
  | Setting                       | Description                                                                              |
  | ----------------------------- | ---------------------------------------------------------------------------------------- |
  | **New badge – List tags**     | Products with any of these tags display a badge using the **New badge color style**.     |
  | **Hot badge – List tags**     | Products with any of these tags display a badge using the **Hot badge color style**.     |
  | **Popular badge – List tags** | Products with any of these tags display a badge using the **Popular badge color style**. |
</Table>

<Hint type="info">
  To customize badge colors, go to **Theme settings > Colors**.  Learn more [Product badge colors](https://docs.foxecom.com/motrix-theme/theme-settings/colors#product-badge-colors).&#x20;
</Hint>

## Badge showing rules

<Table widths="30%">
  | Badge type         | How it works                                                                                   |
  | ------------------ | ---------------------------------------------------------------------------------------------- |
  | **Custom badges**  | Custom badges using tags (like New, Hot, Popular only show while the product is **in stock.**  |
  | **Sold-out badge** | Shows when the item is out-of-stock.                                                           |
  | **Sales badge**    | When the items has compare-at prices higher than normal prices.                                |
</Table>

Learn more [Badges on Product cards](https://docs.foxecom.com/motrix-theme/theme-settings/product-cards#badges).

Tags are matched flexibly, so differences in capitalization or separators (such as spaces and hyphens) **won't affect badge matching**. For example, `Best Seller` and `best-seller` are treated as the same tag.

If the same tag is added to multiple badge lists, the theme applies the following priority: **New → Hot → Popular**

![](https://docs-assets.foxecom.app/documentation/337f9611-a2ad-4b4a-8053-dacdc6dca8dc.png)