Custom Product Badges

With the Essence theme, you can add customizable badges to product cards and product pages using Shopify metaobjects. Define a badge metaobject with a label and color, then assign badges to products via a metafield.

Custom Product Badges

Configuration

Instructions
  1. Open Settings in your Shopify admin.
  2. Click Custom data.
  3. Scroll down and click Add definition under Metaobject definitions.
  4. Configure the metaobject as shown in the screenshot below. The names (Label, Color) must match exactly.
    • Label: Single line text input
    • Color: Color input Custom badge metaobject configuration
  5. Click Save.
  6. Click Custom data again, then Products, and click Add definition.
  7. Configure the metafield as shown in the screenshot below (select metaobject as the type and choose the metaobject you just created): Advanced Configuration Metafield

After completing these steps, open the product where you want to add a badge in your Shopify admin. Scroll down to Product metafields and click on the input box next to Badges. This is where you can start adding your custom badges and setting up different colors.

Showing Custom Badges on Product Pages

To show the badges on your product pages, follow these steps:

Instructions
  1. Open the product page in the Theme Editor.
  2. In the product section, click on Add block.
  3. Select Custom Badges from the list of available blocks.

After adding the custom badges block, you will see the badges appear on your product pages based on the metafields you have configured.

Table of Contents