# Product badges

{% columns %}
{% column width="58.333333333333336%" %}
**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:$info;"><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>
{% endcolumn %}

{% column width="41.666666666666664%" %}

<figure><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2FZoC9TKboIknpR4GfWAAh%2Fproduct-badges-detail.jpeg?alt=media&#x26;token=62e04c22-09a8-41bb-975c-47df700af204" alt="" width="375"><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

## 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.

<sub><mark style="color:$info;">Go to Theme settings > Product listing to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="263">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Show sale badge</mark></td><td>Show sale badge on products with a 'compare at price' that's higher than the current price.</td></tr><tr><td><mark style="color:blue;">Show custom badges</mark></td><td>Display discounts as a percentage or dollar value, or simply show a "Sale" text label.</td></tr><tr><td><mark style="color:blue;">Show sold out badge</mark></td><td>Display 'Sold out' badge on products with zero inventory.</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 %}

<sub><mark style="color:$info;">Go to Theme settings > Product badges to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="178">Setting</th><th width="378">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.</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 %}

<sub><mark style="color:$info;">Go to Theme settings > Product badges to find settings<mark style="color:$info;"></sub>

<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>

## Custom badges

***

Add up to 4 badges with custom messages and colors to display on specific products.

{% 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 %}

<sub><mark style="color:$info;">Go to Theme settings > Product badges to find settings<mark style="color:$info;"></sub>

<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;">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>

### Translate custom badges

***

You can use **Metaobjects** and Shopify's [Translate & Adapt](https://apps.shopify.com/translate-and-adapt) app to translate custom badge labels. There are three general steps:

{% stepper %}
{% step %}
Add a new **Metaobject** with a field for each badge label
{% endstep %}

{% step %}
Add the default language text for each label as **Entries**
{% endstep %}

{% step %}
Use Shopify's **Translate & Adapt** app to translate the default label text.
{% endstep %}
{% endstepper %}

<details>

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

**1. Add Metaobject with custom badge names**

In the Shopify admin:

1. Go to **Content > Metaobjects**.
2. Click **Add definition**.
3. Enter `Custom badges` in the metaobject Name field.

   > This name must match exactly.
4. Under **Fields**, click **Add field**.
5. Select **Single line text**.
6. Enter the badge label in the **Name** field.

   > The name must exactly match the badge label.

   <figure><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2FfP6Mcw8bO1ZjLop1BHbq%2Fbadge-translate-definition.png?alt=media&#x26;token=4939d30b-1010-41a4-bfea-d4e8a070d614" alt="" width="511"><figcaption></figcaption></figure>
7. (*Required*) Uncheck **Use this field as display name**.
8. Click **Add**.
9. **Repeat steps 4 to 8 for every badge label.**
10. Click **Save**.

**2. Add Entries for badge labels in default language**

1. Go to **Content > Metaobjects**.
2. Click on the **Custom badges** definition
3. Click **Add entry**.
4. Enter the same name of each custom badge label.

   > Enter the exact name to match the field label. This text will be the label text for the default language.

   <figure><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2F4VnNXNseXklWgLmPay3U%2Fbadge-translate-entries.png?alt=media&#x26;token=a4d98093-7d16-434d-8987-d3be356dc913" alt=""><figcaption></figcaption></figure>
5. Under **Handle**, click **Edit**.
6. Enter `custom_badges_translations` as the entry's unique identifier.

   <figure><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2FXzMajgZietMFVaBkuUWT%2Fbadge-translate-handle.png?alt=media&#x26;token=3117211e-ef7c-4564-82e6-ab1b66202b3b" alt=""><figcaption></figcaption></figure>
7. Click **Save**.

**3. Use Translate & Adapt to add translations**

1. Go to **Apps > Translate & Adapt**.

   > If you haven't already, go to [Translate & Adapt](https://apps.shopify.com/translate-and-adapt) on the app store and click **Install**.
2. Under **Products**, click **Metaobjects**.
3. Enter translations for each custom badge label.\\

   <figure><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Ff4e5jYBRqxLswddfrspd%2Fbadge-translate-adapt.png?alt=media&#x26;token=754fc950-bcd6-43c1-9b57-c3253e142e9c" alt=""><figcaption></figcaption></figure>
4. Click **Save**.

</details>