Skip to content

Show custom sticker badges on product tiles

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

An example of a custom badge on a product tile.

In the previous image, on the left side, the NEW!! custom badge 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 > Custom data.

    The product metafield page in Shopify admin.

  2. On the Custom data page, in the Metafields area, 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 as a prefix for the metafield name.

    In the following example, the Namespace and key box contains the text shapes_theme.badge.

    Example of a custom badge on a product tile.

  5. Expand the Select 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.

    An example metafield definition in Theme settings.

    Note

    Select the Metafield badge shape dropdown to choose shape to apply to 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.

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