# Product badges

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FyENd0zkMoBf5wWc5KzQL%2Fimage.png?alt=media&#x26;token=b616cd1e-863f-462f-bd39-e200e75be7a9" alt=""><figcaption></figcaption></figure>

1. From your Shopify admin, go to **Online Store** **->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Click **Theme settings -> Product card -> Product badges**.

{% embed url="<https://youtu.be/fhpiwQSqtsY>" %}

<table><thead><tr><th width="329">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Show product badges</td><td>Toggle the display of product badges (e.g., new, sale, bundle) on the product card.</td></tr><tr><td>Position</td><td>Select the desired position of the product badges either to the left or right side of the product card.</td></tr><tr><td>Vertical position</td><td>Determine the desired spacing of the badges from the card's top.</td></tr><tr><td>Horizontal position</td><td>Determine the desired spacing of the badges from the card's left/right side.</td></tr></tbody></table>

## New badge

**New badge** can be set up automatically by time right in editor or set up manually by tags in product admin.

![Set up "New" label manually by tags](https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2F5ljaeH2t2SAeNZdBZ1DU%2F15.gif?alt=media\&token=dda1fcea-a60a-4ebc-9101-86fa43fef6e2)

<table><thead><tr><th width="314">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Show new badge</td><td>Toggle to include 'new badge' in the product badges on product card. </td></tr><tr><td>New badge display mode</td><td><p>Select the method to apply 'new badge':</p><p><br><mark style="color:orange;"><strong>Dynamic:</strong></mark> The algorithm will be applied to automatically decide the product is new or not.<br><mark style="color:orange;"><strong>Manual:</strong></mark> The products with tags including 'new' keyword will be shown with new badge.</p></td></tr><tr><td>New badge calculation period</td><td>Determine the time range in which the product is shown with new badge.</td></tr><tr><td>Maximum new badge to show</td><td>Determine the amount of products to have 'new badge'</td></tr></tbody></table>

## Sale badge

**Sale badge** shows up when the product is added both "**price**" and "**price at compare**".

![](https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FR3EqCOuPPqgTRJPeOtoX%2FScreenshot_2.png?alt=media\&token=251a6687-5661-47c9-a2d8-372c86bb03fa)

<table><thead><tr><th width="320">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Show sale badge</td><td>Toggle to include 'sale badge' in the product badges on product card.</td></tr><tr><td>Sale badge display mode</td><td>Select the display mode for the sale badge:<br><br><mark style="color:orange;"><strong>% discount</strong></mark><br><mark style="color:orange;"><strong>Text</strong></mark><br><mark style="color:orange;"><strong>Text + % discount</strong></mark></td></tr></tbody></table>

## Show sold out badge

**Show sold out badge** shows up when the available quantity of the product is 0.

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2F0eYRHv2sqVAqGU49yBn6%2Fsold-out.jpg?alt=media&#x26;token=b724164c-6f28-4ddc-9e52-9690cb5eee6a" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="310">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Show sold out badge</td><td>Toggle to include 'sold out badge' in the product badges on product card.</td></tr></tbody></table>

## Custom badge

Custom badge can display the label same for all products or different for each product. If a product has both a tag and a metafield set up, it will prioritize displaying the label according to the metafield.

<table><thead><tr><th width="314">Setting</th><th>Description</th></tr></thead><tbody><tr><td><p>Show custom badge</p><p>Priorities when setting up metafields.</p></td><td>Toggle to include 'custom badge' in the product badges on product card.</td></tr></tbody></table>

### + Show custom badge same for all products

**Custom badge** shows up when the product added a "**label**" tag.&#x20;

The default name of this label is **custom label.** You can use this label with another name and [change text in **edit language**](#how-to-change-the-name-of-badge-label-or-translate-it-in-another-language).

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FdyW25hTLZhpZSsn4418d%2Fcustom-bag-c.jpg?alt=media&#x26;token=fe4c1c65-4974-490e-b7c3-6914bce289a6" alt=""><figcaption></figcaption></figure>

![](https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FzIybdYxqDB7aNtskT6Yx%2F10.jpg?alt=media\&token=06491f6a-7f6a-4abe-8d65-07126dbe3f31)

![](https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FO6bMOJTOcZTOvKOL7OF4%2F16.gif?alt=media\&token=724fa568-b7a6-4394-b303-1956d744937e)

### Custom badge - different for each product

**Custom badge** shows when the product added a "**custom badge**" metafield.

<div><figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FScDULj6pXy734MRWZDcD%2Fcustom-bag-a.jpg?alt=media&#x26;token=54d47481-e8d4-4ca8-8f64-f5733b8f19b1" alt=""><figcaption></figcaption></figure> <figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FZxPnzXdGQgsFz1wQ0jtS%2Fcustom-bag-b.jpg?alt=media&#x26;token=da273fa4-3d72-49ff-894e-8239462320fa" alt=""><figcaption></figcaption></figure></div>

#### Create a metafield for custom badge

1. From your shopify admin, go to **Settings** -> **Custom data**.
2. Click **Products → Add definition.**

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FqnaCnG5vQ9nBpztcyRbF%2Fimage.png?alt=media&#x26;token=c03464ba-8c91-4232-9641-9a97edfcc1b8" alt=""><figcaption></figcaption></figure>

3. Please enter correct **Namespace and key** as we noted below.

```
Name: Custom Badge or any name.
Namespace and key: custom.custom_badge
Select content type: Single line text
```

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FMu2MMAbnePIwzk5lpDJj%2Fimage.png?alt=media&#x26;token=6a1bddfe-6efe-4aac-8067-ef35e6e48514" alt=""><figcaption></figcaption></figure>

#### How to insert content for custom badge metafield?

1. From your Shopify admin, go to **Products -> All products**.
2. Find and choose the product that you want to edit.
3. In the **Metafields**, please enter the text that you want for "**Custom badge**" field.

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FOjH3aVJyFZH3nuDENQbv%2Fcustom-bag-2.jpg?alt=media&#x26;token=60f8cb03-5f28-4410-af6b-6f3e02a22c5f" alt=""><figcaption><p>Add custom badge text for the product 1</p></figcaption></figure>

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FewI5l7wd86lF5bkGQZQu%2Fcustom-bag-3.jpg?alt=media&#x26;token=b3522efa-898e-4ce1-87e8-124d2ca445d2" alt=""><figcaption><p>Add custom badge text for the product 2</p></figcaption></figure>

## Bundle badge

**Bundle badge** shows when the product added a "**Grouped sub product**" metafield.

![](https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FzQBKssmEbPHOS07AUUN8%2FScreenshot_4.png?alt=media\&token=bdf6c7d6-0126-4b6f-bb60-5384bded32e4)

<table><thead><tr><th width="288">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Show bundle badge</td><td>Toggle to include 'bundle badge' in the product badges if the product is setup with a bundle. </td></tr></tbody></table>

## How to change the name of badge/label or translate it in another language?

Please go to **Edit languages** -> **Products** -> Scroll down to find the text of labels and change:

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FGYsCuTt1oU7V6cFjFJCg%2FScreenshot_6.jpg?alt=media&#x26;token=91db852f-8279-44a2-a4c7-f43e64eaddaf" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2F5zJTzrTQw7dx7J5Tnykr%2FScreenshot_7.jpg?alt=media&#x26;token=b4504b3e-cae5-42fb-a52e-e5379ac6cea8" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2Fi1JE9hZZu1Z6s9dVke0e%2FScreenshot_8.jpg?alt=media&#x26;token=d90f62e3-3b4e-4bff-891d-c1ed24919bc3" alt=""><figcaption></figcaption></figure>