Product Badge Metafield

What Is This?

This is a custom text field that enables you to add custom badges to your products in order to display a short phrase.

How Do I Set This Up?

Create the Metafield

1. From your Shopify admin, go to Settings > Custom data.
2. Select Products.
3. Click Add definition.
4. In the Name field, enter "Phrase". The Namespace and key field will automatically generate as "custom.phrase", don't edit this.
5. Optional: In the Description field, enter a description for your metafield values. We suggest "Short group of words used to mention something fun or memorable about a product"
6. Click Select content type, and then select Single Line Text.
7. Make sure One Value is selected
8. Enter "1" for the validation information for Minimum character count.
9. Enter "25" for the validation information for Maximum character count.
10. Click Save.

Shopify provides details about creating metafields here

Customize the Product Cards' Badge Settings

1. From your Shopify admin, go to Online Store > Themes.
2. Find this theme that you've added, and then click Customize.
3. Click Theme settings.
4. Click on Product Cards
5. Under Badge, customize the four settings available: Text Size, Make into badge, Tilt, and Use heading font instead of body font

Supply Data for the Metafield

1. From your Shopify admin, go to Products
2. For every product, select it and scroll to the bottom of the page where you will see the metafield you added in the first set of instructions. Select that field and enter a phrase for your product. This could be some catchy slogan, a fact about why its a desirable option, or anything else you'd like.

Display the Metafield Data on your Site

There are many sections that enable you to display these product badges. Some of them allow you to display them by using settings, while others allow you to display them dynamically. Follow the instructions for each below.

Enable By Setting

Each of the sections below will have a setting called "Show badge" or "Show product badge", toggle it on. If you've followed all of the instruction sets above, and you've supplied data for the product you're currently previewing, then you will see your Product Badge display.

1. 1. Collection Teaser
   2. Main List Collections
   3. Featured Collection
   4. Featured Product
   5. Main Collection Grid
   6. Multicolumn
   7. Shop the Look

Enable Dynamically

Any section that you add to the product template that accepts a text field will allow you to dynamically connect the product phrase. The most popular of these are Main Product and Text Marquee.

• • Main Product
    1. This section has a block called "Text". Once you've added or navigated to this section on your product page template, click on "Add Block"
    2. Select "Text"
    3. Click Insert Dynamic Source (icon) > Show More (if applicable) > Badge

    4. Learn More about connecting items dynamically here

    5. Optionally, choose the text size you prefer
    6. Optionally, choose to include a border above the icons
    7. If you've followed all of the instruction sets above, and you've supplied data for the product you're currently previewing, then you will see your Product Badge display
    8.  
  • Text Marquee
    1. This section has a setting called "Text". For this setting, click Insert Dynamic Source (icon) > Show More (if applicable) > Badge

       • Learn More about connecting items dynamically here

    2. Optionally, choose the text size you prefer
    3. If you've followed all of the instruction sets above, and you've supplied data for the product you're currently previewing, then you will see your Product Badge display