Show custom sticker badges on product tiles #

This guide describes how to use metafields to show a custom sticker badge on product tiles.

In the following image, the custom badge New!! is displayed over the first product tile.

Define a badge metafield #

A custom badge requires a new product metafield definition. Refer to Shopify help: Adding metafield definitions

To add a new metafield definition:

1. In your store's admin, go to Settings > Metafields.

   

2. On the Metafields page, select Products, and then choose Add definition.

   

3. In the Name text box, enter a name for the metafield.

   For example, in the Name text box, enter Badge.

   [Optional] In the Description text box, enter text to describe the metafield. For example, enter Metafield for badge sticker on product grid tiles.

4. In the Namespace and key text box, enter shapes_theme,

   

5. Expand the Select content type list, and then select Single line text as the content type.

6. Select Save from the Unsaved changes menu at the top of the page.

Set values for the badge metafield #

To set values for the badge metafield:

1. In your Shopify admin, select Products, and then select a product from the product list.

   

2. At the bottom of the page, locate the Metafields area.

   

3. Select a metafield from the list, and then enter the required values.

   For example, select the Badge metafield, and then enter the value New!! into the text box.

   

4. Select Save.

Add the badge metafield to product tiles #

1. In Theme editor, go to Theme settings > Product tiles.

2. In the Metafield badge > Metafield key text box, enter the key for the metafield.

   For example, in the Metafield key text box, enter badge. You can also set a shape for the badge.

   

3. Select Save.

4. Visit a store page with product tiles, and confirm the badge displays correctly.

   For example, in the following image, the New!! badge is displayed on a store's Collections > Default collection page.