Appearance
Ingredients and nutrition ​
This guide describes how to set up the Ingredients and nutrition section.
Use the section to display ingredients and a nutritional information table on a page.
For general guidance with modifying sections, refer to Sections overview and Shopify help: Sections and blocks.
Configure the Ingredients and nutrition section ​
To configure your Ingredients and nutrition section:
In the Theme editor, use the theme templates dropdown at the top of the page to select a page that contains a Ingredients and nutrition section.
Note
The section can be added to any page except Gift card and Customer pages. To add the section to the current page, select Add section > Ingredients and nutrition. Refer to Shopify help: Add a section.
From the side menu, select Ingredients and nutrition.
Select a setting described in the following table.
| Setting name | Description |
|---|---|
| Display on card | Use the Display on card option to show or hide a card behind the section. Refer to Shopify help: Cards. |
| Ingredients > Heading | Enter text in the Heading field to display as a heading in the section's Ingredients area. Format the text and add links using the inline editor. |
| Ingredients > Text | Enter text in the Text field to display as body text in the section's Ingredients area. Use the inlinetext editor to add links and styling as needed. |
| Nutritional information > Column 1 label | Enter a single line of text in the Column 1 label field to display as a label for Column 1 in the section's Nutritional information table. |
| Nutritional information > Column 2 label | Enter a single line of text in the Column 2 label field to display as a label for Column 2 in the section's Nutritional information table. |
| Nutritional information > Column 3 label | Enter a single line of text in the Column 3 label field to display as a label for Column 3 in the section's Nutritional information table. |
| Nutritional information > Information | Enter text in the Information field. Use the inlinetext 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. |
| Header > Title | Enter text in the Title field. Format the text and add links using the inline editor. |
| Header > Subheading | Enter text in the Subheading field to display as a heading in the section's Nutritional information table. Format the text and add links using the inline editor. To use this option, add text to the Title field. |
| Color > Color scheme | Use the Color scheme picker to select a color scheme for the section. Refer to Colors. |
| Color > Use gradient for background | Set the Use gradient for background option to on or off. Use this option to turn on or off using a gradient as the section's background. |
| Theme settings | If available, select Theme settings to access additional settings for the section. Refer to Section theme settings menu. |
| Custom CSS | Select Custom CSS. In the CSS field, enter custom CSS styles to apply only to the current section. Refer to Shopify help: Add custom CSS. To apply custom styles to your entire online store, refer to Theme settings > Custom CSS. |
| Remove section | Select Remove section to delete the section from the current page. |
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.
Configure a block in a Ingredients and nutrition section ​
To configure a block for your Ingredients and nutrition section:
In the Theme editor, use the theme templates dropdown at the top of the page to select a page that contains a Ingredients and nutrition section.
From the side menu, expand the Ingredients and nutrition section menu.
To configure an existing block, select the block from the side menu.
To add a new block, select Add block, choose a block to add, and then select the block you added.
Note
In the section, you can add, remove, show, hide, and move blocks. Refer to Configure blocks inside a section and Shopify help: Sections and blocks.
Apply a block setting described in the following table.
| Block name | Block description | Block setting(s) |
|---|---|---|
| Background pattern | Displays a stylistic pattern as a background in the section. | Refer to Background pattern. |
| Background shape | Displays a stylistic shape as a background in the section. | Refer to Background shape. |
| Sticker | Overlays the section with a stylized sticker. | Refer to Stickers. |
| Shape divider | Displays a stylized separator between the current section and the next/previous section. | Refer to Shape divider. |