Eight Themes Support Documentation

How to add custom product badges

Product badges are text labels that communicate noteworthy information about a product. They can be displayed on certain product images on your product and collection pages.

Sale badge example:

By default, there are two badges which the theme automatically applies to products:

  1. Sale (displays on any item in your shop if you have set a Compare at price in your admin settings)
  2. Sold out (appears on any product that is out of stock according to Shopify’s own inventory tracking feature)

In this guide, we'll explain how to add custom product badges to your store using metafields.


Part 1: Defining a badge metafield

To add custom badges, you must first define a dedicated product metafield. To do this:

Step 1: Within your Shopify admin, go to Settings.

Settings Button.png

Step 2: Click on Custom data, then proceed to Products.

Settings - Custom Data .png

Step 3: Click Add definition.

Metafields - Add definition.png

Step 4: In the Namespace and key field, enter: badges.myCustomBadge

'badges' is the namespace and 'myCustomBadge' is the key. You can change the key if you wish but the namespace must remain as badges.

Tip: Copy your key and save it for a later step. 

Step 5: Enter a Name and Description for your metafield. This is for your reference only.

Step 6: Click the Select type field and choose Single line text.

Your finished metafield form should look like this:

b-2.png

Step 7: Keep One value selected and Save your metafield.

Note: You can define additional metafields using different key names to display multiple custom badges on a single product. However, the namespace must always be the same.


Part 2: Assigning metafields to your products

You can now add your custom badge text to products. This will essentially link the metafield you created to specific products so custom badges can be displayed on your storefront.

Step 1: Within your Shopify settings, go to Products.

Products.png

Step 2: Select the product that you want to add the custom badge to.

Step 3: Scroll down to the Metafields section.

Step 4: Locate the metafield you defined above and enter the text you want to appear in the badge.

Product Badge - Metafield.png

Step 5: Click Save and repeat with all relevant products.

Note: You don't need to use the same text for each product's custom badge. Each product's badge can be unique. This dynamic content is made possible through the metafield key, which is needed in the next part.


Part 3: Setting up product badges on your store

Next, add your custom product badges to your theme. 

Step 1: Within the Sections menu of the Theme Editor, scroll down to Overlay Group.

Custom Badges - Add Block.png

Step 2: Under Custom badges, click Add block and then Custom badge.

Step 3: Within the block's settings, paste the metafield key for your custom badge into the Metafield key field.

Custom Badges - Metafield Key.png

Note: It may not appear accurate in the preview window. However, if you follow these steps, the badge should display correctly when you view products on your store.

Step 4 (optional): Choose a color scheme.

Step 5: Click Save. Your custom badge will now show on the product images you assigned.

Custom Badge - Example.png


Part 4: Prioritizing your badges

You can limit the number of badges shown on your products, as well as the order in which they appear by editing the Product badges settings.

Step 1: Within the Theme Editor, click on Product badges and set the maximum number you want to display at once.

Example of two badges:

Custom Badges - Maximum Badges.pngCustom Badges - Maximum Badges 2.png

Step 2: The order of the badge blocks dictates the order in which they will appear on your products. Simply, reorder these blocks, top to bottom, to ensure your badges are shown in your preferred order.

Example of prioritizing the custom badge:

Custom Badges - Reorder Blocks.gifCustom Badges - Reorder Blocks Example.png

Was this article helpful?