Hero

One section, four layouts. Content is theme blocks, so the headline, copy, star rating and buttons are all merchant-arranged rather than fixed section settings.

Full-screen — media fills a rounded card behind the content, which is overlaid on top. Autoplaying background video or an image.

Split — a content column beside a media card. Text sits on the section background rather than over the media.

Stacked — content above, media in a full-width card below. Text sits on the section background. Best when the headline is long enough that overlaying it on the image would hurt legibility.

Banner — a short band for interior pages. The image runs the full width of the screen with no rounded corners, the header sits over the top of it, and the title sits in the bottom-left. Use this for pages like “Our Ingredients” that need a header image rather than a full hero.

Switching layouts never loses your content — all four render the same blocks, just positioned differently.

Settings

Layout

Setting	What it does
Layout	Full screen, Split, Stacked or Banner. Drives everything below.
Show brag bar	Adds a row of proof-point figures. Full-screen floats it over the media; Stacked runs it across the bottom of the media card. Not available on Split or Banner.
Media position	Which side the media card sits on. Split only — the other layouts ignore it.
Text theme	Light = dark green text. Dark = white text, and buttons/links invert automatically. Hidden on Banner, which is always white text.

Text theme is not automatic

Nothing detects whether your image is dark. If light text is unreadable over your media, switch Text theme to Dark yourself.

The exception is Banner: its content always sits over the image, so it is always white text and the setting is hidden.

The brag bar toggle still appears on Banner

Turning it on does nothing — Banner is too short to fit the bar under the title, so the section ignores it. The toggle is visible because the theme editor can only hide a setting on one condition at a time, and it is already used to hide it on Split.

The brag bar is always white text

On both layouts the bar sits over the media, so its figures are white regardless of the section’s Text theme. Choose a panel style that keeps them readable over your image — see Brag Bar.

Background

Setting	What it does
Background gradient	CSS background with a gradient picker. Any number of colour stops. Leave empty to fall through to the colour scheme.
Background type	Image or Video.
Image / Mobile image	Mobile falls back to the desktop image when empty.
Video (desktop/tablet/mobile)	Separate files per breakpoint so mobile isn’t served a desktop-sized video.
Autoplay video	Ignored when the visitor has reduced-motion enabled — the poster frame holds instead.
Overlay opacity	Darkens the media behind the content for legibility. 0 disables it. Full-screen only.
Banner overlay opacity	An even darkening wash over the whole banner image. Default 10%. 0 disables it. Banner only.

To flow one section’s background into the next, match this section’s last colour stop to the next section’s first. Each section owns a self-contained gradient, so nothing needs measuring.

Sizing and position

Setting	What it does
Minimum height (desktop)	In vw, so it scales with viewport width. Default 45. Full-screen only.
Minimum height (mobile)	In px. Default 520. Full-screen only.
Banner height (desktop)	In px. Default 445. Banner only.
Banner height (mobile)	In px. Default 320. Banner only.
Top / bottom padding	Set separately for mobile, tablet and desktop. Hidden on Banner, which is always flush to the sections above and below it.
Aspect ratio (mobile)	Shape of the media card on phones. Default 4:3. Stacked only.
Aspect ratio (tablet)	Shape of the media card on tablets. Default 16:9. Stacked only.
Aspect ratio (desktop)	Shape of the media card on desktop. Default 21:9. Stacked only.
Custom aspect ratio	Free-form width:height, shown when the matching dropdown is set to Custom. One per breakpoint.
Top / bottom padding	Set separately for mobile, tablet and desktop.
Content position Y / X	Where the content block sits in the media card. Full-screen only.
Content alignment	Text alignment, set separately for mobile and desktop.

Stacked has no minimum-height settings. Its media card is sized by aspect ratio instead — the card always fills the container’s width, and the ratio decides how tall it is. That keeps the shape consistent at every screen size rather than letterboxing or cropping as the viewport changes.

Pick Custom when none of the presets match and type the ratio as width:height. The value is the shape, not a size: 100:43 gives a card 43% as tall as it is wide, which is a little wider than the 21:9 preset.

The banner heights include the header that overlaps the band, so the visible strip below the nav is roughly 120px shorter than the number you set.

Note

The header sits on top of the page rather than pushing it down, so whichever section comes first automatically gets the header’s height added to its top padding. The value you set here is added on top of that — you don’t need to leave room for the header yourself.

Blocks

Add, remove and reorder these inside the hero:

• Customer ratings — star rating with a review-count message
• Title — the headline
• Rich text — supporting copy
• Buttons — one or more CTAs

The Brag Bar is different: it’s always present rather than something you add, and it appears once you turn on Show brag bar. You can’t reorder it — it’s fixed below the content — but you edit its figures like any other block.

An eyebrow is just a Rich text block

There’s no dedicated eyebrow block. For the small line above the headline (“About MigreLief”), add a Rich text block above the Title and set its style to a smaller size.

The Banner layout and the header

Banner is the only layout the header sits over rather than above. The image runs up behind the navigation, and the nav turns white automatically so it stays readable against it.

Banner must be the first section on the page

The white-nav effect only applies when Banner is the first section. Put anything above it and the header keeps its normal dark green — which will be unreadable over a dark image.

Choose an image with a calm top edge

The navigation sits over the top ~120px of the image. Busy or light detail up there fights the white nav links. A dark, evenly-textured top works best.

If a logo image is ever uploaded in the header settings, it will not turn white automatically the way the current wordmark does — a light version would need to be supplied.

Tips

• One hero per page. Two competing headlines dilute the message.
• Always set a mobile image if the desktop crop puts the subject at the edges — mobile is much narrower and will cut it off.
• Test reduced motion. Video-backed heroes must still communicate without the video playing.
• Keep the headline in the Title block, not baked into the image. Text in images can’t be read by search engines or screen readers.