# Badges / Stickers

Pipeline includes a set of pre-made product badges or sometimes known as stickers. These are displayed on the product cards which appear most commonly on Collection listings:

<div data-full-width="true"><img src="/files/rnxpmC16NNwiVHtfbodN" alt="Custom Black Friday badge"></div>

## Sale badge

The sale badge/sticker is automatically generated and can be displayed in two styles:

* A savings badge. This displays "Save" followed by the percentage like "Save 21%". The savings percentage is automatically calculated by Pipeline.&#x20;
* A standard "Sale" badge. This is a regular badge indicating that the product is discounted.

### How to&#x20;

* Set the **Compare-at price** to be **larger** than the regular product Price:

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

* Choose "Show sale badges"
* Optionally check "Show sale amount" for the percent discount style badge

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

### Sold out badge

Pipeline can automatically display a "Sold out" badge if you are tracking inventory with your products and the item is out of stock:

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

## Custom badges

Pipeline allows you to create your own custom badges which will be displayed on all product grid views including collections, navigation, related items, and sections.

### How to create

There are a few basic steps to set up and start using custom badges. Here is a quick summary of the steps:

{% hint style="success" %}
**Basic steps**

1. Using the Shopify Admin under Settings, **define a product metafield**. The Content type is Single line text (One value)
2. In the Product Setup, **add a value to each product** to generate a custom badge. Each product can have a different badge if desired.
3. In the Theme Editor, ensure that Custom badges are enabled under Theme Settings -> Product Card.&#x20;
   {% endhint %}

### Step 1&#x20;

In the Shopify Admin -> Settings -> Custom data, choose Products:

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

* Use the "**Add definition**" button to create a new product definition
* For the Name, use "Badge" or "badge"
* Change the Namespace and key from `custom.badge` to **`theme.badge`** (important):

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

* Verify you've changed that to **`theme.badge`**
* Add an optional description
* Click on "Select type" and choose "**Single line text**"

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

* Choose "**One value**"
* Verify your definition looks like the following:

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

* Press the **Save** button to complete

### Step 2

Add sticker information to products (fun step).&#x20;

* In the **Shopify Admin -> Products**, choose any product that you'd like to display a custom badge on.&#x20;
* Scroll to the bottom of the product setup, to the Metafields section, and add your sticker value to the new field called "badges" or "Badges":

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

* Use the **Save** button to complete.
* Continue for any other products you'd like to add badges to.&#x20;

### Step 3

In the Theme Editor, use the Settings icon for the **Theme Settings**. Next, open the **Product Card** section:

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

Check the option to **Enable custom badges** in the Product badges group:

<figure><img src="/files/9uKekm8SAZAC9uO3gA4d" alt=""><figcaption></figcaption></figure>

### Result

You can now view the custom product badges that you created:

<div data-full-width="true"><figure><img src="/files/BDnYVky0H6peSsoVUj80" alt=""><figcaption></figcaption></figure></div>


---

# 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://pipeline.groupthought.com/collections/collection-pages/custom-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.