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. Turn on Full bleed to have the media meet the edges of the screen with square corners and the header sitting over it, rather than sitting inset as a rounded card. The content is capped at 1080px so headlines wrap on the measure the design uses rather than running the full width of the screen.

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.
Full bleed	Runs the media edge to edge with square corners, with the header over it. Top and bottom padding are ignored while it is on. Full-screen only.
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 color	The tint layered over the media for text legibility. Uses the same gradient picker as the background — one stop for a flat wash, several for a gradient. Leave empty for the default. Full-screen and Banner only.
Overlay opacity	How strong the overlay colour is. 0 disables it entirely. Default 100%. Full-screen only.
Banner overlay opacity	How strong the overlay colour is over the 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.

Leaving Overlay color empty is a sensible default, not “no overlay”

Each layout falls back to its own treatment when you leave the colour empty: Full screen fades deep green up from the bottom, so the text is covered but the top of the image stays clear; Banner lays an even wash across the whole image. To remove the overlay entirely, set the matching opacity to 0 instead.

Overlay color is shared between the two layouts — one colour, applied by whichever of them is active. The opacity is separate for each, because the two defaults are deliberately far apart.

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 and on any hero with Full bleed on, both of which sit flush to the sections above and below them.
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.

Edge-to-edge heroes and the header

Two setups have the header sit over the hero rather than above it: the Banner layout, and any Full screen hero with Full bleed turned on. In both, the image runs up behind the navigation.

The nav turns white so it stays readable against the image — but how that happens differs between the two:

• Banner always does it. Its content sits over the image, so it is locked to white text and the white nav comes with it.
• Full bleed follows your Text theme setting. Set it to Dark and the nav turns white along with the hero text. Leave it on Light and the nav keeps its normal dark green — which is usually wrong over a photo.

The hero must be the first section on the page

The white-nav effect only applies when the hero 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.

On a full-bleed hero this matters more than on Banner, because the content is centred rather than pinned to the bottom — the headline sits closer to the nav, so the top third of the image is carrying both.

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.