# Badges

Badges are visual labels used on product cards/product page to convey important information at a glance. They enhance the shopping experience by drawing attention to key details about the product's status, such as promotions, stock levels, or unique features.

* **Custom badge:** A personalized label that highlights unique product features or categories, such as "New Arrival" or "Limited Edition." Requires adding a specific tag in the product settings.
* **Sale badge:** Indicates products currently on sale. Designed to attract attention and boost conversions by showcasing promotions.
* **Sold out badge:** Appears on products that are out of stock or when all variants are unavailable. Helps manage customer expectations by clearly indicating unavailable items.

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

### A. Settings:

#### **1. Badge position**

* **Top left:** Displays the badges on the top-left corner of the product image.
* **Top right:** Displays the badges on the top-right corner of the product image.
* **Below image:** Positions badges beneath the product media, aligning with the content block of the product card.

#### **2, Sale badge**

The **Sale badge** can be customized to display the type of discount or a custom message.

* **Show discount amount:** When checked, replaces the default "ON SALE" text with the specific discount amount. For example: "SAVE 11%".
* **Discount type:** Defines the format of the discount displayed on the badge:
  * **Percentage:** Displays the percentage discount, e.g., "SAVE 11%".
  * **Amount:** Displays the discount in the store’s currency, e.g., "SAVE $100":
  * **Text:** Displays static text, e.g., "ON SALE".
* **Background:** Choose the background color of the sale badge.
* **Text:** Choose the text color for the sale badge.

#### **3, Sold out badge**

* **Background:** Choose the background color of the sold-out badge.
* **Text :** Choose the text color for the sold-out badge.

#### **4, Custom badge**

* To display a custom badge, add the tag \_theme\_custom\_text in the product settings. Replace "custom\_text" with the desired badge text.
* **Background:** Choose the background color of the custom badge.
* **Text:** Choose the text color for the custom badge.

<details>

<summary><strong>How to create custom badges?</strong></summary>

* Navigate to the product settings in your **Shopify admin**.
* Add a tag starting with "\_theme\_" followed by your custom badge text.&#x20;

**Example:** A tag like "\_theme\_NEW ITEM" will display the badge "NEW ITEM".

* Save the product, and the badge will appear on its product card.

</details>

### **B. Badge priority rules**

When a product qualifies for multiple badges, they are displayed based on a predefined hierarchy:

* **Custom badge:** Always takes the highest priority. If a product has a custom badge tag, it will appear first.
* **Sold out badge:** If a product is out of stock (or all its variants are out of stock), the Sold out badge will display, overriding the Sale badge (even if the product is on sale).
* **Sale badge:** Displays only if Sold out badge is applicable.

#### **Example scenarios:**

* A product tagged with \_theme\_new\_arrivals, marked as on sale, and out of stock: The **Custom badge** ("NEW ARRIVAL") will display firstly. The **Sale badge** will also display, appearing alongside the Custom badge
* A product that is out of stock and on sale: Only the **Sold out badge** will appear, as it takes priority over the sale badge.
* A product that is on sale and in stock with no custom badge: The **Sale badge** will display.

{% hint style="info" %}
**Note***: This priority system ensures badges provide clear and relevant information to the customer.*
{% endhint %}


---

# 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://help.byinspiredlabs.com/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.