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, text above media, regardless of which side the media is set to on desktop.

Settings

Layout

Setting	What it does
Media position	Which side the media sits on. Desktop only.
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.
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.

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.