# Custom badges

Story theme allows you to create your own unique product badges to associate with any of your products. When using Shopify's dynamic source feature (also known as metafields), you can create individual product badges for any of your products. 

![Example of custom badge call "Best Seller" assinged to a product](https://3236268666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJFe8gZiFPB3ohxgaTmnx%2Fuploads%2FmbBb8PtCUtntOkxlMkTc%2FScreen%20Shot%202021-11-19%20at%206.54.17%20PM.png?alt=media\&token=6c9d1562-0eec-4cf7-9c79-a423eef3f8cc)

Once a badge metafield is defined (see instructions below), any of your products can display a custom badge. There are no limits to the number of badges you can create and use. All your products will be able to display a custom badge or use the built-in badges for sales and out-of-stock inventory. 

## How to setup

### Quick setup for experienced users

The most important part of setting up this metafield is to use the namespace and key of:

```json
theme.badge
```

See the example here:

![](https://3236268666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJFe8gZiFPB3ohxgaTmnx%2Fuploads%2FcS6ocWtk2WJNQPrmudrU%2FScreen%20Shot%202021-11-19%20at%206.50.05%20PM.png?alt=media\&token=f355b4eb-11be-42ff-bf46-bab0e2a25bd7)

### Full detailed step-by-step setup

The first step is to define a custom metafield that Story theme supports. 

Start in your Shopify Admin -> Settings and choose Metafields from the left panel and then click on **Products** (click images to zoom):

![Under Metafields, click on Products ](https://3236268666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJFe8gZiFPB3ohxgaTmnx%2Fuploads%2FySQSxOj5uNp6tB54amaY%2FScreen%20Shot%202021-11-19%20at%207.04.54%20PM.png?alt=media\&token=4ddd5df6-ba20-4cf0-98de-a29121d523c7) ![Use the Add definition button to begin](https://3236268666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJFe8gZiFPB3ohxgaTmnx%2Fuploads%2FP75rdzL7FZqqdyMgnPmS%2FScreen%20Shot%202021-11-19%20at%207.26.03%20PM%20\(1\).png?alt=media\&token=4279b446-4060-4c41-ae38-1ed389fc302f)

Choose the **Add definition** button to begin. Choose a name, we'll use badge. Next, we will use a custom namespace. This is **required** for custom badges. Change the default namespace from `my_fields` to **`theme`** 

![Change from my\_fields to theme](https://3236268666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJFe8gZiFPB3ohxgaTmnx%2Fuploads%2F1Yc2LUwanJY1GVztXizw%2FKapture%202021-12-30%20at%2011.10.05.gif?alt=media\&token=661a4197-344b-4b79-a641-18ad7f897cb6)

Change to:

{% hint style="success" %}
theme.badge
{% endhint %}

Example:

![Don't skip this step](https://3236268666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJFe8gZiFPB3ohxgaTmnx%2Fuploads%2FcS6ocWtk2WJNQPrmudrU%2FScreen%20Shot%202021-11-19%20at%206.50.05%20PM.png?alt=media\&token=f355b4eb-11be-42ff-bf46-bab0e2a25bd7)

Add a description and choose **Select content type**.

 Choose **Text** and we will use **Single line text** which is the default choice:

![Choose Text for the Content type](https://3236268666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJFe8gZiFPB3ohxgaTmnx%2Fuploads%2Fs8AMCOYK7fif15S3sUb9%2FKapture%202021-12-30%20at%2011.22.31.gif?alt=media\&token=c7652139-24c1-465d-afbb-6e3351bc58a9)

**Save** your new product metafield. Now we can use this custom theme.badge metafield with any of our products. 

### Product setup

{% hint style="success" %}
Now that our custom metafield has been defined, we can **easily** add a custom badge to any of our products. 
{% endhint %}

The next and final step is to edit any of your products in the Shopify Admin -> Products and update the new badge metafield. Scroll to the bottom of the product setup page:

![Product metafields are located at the bottom of the page](https://3236268666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJFe8gZiFPB3ohxgaTmnx%2Fuploads%2F81MHgYtSkDbshsBDFw4O%2FKapture%202021-12-30%20at%2020.47.13.gif?alt=media\&token=e00f220b-ddc7-4bee-815a-1d2f8b248c8d)

Update the Product badge metafield with the custom badge name:

![](https://3236268666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJFe8gZiFPB3ohxgaTmnx%2Fuploads%2FBSc4aNcph8iIeUh9Hheu%2FScreen%20Shot%202021-11-19%20at%207.38.52%20PM.png?alt=media\&token=012b52a7-9071-4edb-880c-b51e751b2ed7)

Save your product and preview on any product grid view like Collection pages:

![](https://3236268666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJFe8gZiFPB3ohxgaTmnx%2Fuploads%2FjlDeFWUNC62sKTTeZceY%2FScreen%20Shot%202021-11-19%20at%206.54.17%20PM%20\(1\).png?alt=media\&token=8393ec9e-9cca-434e-986c-5e73e61fef8a)