# Product badges with metafields

Feature introduced in Broadcast 3.2

Broadcast makes adding custom individual product badges or also known as stickers, very easy to implement and manage by using metafields.

When utilizing metafields, you simply create one metafield to activate the functionality. From there, you can add badge text to any of your products, and Broadcast will automatically generate a custom badge for that product on collection pages or any section using a product grid.

## How to set up

If your shop is using Broadcast v3.2 or higher, you can easily use this feature. The following quick video shows you how to set up the custom metafield and how to use it with products:

{% embed url="<https://www.loom.com/share/38baabf35d8943edb141dd821f5a514a>" %}
Video walk-through&#x20;
{% endembed %}

## Reference

You can use the following reference information to help with the steps covered in the video.

### Metafield definition

Create a product metafield with the namespace and key set to:

`theme.badge`

Set the content type to Single line text, with one value:

<figure><img src="https://2636770384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsD7BEEDU3B7WiEJlN0F7%2Fuploads%2F3v2rLULpzakRqWcvD9JS%2Fmetafield-definition.jpg?alt=media&#x26;token=1e4bd35e-a398-4b72-a40d-451c99d32a83" alt="Example of how the badge metafield is supposed to be set up from the shopify metafield settings"><figcaption><p>The Namespace and key must be 'theme.badge'</p></figcaption></figure>

### Product setup

In the Metafields section of any product that you'd like to use the feature on. Add a value to the badge field.

This will become your custom badge when displayed in a collection or section that includes a product grid:

<figure><img src="https://2636770384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsD7BEEDU3B7WiEJlN0F7%2Fuploads%2FnK9baysLs9mVoci0Nb1D%2Fbadge.jpg?alt=media&#x26;token=2b25db94-6fc3-4481-8bda-f3707547150e" alt="Example of where to fill in the value of the badge metafield after it&#x27;s been created"><figcaption></figcaption></figure>

### Result

When viewing a collection page or section with a product grid-style list, the custom badge is added to the top left corner if the product exists in that listing:

<figure><img src="https://2636770384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsD7BEEDU3B7WiEJlN0F7%2Fuploads%2F5PtDRmpDxDlouTUHrFtS%2Fresult.jpg?alt=media&#x26;token=59ebc116-b629-4ea7-9649-99321c368f2b" alt="Example of how the custom badges appear after the whole setup with metafields is done"><figcaption></figcaption></figure>

Each product can have its own custom badge label.

## Badge colors

Colors are managed in the Theme settings tab under '[Badges](https://broadcast.presidiocreative.com/theme-settings/theme-settings/badges)'.

Choose the background color and text color to set for all badges. Sale badges have their own values to help differentiate them from other badges:

<figure><img src="https://2636770384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsD7BEEDU3B7WiEJlN0F7%2Fuploads%2F0grkraiBreTOckXHfxHV%2Fbadge-colors.jpg?alt=media&#x26;token=cb47f021-f583-4085-b053-a38fccc03707" alt="Showing an example of the theme settings which control the colors of the badges"><figcaption><p><strong>Theme settings -> Badges</strong></p></figcaption></figure>

### Brand colors

The data-source option for badge colors allows you to choose colors you've already configured in your brand colors configuration:

<figure><img src="https://2636770384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsD7BEEDU3B7WiEJlN0F7%2Fuploads%2FH5rpQbwSRRWhYagNGzyA%2Fbrand-colors.jpg?alt=media&#x26;token=61971bb0-2fe9-4ddd-a4e8-5732c28a6cdb" alt="Showing how to connect the badge colors with dynamic sources"><figcaption><p>Connect dynamic source -> Choose brand colors</p></figcaption></figure>

Brand colors are configured and managed in the **Shopify admin settings ->  General -> Brand**:

<figure><img src="https://2636770384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsD7BEEDU3B7WiEJlN0F7%2Fuploads%2FA3VDf7z3dlhdI8AoGYiZ%2Fadmin-settings.jpg?alt=media&#x26;token=3c973827-4c2c-4071-9f84-e3fba4f4e5a4" alt="The image shows how the brand colors can be configured from the general settings"><figcaption><p>Brand color palettes in Shopify admin settings</p></figcaption></figure>

### Learn more about managing your brand settings:

{% embed url="<https://help.shopify.com/en/manual/promoting-marketing/managing-brand-assets>" %}
