How to set up Metafield Badge in Product Grid element
In the product grid section, badges such as Sale, Hot, Sold-out will display the same for all product cards. But we can show a unique badge for each product card by using Shopify product metafields.
A metafield allows the merchant to add custom information to each product in Shopify Admin. For example, one product can show “Best Seller”, another can show “New Arrival”, and another can show “Limited Offer”. The app will read the metafield value from each product and display a corresponding badge on the product card. Products without a badge value will simply not display any badge.
Step 1: Turn on the Custom badge by ticking the Show badge checkbox under Product card. Now, you need to fill in the Metafield value.
Step 2: Go to Shopify Admin -> Setings
Click Metafields and metaobjects -> Products
Step 3: Then Add definition
Put a name for this new metafield -> choose type Single line text then copy the metafield code:
custom.custom_badge
Step 4: Navigate to Products -> Edit the Product -> Enter metafield content “Limited Offer“
Step 5: Finally, you go back to the App Editor -> fill in the metafield value in the box. The final code should be:
product.metafields.custom.custom_badgeAs a result, the custom badge “shoes” is showing up on top of the product image. Repeat step 4 to add more badges to other products.
Customize design of the badge such as color, text size, fonts,…
If you can’t follow the steps above, please check this video:
