# Add custom badges to the product card and product page

Product badges help draw the attention of visitors to specific characteristics of the products.&#x20;

To set up the custom badges in Zest, simply add the supported product tags you want to display to your product:

```
tag__hot_[DISPLAY TEXT]
tag__new_[DISPLAY TEXT]
tag__sale_[DISPLAY TEXT]
```

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2F9gKupN6aIPDGYz1KsB6s%2Fimage.png?alt=media&#x26;token=7fb08e6f-df7d-48e4-a9af-cc86bc3cd9bf" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Once the supported tags are added in Shopify admin, the product cards will show the custom badges automatically.
{% endhint %}

Below are examples of them on product cards:

{% tabs %}
{% tab title="tag\_\_hot\_HOT" %}

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2Fq2pqLHNS4IDefABWlSKr%2Fimage.png?alt=media&#x26;token=e6aa195f-3717-467c-8f97-1f6c9bdda77f" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="tag\_\_new\_NEW" %}

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FpO3UiHtNPDHC9574q99x%2Fimage.png?alt=media&#x26;token=af30ce44-8ece-49f3-bf8e-5b2c941eb7a0" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="tag\_\_sale\_SALE" %}

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FSiEDsh8z59KYSHmsE6QU%2Fimage.png?alt=media&#x26;token=9f8fd077-8cb0-4c12-a3f0-fee4c6958c4a" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="success" %}
To add custom tags for product details page:

1. Go to **Product template** and locate the section **Product information**.
2. Add block **Custom tags**.
   {% endhint %}

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FF9Wwo6JWL7U7QqkZb5pG%2Fimage.png?alt=media&#x26;token=78130c21-3ed0-41c5-bb1a-0195d87d4cf7" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
To change the custom badges' colors, go to **Theme settings > Colors**.

![](https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FZQaAQmE8sFR9QFEIMUjh%2Fimage.png?alt=media\&token=86142149-b599-4714-9c9c-db9566a49941)
{% endhint %}
