Add custom product badges

This guide describes how to use Metafields to create custom badges to display on product Tiles.

For sections that support product Tiles, in addition to displaying "On sale" and "Sold out" badges on product Tiles, you can use Metafields to create custom product badges.

For example, the previous image shows a store's Featured collection section that contains a Plain t-shirt product Tile. The Tile is overlaid with the NEW!! custom product badge. A custom Metafield is used to create the custom product badge.

To use a Metafield to create a custom product badge, complete the following steps.

• Define a custom product badge Metafield
• Add values to your custom product badge Metafield
• Enable your custom product badge Metafield in Theme settings
• Display your custom product badge in a Product section

Define a custom product badge Metafield

1. On your store's Shopify admin page, select Settings.

2. From the sidebar menu, select Metafields and metaobjects, and then choose Products.

3. On the Product metafield definitions page, select Add definition and then enter the following information.

   • In the Name field, enter a name for your custom product badge Metafield. For example, enter my_badge.

   • Use the Type drop-down options to select Single line text, and then choose List of values.

   • Optional: Select Add description, and then, in the Description text box, enter a description for your custom product badge Metafield. For example, enter A custom badge for my products.

4. Confirm that the information you entered is similar to the information shown in the following image, and then select Save to save your custom product badge Metafield definition.

   

Add values to your custom product badge Metafield

1. On your store's Shopify admin page, select Products and then choose a product from the product list that you want to use with your custom product badge.

2. On the Product editor page, locate the Metafields pane.

3. On the Metafields pane, select the custom product badge Metafield you created previously, and then enter your required value into the corresponding text box. The value you enter is used as label text for your custom product badge.

   In the following image, the example value NEW!! is entered.

   

4. Optional: To add another value, select Add item, and then enter the required value into the corresponding text box.

5. Select Save to save the values for your custom product badge metafield.

Enable your custom product badge metafield in Theme settings

1. Open your theme in Theme editor and then select Theme settings > Product grid tiles.

2. On the sidebar menu, locate the Badges pane and then set the Show custom badges option to Metafield.

   Note

   The other options available are:

   • None. Turn off displaying custom product badges.
   • Tags. Display product badges created from the product Tags you specify in Shopify's Product editor.

3. In the Metafield namespace and key box, enter custom., and then enter the name of the custom product Metafield you created previously.

   For example, enter custom.my_badge.

   

4. Select Save to save your updated product badges' Theme settings.

Display your custom product badge in a Product section

1. Open your theme in Theme editor, select Sections, and then choose a product section where you want to display your custom product badge.

2. On the section's setting menu, select the required product or collection, and then confirm that your custom product badge displays on the section's product Tiles.

   For example, the following image shows a product section and the section's Plain t-shirt product Tile is overlaid with the NEW!! custom product badge.

   

3. Select Save to save the change you made changes to the product section settings.