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 Shopify admin, select Settings > Metafields and metaobjects > Products.

  2. On the Product metafield definitions page, select Add definition, and then add the following information:

    • In the Name field, enter a name for the metafield. For example, enter badge.
    • Below the Name field, select the auto-filled custom.badge element. In the Namespace and key field, enter shapes_theme.badge instead of custom.badge.
    • Set the Type option to One value, then select Single line text from the Select type list.
    • Optional: Select Add description, and then enter text in the Description field to describe the metafield. For example, enter Metafield for badge sticker on product grid tiles.

  3. Confirm that your completed metafield definition is similar to the example in the following image.

    Example of a custom badge metafield definition in Shopify admin.

  4. 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. In the Product metafields area, locate a badge metafield, and then enter the required values.

    For example, in the following image, the badge metafield has the NEW!! value.

    An example value added to a badge metafield in the Products metafields area of Shopify admin.

  3. Select Save.

Add the badge metafield to product tiles ​

To add the badge metafield to product tiles:

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

  2. In the Metafield badge > Metafield namespace and key field, enter the namespace and key for the badge metafield.

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