# Badges

Add custom badges using metafields in Story 2:

![](https://3450226476-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MI6cK8SrstUdE_nxQrW%2Fuploads%2FAzgL4vXkbvWIgtN1OW6X%2FScreen%20Shot%202021-11-19%20at%206.54.17%20PM.png?alt=media\&token=6c9d1562-0eec-4cf7-9c79-a423eef3f8cc)

Each product can have a custom and unique badge when using metafields. 

### How to setup

#### TLDR;

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

```json
theme.badge
```

See example here:

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

### Detailed version

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

![](https://3450226476-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MI6cK8SrstUdE_nxQrW%2Fuploads%2FkjoaI0yUpH7XHvK6zUSU%2FScreen%20Shot%202021-11-19%20at%207.04.54%20PM.png?alt=media\&token=4ddd5df6-ba20-4cf0-98de-a29121d523c7)

Choose the **Add definition** button:

![](https://3450226476-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MI6cK8SrstUdE_nxQrW%2Fuploads%2Fa3a5vpKhfd99ULUmyn7b%2FScreen%20Shot%202021-11-19%20at%207.26.03%20PM.png?alt=media\&token=d32b5ab2-35da-40b5-bd34-9f75d9aa3d69)

Next, add a Name for the metafield, any name is fine. The namespace and key **must be modified**. Be sure to change from the default entry:

![Change the default Namespace and key](https://3450226476-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MI6cK8SrstUdE_nxQrW%2Fuploads%2FUuSMjZLgbDFV2KNtVs2B%2FScreen%20Shot%202021-11-19%20at%207.05.21%20PM.png?alt=media\&token=07363b5b-cc4e-4d8e-bbe6-296e98504955)

Change to:

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

Example:

![Don't skip this step](https://3450226476-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MI6cK8SrstUdE_nxQrW%2Fuploads%2Fv3eOTsxjLYHzRjeQ3c1l%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 then **Single line text**:

![](https://3450226476-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MI6cK8SrstUdE_nxQrW%2Fuploads%2Fl7hAXbF1xRwFCy7nZVFD%2FScreen%20Shot%202021-11-19%20at%207.26.49%20PM.png?alt=media\&token=63e83416-df08-49ae-a310-aa092babebce)

Single line text:

![](https://3450226476-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MI6cK8SrstUdE_nxQrW%2Fuploads%2FmDgwTTotqmNnkXdWXUnV%2FScreen%20Shot%202021-11-19%20at%207.27.03%20PM.png?alt=media\&token=a8d04928-3b45-4bcc-9b54-97c909d735f3)

Save your new product metafield. Verify that the metafield is called:

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

![](https://3450226476-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MI6cK8SrstUdE_nxQrW%2Fuploads%2FYTbDpA3RTOTmW3G0K1at%2FScreen%20Shot%202021-11-19%20at%207.27.12%20PM.png?alt=media\&token=19db1495-4a6c-4ad3-a455-ea6d0d20d5b2)

### Product setup

The 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:

![](https://3450226476-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MI6cK8SrstUdE_nxQrW%2Fuploads%2F2jEZjbixwRhgMsWWt6Jl%2FScreen%20Shot%202021-11-19%20at%207.38.45%20PM.png?alt=media\&token=3204fde1-1076-45ec-9113-ef6ff82ff478)

Update the Product badge metafield with the custom badge name:

![](https://3450226476-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MI6cK8SrstUdE_nxQrW%2Fuploads%2FX4T0VHUqdYKWhgwtiNcX%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://3450226476-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MI6cK8SrstUdE_nxQrW%2Fuploads%2FAzgL4vXkbvWIgtN1OW6X%2FScreen%20Shot%202021-11-19%20at%206.54.17%20PM.png?alt=media\&token=6c9d1562-0eec-4cf7-9c79-a423eef3f8cc)