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 variant selectors, the section contains a Nutritional information block. The block provides details about the product's nutritional qualities. In the upper left, part of the Theme editor's Nutritional information block settings menu is displayed. The block's Information field contains the text displayed in the block's information area as rows of text.

Add a nutritional information block

You can add a Nutritional information block to the Featured product and Product sections.

To add a Nutritional information block to a supported product section:

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

2. From the side menu, expand the product section's settings 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. Alternatively, you can Add dynamic sources of nutritional information.

Block setting name	Description
Column 1 label	In the Column 1 label field, enter text to display as a label for Column 1 in the block's Nutritional information table.
Column 2 label	In the Column 2 label field, enter text to display as a label for Column 2 in the block's Nutritional information table.
Column 3 label	In the Column 3 label field, enter text to display as a label for Column 3 in the block's Nutritional information table.
Information	In the Information field, enter text to display as table cell data in the block's Nutritional information table. Use the inline editor to add links and styling as needed. To format table cell data text, separate text for the columns with a comma, use line breaks to add a new row, and use a hyphen to indent rows.
Card > Display on card	Use the Display on card option to show or hide a card behind the block. Adjacent blocks set to Display on card are merged into a single card. Refer to Shopify help: Cards.
Remove block	Select Remove block to delete the block from the section.

Note

To connect a metafield to a setting that supports metafields, select the Connect dynamic source icon displayed beside the setting in the Theme editor.

To learn how to connect a metafield to a supported setting, refer to Shopify help: Connecting metafields to your theme by using the Theme editor.

Modify the default information data

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

Note

Alternatively, you can Add dynamic sources of nutritional information.

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

1. In the Theme editor, open a Nutritional information block.

2. In the block's Information field, enter text to display in the block's information area.

3. Format the text using the inline editor 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 an Information field containing the text:

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

   

Add dynamic sources of nutritional information

You can add dynamic sources of nutritional information by using a custom metafield. After you define and apply a custom metafield, the theme uses the metafield as the source for the block's text inside the block's information area.

Define a custom nutritional information metafield

To define a custom nutritional information metafield:

1. In the Theme editor, open a Nutritional information block.

2. Locate the block's Information field, select the Connect dynamic source icon, and then choose Add metafield.

   

3. On the Add product metafield definition page, enter the following information:

   • In the Name field, enter a name for your metafield. For example, enter nutritional_information.
   • Below the Name field, note the auto-filled custom.nutritional_information namespace and key. You will reuse these later in the Theme editor. Alternatively, to provide a custom namespace and key, select the auto-filled custom.nutritional_information element, and then enter your required namespace and key into the Namespace and key field.
   • Set the Type to One value, then select Multi-line text.

   Note

   Configuring the Description, Category assignments, Options, and Validations settings is optional. For information about configuring these settings, refer to Shopify help: Metafields.

4. Confirm that your completed metafield definition is similar to the example in the following image.

   

5. Select Save to save your custom nutritional information metafield.

Add the custom nutritional information metafield to a specific product

To add the custom nutritional information metafield to a specific product:

1. In your Shopify admin, select Products, and then choose a product from the Products list that you want to provide with nutritional information.

2. In the Product editor, locate the Product metafields area.

3. Select the custom nutritional information metafield you created previously.

4. In the text field, enter text to display inside the block's information area as rows of text. Format the text 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 text field containing:

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

   

5. Select Save to save the changes you made.

   Repeat the previous steps to add nutritional information to other applicable products.

Add the custom nutritional information metafield to a Nutritional information block

To add the custom nutritional information metafield to a Nutritional information block:

1. In the Theme editor, open a Nutritional information block.

2. Locate the block's Information field, remove the default text, and then select the Connect dynamic source icon.

3. From the list of metafields, select the custom nutritional information metafield you created previously to add the metafield to the block.

   

4. Select Save to save your changes.

5. Preview each product page you configured to confirm that the Nutritional information block displays the nutritional information metafield data correctly.