Show nutritional information on product pages ​

This guide describes how to add a Nutritional information block to product pages.

Use the dedicated Nutritional information block, included with Shapes theme, to show formatted nutritional information on your store's product pages.

The previous image shows a store's product page with a Product section. Below the product's Price, the section contains a Nutritional information block. The block provides details about the product's nutritional qualities. In the upper left, part of Theme editor's Nutritional information block menu is displayed. The block's Information text box contains the text that's displayed inside the block's information area (as rows of text).

Add a nutritional information block ​

You can add a Nutritional information block into the following product sections:

• Featured product
• Product

To add a Nutritional information block inside a product section:

1. Go to Customize theme.

   In Theme editor, at the top of the page, use the dropdown to select a template that contains a Featured product or Product section. For example, select the Products > Default product template.

   Note

   To add a section, select Add section, choose Featured product or Product, and then select the section you added.

   The Product section is available only on Default product, and Preorder pages. A Featured product section can be added into any page, except Checkout and Giftcard pages. Refer to Shopify help: Add a section.

2. From the side menu, expand the section's settings menu. For example, expand the Product section menu.

   

3. To configure an existing block, from the side menu, select a Nutritional information block.

   

   To add a new block, select Add block, choose Nutritional information, and then select the block you added.

4. Apply a block setting described in the following table.

   Note

   A default Nutritional information block is pre-configured with example data that you can modify or remove. To modify the example data, refer to Modify the default information data.

Modify the default information data ​

By default, a Nutritional information block is pre-configured with example data that you can modify or remove.

To modify or remove the default information data for a Nutritional information block:

1. Go to Customize theme.

   In Theme editor, at the top of the page, use the dropdown to select a template with a section that contains a Nutritional information block.

2. From the side menu, expand the section's settings menu.

3. From the section menu, select a Nutritional information block.

4. In the Information text box, enter text to display inside the block's information area (as rows of text).

5. Format the text using the Text editor pane according to the following conventions:

   • Separate each row by using a line break.
   • Separate the label and value of each line by using a comma character (,). The value is displayed on the right side of the row.
   • To indent a row, start the line with a hyphen character (-) followed by a space.

   For example, the following image shows the Information text box contains the text:

   txt

   Protein, 13g
   Total Carbohydrate, 36g
   - Dietary Fiber, 11g
   -  Sugars, 6g
   Total Fat, 1g

   Protein, 13g
   Total Carbohydrate, 36g
   - Dietary Fiber, 11g
   -  Sugars, 6g
   Total Fat, 1g