# Product badges

**Product badges** are labels that appear on listed products that are on **Sale**, **Sold out**, or you can add **Custom** badges.

<details>

<summary><mark style="color:blue;"><strong>Why are custom badges not showing?</strong></mark></summary>

Make sure the badge tags match the exact spelling of the product tags in your Shopify admin. Also, check that the **Show custom badges** option is enabled in *Theme settings > Product listing*.

</details>

## Show badges on product listings

***

Sale, sold out, and custom badges are enabled by default. You can toggle off badges and change their **position** on product cards.

`Go to Theme settings > Product listing to find settings`

<table><thead><tr><th width="225">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Show "Sale" badge</mark></td><td>Show badges for products on sale.</td></tr><tr><td><mark style="color:blue;">Show "Sold-out" badge</mark></td><td>Show badges for products with no stock.</td></tr><tr><td><mark style="color:blue;">Show "New" badge</mark></td><td>Show badges for products in ‘new’ collections or recently published.</td></tr><tr><td><mark style="color:blue;">Show custom badges</mark></td><td>Show custom badges created in the Product badges theme settings.<br><br>Learn how to <a href="product-badges">set up custom product badges</a>.</td></tr><tr><td><mark style="color:blue;">Position</mark></td><td>Display all badges in the <strong>Top left, Top right, Bottom left,</strong> or <strong>Bottom right</strong>.</td></tr></tbody></table>

## Sale badge

***

When you set sale prices in your Shopify admin, products will display a **Sale badge** with a "sale" or discount message.

{% hint style="success" %}
Product discounts is a Shopify feature. Learn about [Setting sale prices](https://help.shopify.com/en/manual/discounts/sales) and [Managing inventory](https://help.shopify.com/en/manual/products/inventory) on Shopify.
{% endhint %}

`Go to Theme settings > Product badges to find settings`

<table><thead><tr><th width="171">Setting</th><th width="428">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Color</mark></td><td>Set the color of the badge background and text.</td><td></td></tr><tr><td><mark style="color:blue;">Sale badge format</mark></td><td>Display discounts as a percentage or dollar value, or simply show a "Sale" text label.</td><td><strong>Sale</strong><br><strong>20% off</strong><br><strong>-20%</strong><br><strong>Save 20%</strong><br><strong>$5 off</strong><br><strong>-$5</strong><br><strong>Save $5</strong></td></tr></tbody></table>

## Sold out badges

***

When products are out-of-stock, products will display a "Sold out" badge.

To disable sale or sold-out badges, click **Theme settings** and open the Product listing tab.

{% hint style="success" %}
Product inventory is a Shopify feature. Learn about [Managing inventory](https://help.shopify.com/en/manual/products/inventory) on Shopify.
{% endhint %}

`Go to Theme settings > Product badges to find settings`

<table><thead><tr><th width="199">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Background color</mark></td><td>Set the color of the badge background.</td></tr><tr><td><mark style="color:blue;">Text color</mark></td><td>Set the color of the "sale" and discount message.</td></tr></tbody></table>

## New badges

***

Show a “New” badge on products that have been recently added to your store or are included in a collection for new products.

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Click the **Theme settings** ’gear’ icon.
2. Click to open the **Product badges** tab.
3. Use the color picker to select the **Background** and **Text** colors for the “New” badge.
4. Choose a **“New” badge product source** to determine when to show the “New” badge.

   > Select **Collection** to display the “New” badge for products included in a collection.

   > Select **Automatic** to display the badge for a specified number of days after products have been published. Use the **Duration in days** slider to set the number of days between **1** and **50**.
5. Click **Save**

</details>

`Go to Theme settings > Product badges to find settings`

<table><thead><tr><th width="199">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Background color</mark></td><td>Set the color of the badge background.</td></tr><tr><td><mark style="color:blue;">Text color</mark></td><td>Set the color of the "sale" and discount message.</td></tr><tr><td><mark style="color:blue;">"New" badge product source</mark></td><td><p>Choose when to display a "new" badge<br><br><strong>Collection</strong> displays the “New” badge for products included in a collection.<br></p><p><strong>Automatic</strong> to display the badge for a specified number of days after products have been published.</p></td></tr><tr><td><mark style="color:blue;">New badge collection</mark></td><td>If <strong>Collection</strong> is selected, choose a collection of new products that you've created in your Shopify admin.</td></tr><tr><td><mark style="color:blue;">Duration in days</mark></td><td>If <strong>Automatic</strong> is selected<strong>,</strong> set the number of days from a product's published date that the new badge should appear.</td></tr></tbody></table>

## Custom badges

***

Add up to 4 custom badges to display on products that have the badge tag added in the Shopify admin. For example, add a badge for "New arrivals" or "Limited editions".

{% stepper %}
{% step %}
In **theme settings > product badges**, enter words in **Badge tags** want to display as a badge (e.g. "Limited edition").

> Use the color selector to change the **Badge color**.
> {% endstep %}

{% step %}
In your **Shopify admin**, add tags to your products using the exact same words.

> Learn more about [creating and using tags](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/using-tags) on Shopify.\
> \
> To use badge colors for multiple tags, enter the tags in a comma-separated list. For example: `Best seller, New, Special`.
> {% endstep %}
> {% endstepper %}

`Go to Theme settings > Product badges to find settings`

<table><thead><tr><th width="205">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Badge tags</mark></td><td>Enter the words to display as the product badge.<br><br>For badges to appear, badge tags must match the product tags entered in your Shopify admin.</td></tr><tr><td><mark style="color:blue;">Badge color</mark></td><td>Set the color of the custom badge.</td></tr><tr><td><mark style="color:blue;">Style</mark></td><td>Choose to display badge labels in <strong>Uppercase</strong> text.</td></tr></tbody></table>

***

> **Related links**
>
> [Product listings](https://help.fluorescent.co/cornerstone/products/product-listings)\
> [Product listing style](https://help.fluorescent.co/cornerstone/products/product-listings/layout-and-style)\
> [Product card details](https://help.fluorescent.co/cornerstone/products/product-listings/product-card-details)\
> [Quick view](https://github.com/fluorescent/kb-cornerstone/blob/main/products/broken-reference/README.md)\
> [Quick add](https://help.fluorescent.co/cornerstone/products/quick-shop)