How to Configure the Nutrition Fact Bar Using Metafields?

The Nutrition Fact Bar allows you to display ingredient percentages or nutritional values on the product page using visual progress bars. This can be configured with metafields so the information updates dynamically for each product.

Add the Nutrition Fact Bar Block

1. Go to Online Store → Themes in your Shopify admin.
2. Click Edit Theme
3. Open the Product template.
4. In the Product information section, click Add block.
5. Select Nutrition Fact Bar.

Enter Nutrition Details (Basic Setup)

In the Nutrition details field, enter the content using this format:

Ingredient name : percentage%

Example:

Protein : 20%
Fiber : 10%
Vitamin C : 30%

The progress bar will automatically adjust based on the percentage value entered.

Configure Using Metafields (Dynamic Content)

• Create a Product metafield with the Rich Text type.
• In Shopify admin, go to Products tab > click on a product > find and enter values into the metafield created using the format outlined earlier.
• In Theme Editor > go to the product page > add the Nutrition Fact Bar block to the Product Information section.
• In the Nutrition Fact Bar block setting panel, find the Nutrition details field, and click connect the metafield using the Connect dynamic source

  icon.

• Save the changes.

Video Tutorial

Step-by-step tutorial:

https://www.loom.com/share/f232871032034ccba6bbacfba1f33ade

You can also check out this user guide for further details.

Updated on: 13/03/2026