Text / Image Split

Text on one side, media on the other. The text side is theme blocks — headline, copy, stats, buttons — so the content is arranged in the customizer rather than fixed by the section.

On mobile the two always stack. Which one comes first is its own setting, separate from the desktop side, so the media can lead on mobile while still sitting on the right on desktop.

Blocks

The text side accepts these blocks, in any order and any number:

Block	What it’s for
Title	The headline.
Richtext	Body copy with formatting.
Text	A single line of plain text.
Buttons	One or more calls to action.
Tag	A small label above the headline.
List	A bulleted or numbered list.
Stats	Figures with labels, side by side.
Jump nav	Links that jump to anchors elsewhere on the page.
Spacer	Empty vertical space between two blocks.

Use Spacer to open up the text side

The gaps between blocks are fixed. When you need more room between, say, the copy and the buttons than the default gives you, drop a Spacer between them rather than padding the whole section — section padding moves the top and bottom edges too, which is rarely what you want.

Spacer has its own mobile, tablet and desktop heights, so the extra room can be generous on desktop and tighter on a phone.

Settings

Layout

Setting	What it does
Media position	Which side the media sits on. Desktop only.
Media position (mobile)	Whether the media sits Top or Bottom of the stack on mobile. Default Bottom. Independent of the desktop side.
Content width	Constrained (default) or Wide. How wide the text runs inside its column.
Media breaks out of container	Runs the media to the edge of the screen instead of stopping at the container.

Background

Setting	What it does
Background image	Optional. Sits behind the section and sharpens into focus as it scrolls into view.
Background colour	An eyedropper match for the image’s main colour. Shows while the image loads and behind its blurred edges as it sharpens. Overrides the colour scheme’s background.
Overlay colour	Only shown when a background image is set. A tint layered over the image so the text stays readable. Add one stop for a flat wash, or several for a gradient. Leave it empty for black.
Overlay opacity	Only shown when a background image is set. How strong the overlay is, 0–100%. Defaults to 0 — no overlay — so you have to raise it before any tint appears.
Text theme	Light background (default) or Dark background. On Dark, the text, buttons and stat dividers switch to light so they stay readable.
Colour scheme	Standard scheme picker. The background colour above wins over its background when set.

Set Text theme to Dark on a dark background

The text in this section is dark green by default. Put it over a dark background image or colour and it becomes nearly unreadable — a real accessibility problem, not just a styling one.

The theme does not detect this for you, because it cannot know how dark the part of the image sitting behind the text actually is. Whenever you pick a dark background image or colour, set Text theme to Dark background and check the result on both mobile and desktop.

Use the overlay when the image is busy

Switching Text theme to Dark background makes the text light, but light text over a photo with bright patches in it can still be hard to read. Overlay opacity darkens the image behind the text so the contrast holds no matter what the photo is doing. It starts at 0, so nothing is applied until you raise it; around 40% is usually about right.

The overlay only covers the area the background image covers. If the media breaks out of the container, the photo on the other half is left alone.

Pick the background colour off the image

Use the colour picker’s eyedropper on the background image itself and grab its dominant tone — the sky in a sky photo, the green in a field.

Two things depend on it. The section shows that colour while the image is still loading, so it never flashes as a white box. And as the image sharpens, its blurred edges bleed into that colour rather than into white, which is what makes the effect read as intentional instead of broken.

Spacing

Setting	What it does
Top / Bottom padding (mobile)	Spacing above and below the section on mobile. Default 3rem.
Top / Bottom padding (tablet)	The same for tablet. Default 4.5rem.
Top / Bottom padding	The same for desktop. Default 7rem.
Section ID	Optional anchor, so a link elsewhere on the page can jump here.

Where the mobile and tablet padding lands depends on the background

While the two sides are stacked, the padding is applied to whichever element keeps the design intact:

• No background image or colour — the padding sits on the section, so it keeps its breathing room from whatever is above and below.
• Background image or colour set — the padding moves onto the text side and the media runs edge to edge. Otherwise the background would show as a visible band above and below the media, which is not what the design calls for.

Either way the numbers you set are the numbers you get above and below the text. Desktop is unaffected — the two sides share one row there, so the padding always sits on the section.

How the background image is sized

This follows the media setting, and it is not obvious:

• Media contained (default) — the image spans the full width of the section and passes behind the media, which paints on top of it.
• Media breaks out of container — the media takes half the screen, so the image fills exactly the other half and the two meet at the middle.

Either way the image covers the section’s full height, including its padding.

The scroll reveal

The image starts blurred and transparent and resolves to sharp as the section comes into view. It waits for two things, in whichever order they happen: the section scrolling into view, and the image finishing loading. It runs once and never replays.

Visitors with reduced motion enabled get the image immediately — no blur, no fade. Nothing is lost, since the reveal is decoration.

The image is lazy-loaded

It’s decorative and never the first thing on screen, so it isn’t fetched until it’s needed. That’s deliberate — don’t use this setting for anything that has to be visible immediately.

Gotchas

Only one background image setting, and no mobile variant

Unlike Hero, this section has a single background image used at every breakpoint. On mobile it spans the full width behind the stacked content. If you need a different crop on mobile, that doesn’t exist yet.

The section wrapper is a div

The schema sets "tag": "div" on purpose. Shopify wraps every section in its own element, defaulting to <section> — which, combined with the <section> this file renders, produced a section nested inside a section: a duplicated landmark for screen readers, and an extra box that the full-bleed and overflow maths measured against incorrectly.

Most other sections in this theme still have that problem. See the pre-launch checklist.