# Product badges

<figure><img src="/files/yPNJw9cLTNtScYxOzCDF" 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](/files/yiVRsBeWxP7ES9p1GuGK)

<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**".

![](/files/IszrFNbfM9Z8VaIcOzuy)

<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="/files/iy78z729XcOulewyEyRU" 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="/files/IzkQRjCRKzgBhT3mzkZo" alt=""><figcaption></figcaption></figure>

![](/files/JCg14iN4bghAvqji9tL1)

![](/files/1iBM762HKU2S4NSjljsf)

### Custom badge - different for each product

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

<div><figure><img src="/files/l19jjx16BOndXpusUZVe" alt=""><figcaption></figcaption></figure> <figure><img src="/files/a7rvvQRRftR3CNruAtUe" 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="/files/FgKI9Tt0xWQr6ak05VHB" 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="/files/EAONq89Q7tRwwBdef7Xw" 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="/files/WwvJSFpRRdZlaOD5egYh" alt=""><figcaption><p>Add custom badge text for the product 1</p></figcaption></figure>

<figure><img src="/files/ip2EfkIc7paGa7h584s9" 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.

![](/files/FLKMW8fQaGWZdFAaZk9A)

<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="/files/NPiuDB9EtnuaMu5dDsT8" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/1jY3oLNyLQhUdJQKAwQQ" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/qZq9LIcjVi5l5VhSf6CB" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://halosoft.gitbook.io/ella-documentation/theme-settings/product-card/product-badges.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.