Welcome to the Eight Themes Docs

How to add custom product badges

Product badges are labels that appear on images of certain products, on your product and collection pages, or when there is noteworthy product information.

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)

Step 1: Define a badge metafield

You can create custom badges by adding a metafield to a product.

  1. Within your Shopify admin, go to Settings.
  2. Go to Metafields.
  3. Select Products and then click Add definition.

  1. Enter a name and key for the custom metafield. (Copy the key and save it for a later step.) 
  2. Click the Select content type field.

b-2.png

  1. Select Single line text.
  2. Click Save.

b-3.png


Step 2: Assign metafields to your products

You can now assign a custom metafield to a product.

  1. Within your Shopify settings, go to Products.
  2. Select the relevant product.
  3. Scroll down to the Metafields heading.
  4. Locate the metafield you defined above. (Click Show all if you can't find the metafield.) 
  5. Enter the text you want to appear in the badge.
  6. Click Save.


Step 3: Set up Product Badges on your store

To ensure your badges are showing as expected on your store, edit your Product Badges settings.

  1. Within the theme editor, scroll down to Product Badges.
  2. Click Add block > Custom badge.
  3. Go to the panel on the right.
  4. Paste the metafield key for your custom badge into the field.
  5. Choose a colour scheme (optional).
  6. Click Save.

Video Link


Step 4: Prioritise your badges

You can limit the number of badges shown on a product, as well as the order in which they appear by editing the Product Badges’ settings.

  1. Within the theme editor, click Product Badges.
  2. Go to the panel on the right.
  3. Set the maximum number.

The order of the badge blocks within the settings dictates the order in which they will appear on your products. In the left panel, drag and drop the blocks from top to bottom to ensure your badges display in the correct order.

b-5.png

 

Watch

To see a visual demonstration, click this video link.

Was this article helpful?