How to add a Nutrition Fact Bar?

On the Product page, click on the Product Information section, then add a new block called Nutrition Fact Bar. To set it up, you need to:

• Click on the Nutrition Fact Bar block,  then scroll down to the Content section.
• In the Nutrition details field, fill in the content following this format:

The loading bar will be automatically updated depending on the percentage you filled in.

Some other settings you can do for the Nutrition Fact Bar:

• Show in tab: Tick to enable the whole table content to be collapsed or expanded with one click.
• Open this tab by default: Make the content under the tab always expanded when the page is loaded.
• Icon: 4 options:
• Choose your favorite Icon from the drop-down list. Choose "None" if you don't want any icons.
• Find your preferred one in the Icon list, copy and paste its exact name to the “Use another icon” field. (Note: Make sure to choose Icon > "Use another icon" to activate this function.)
• Upload a Custom icon image.
• Add a Custom icon (SVG code). (For assistance with custom SVG code, please contact our support.)
  
• Use secondary background: Tick to add a background to the whole nutrition fact bar.
• Heading: By default, it will be shown as “Additional details”, change it as you need.
• Extra details: Enter other information to put it outside and underneath the Nutrition Fact bar.
• Colors: Change the color for the content background, and the loading bar.

✍️ How to show dynamic content for the nutrition bar?

The instructions above give you a basic understanding of adding the table information to the product page. If you want to make it more advanced by changing the table’s content dynamically based on the product. 2 ways to do it:

Method 1. Using the “Connect dynamic sources” button:

💡 With this method, you can enter the entire nutrition bar content into a rich text metafield. Once connected, the whole nutrition bars will update dynamically based on the product.

Steps to Set Up:

• 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.

Method 2. Using Namespace and key of the metafield:

💡 This method lets you show dynamic content for specific parts of the table by linking each element to a separate metafield.

Steps to Set Up:

Step 1: Create Product or Variant metafields with the Single Line Text - One Value type.

Note: The metafield names for the product and its variants must be the same.

Step 2: In Shopify admin, go to Products tab > click on a product

• If you created a Product metafield: Scroll down to Metafields setting group > Enter a value with this format: X% (X is number).
• If you created a Variant metafield: Scroll down Variants setting group > Click on a variant > scroll to Metafields setting group > Enter a value with this format: X% (X is number).

Step 3: In Theme Editor > go to the product page > add the Nutrition Fact Bar block to the Product Information section.

Step 4: In the Nutrition Fact Bar setting panel, find the Details field:

• Enter the content following the content formatting rules 
• For dynamic content, enter the metafield keys (find the key in Setting > Custom data > click on your metafield > Namespace and key).
• Example:Protein: custom.percentage → This will display as Protein: 20%.

Step 5: (Optional) Change the text that shown when the metafield has no value in Text to use for empty fields setting.

Step 6: Save the changes.