Appearance

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 badge on a store's Collection grid page.

For example, the previous image shows a store's Collections > Default collection page. On the left, the New!! custom badge is displayed over the T-Shirt 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 Shopify admin, select Settings > Custom data > Products.

    The Custom data page in Shopify admin.

  2. On the Product metafield definitions page, select Add definition.

    The Product metafield definitions 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 namespace and key text box, enter the key for the metafield.

    For example, in the Metafield namespace and key text box, enter shapes_theme.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.