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:
- Sale (displays on any item in your shop if you have set a Compare at price in your admin settings)
- 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.
Step 2: Click on Custom data, then proceed to Products.
Step 3: Click Add definition.
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:
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.
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.
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.
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.
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.
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:
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: