Custom Product Badges

With the Essence theme, you can easily add custom badges to your product cards and product pages. All you need to do is add a product metafield in your Shopify admin, and the theme will automatically display the badges for you.

Custom Product Badges

There are two ways to configure custom badges:

  • Basic: Uses a single text product metafield, allowing you to display different custom badges, all in the same color.
  • Advanced: Utilizes metaobjects for badges, enabling you to customize the color for each badge type.

Basic Configuration

Instructions
  1. Open Settings in your Shopify admin.
  2. Click Custom data.
  3. Click Products.
  4. Click Add definition.
  5. Configure the metafield as shown in the screenshot below: Basic Configuration Metafield
  6. Click Save.

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.

To change the color of the badges, go to the Theme Editor and navigate to Theme Settings > Colors > Custom badges.

Advanced 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