Are you using a version of Influence or Momentum purchased before May 2024? If so, you need to follow this guide.

You can now add custom-worded badges to your product card images to help promote your products such as 'Limited offer' or 'Bestseller'. This guide will walk you through the process of creating and displaying these custom badges.

To add a custom badge to a product, you need to create a tag for the product.

To add a tag to your product go to your Admin > Products > Select your chosen products > Product organization > Tags

The tag should follow this format:

Example:

Once the tag is added, only the custom wording you specified will be displayed as a badge on the product card.

Custom badges will use the custom badge color setting which can be found by going to Admin > Sales channels > Online store > Themes > Customise > Theme settings > Colors > Badges > Custom badge background.

Notes: Custom badge text will truncate if it exceeds the padding of the badge. It will not wrap or drop down. Test your badges on smaller grid widths (mobile, tablets) to ensure they display correctly.

Custom badges will display in the following priority order:

This ensures that "Sold Out" badges take precedence over custom badges, which in turn take precedence over "On Sale" badges.

If a product is both on sale and has a custom badge for "Limited Edition," the custom badge will display instead of the "On Sale" badge.

To add custom badges, you must first create a define 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.

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.

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.

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.

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: