Skip to content
On this page

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.

An example of a custom badge on a 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.

    The product metafield page in Shopify admin.

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

    The Add definition button on the product metafield page in Shopify admin.

  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,

    Example of a custom badge on a product tile.

  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.

    The Products menu in Shopify admin.

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

    The Products Metafields area in Shopify admin.

  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.

    Example values in the metafields area of a product page in Shopify admin.

  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.

    An example metafield definition in Theme settings.

  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.

    An example badge on a store's Collection grid page.