Nutrition Information

Overview

Meet the section that lets your product's story and its facts sit side by side! The Nutritional Information section pairs a beautiful image with a little bit of editorial copy and a clean, easy-to-read nutrition facts panel — complete with tabs, so you can show different views like "Per 100ml" and "Per can" without cluttering the page.

It's made for food, beverage, and supplement brands (though it's lovely for any "what's inside" moment). Set the scene with an image and a headline, then let the facts panel do the talking.

How It Works

There are three pieces to play with:

Section settings – The big-picture stuff: your image, how the image and content are arranged, the width of the facts panel, and the overall look (padding, borders, colors).
Content Block – The story bit next to your image. Add a subheading, heading, paragraph, and button, and choose how they line up.
Nutritional Block – The facts panel itself. Style it once, then add an Information block for each tab of facts you want to show.

Section Settings

Full width	Turn this on to let the section stretch edge-to-edge across the browser, or leave it off to keep it within the standard page width.
Image
Desktop image size	Sets how large your image appears on desktop. Adapt to image lets it size naturally to its own dimensions, or pick a fixed size for more control.
Mobile image size	Sets how large your image appears on phones (e.g. Large), so it always looks right on smaller screens
Image	The main image for this section. A landscape image around 2880 × 1280px (.jpg) is recommended for the crispest result.
Mobile image	Optional — upload a different, more portrait-friendly image just for phones (around 740 × 1100px .jpg recommended). Leave it empty and your desktop image is used automatically.
Desktop Direction	Choose how the image and content are arranged on desktop: Horizontal (side by side) or Vertical (stacked).
Layout
Desktop nutritional info width	Sets how wide the facts panel is on desktop, in pixels (e.g. `540 px` ). Widen it for roomier rows, or narrow it for a more compact card.
Appearance
Padding top / Padding bottom	Adds breathing room above and below the section, in pixels (e.g. `44 px` each). Handy for spacing it nicely from neighbouring sections.
Border	Choose whether to Show or Hide a divider line around the section.
Border position	If the border is shown, place it on Both edges, just the Top, or just the Bottom.
Overlay	Adds a color tint over your image (e.g. `#000000` ). Lower its opacity for a subtle wash, or skip it entirely by keeping it transparent — great for helping text stand out over busy photos.
Color scheme	Pick one of your theme's saved color schemes for the section, or click Edit scheme to fine-tune the colors.
Background color	Sets the color behind the section (e.g. `#FFFFFF` ). This color is visible when the section is in fixed width — that is, when Full width is turned off.

Blocks

The section is built from two blocks: a Content Block for the story, and a Nutritional Block for the facts panel.

Content Block

This is the text area beside (or above) your image. Click Add block inside the Content Block to add any of these:

Sub heading	A short line above the main heading — perfect for a little label (like "What Is Inside").
Heading	The main title (like "Good Stuff Only. No Junk.").
Paragraph	A short line or two to set the scene. Keep it snappy so shoppers can read it at a glance.
Button	Your call-to-action. Give it a label and link it wherever you like — or leave the label blank to hide it.

Content Block layout settings:

Content alignment (Desktop & Mobile)	Line your text up to the Left, Center, or Right. You can set desktop and mobile separately.
Content position	Choose where the content sits vertically next to the image — Top, Center, or Bottom. Note: when the section's Direction is set to Vertical, this setting has no effect

Nutritional Block

This is the facts panel. Style it once here, and every tab inside it inherits the look.

Background color	The panel's background (e.g. `#1A1209` for a rich dark card).
Text color	The color of the text inside the panel (e.g. `#F5F0E8` ).
Tab settings
Background color	The background of an inactive tab.
Text color	The text color of an inactive tab.
Active background color	The background of the tab that's currently selected.
Active text color	The text color of the currently selected tab.

💡 Set the active colors to the opposite of the inactive ones (light tab / dark active, or vice versa) so it's always clear which tab is selected.

Information block (one per tab)

Each Information block is a single tab of facts. Add one for every view you want to show (for example, one for "Per 100ml" and one for "Per can"). Click Add block → Information inside the Nutritional Block.

Good to know: The tab buttons only appear once you've added more than one Information block, and each block needs its Tab label filled in with a name. With a single block (or an empty Tab label), the panel simply shows the facts with no tabs.

Tab label	The name shown on the tab button (like "Per Can 300ml"). This is what customers tap to switch views — and a tab only shows up once this label is filled in.
Left column label	The heading on the left of the panel (like "Nutrition Facts").
Right column label	The heading on the right (like "Serving Size 1 can (300ml)"). On mobile, if the left label runs long, the right one automatically drops to the next line.
Information	The main facts, entered in a simple rich-text box. This is where your Calories, Total Fat, Sodium, and so on go — see the formatting tip below.
Extra information	An optional footnote under the facts (like " Not a significant source of saturated fat, trans fat…"*).

✏️ How to format the Information facts:

The facts box uses three easy rules to build clean, aligned rows:

Use a colon : to separate a label from its value → Calories: 15 kcal
Add a second colon for a right-hand value like a daily percentage → Total Fat: 0g: 0%
Start a line with a hyphen - to indent it as a sub-item → - Dietary Fiber: 0g: 0%
Press enter / use a line break to start a new row.