Image filled text

Image filled text stretches a few giant words across the section and fills the letters with one shared photo — a bold, poster-like statement.

What it does

Use it as a visual exclamation — a brand word, a season, a campaign name — between other sections. Up to four lines of text share one photo; the letters mask the image, so pick a picture worth looking at.

Keep the words short — 3–8 characters per line works best. The text displays in uppercase and stretches to fill each line edge to edge.

Add it to a page

1. In Shopify admin, go to Online Store → Themes and click Edit theme. (Older admin versions label this button Customize.)
2. Open the template where you want the section.
3. Click Add section and choose Image filled text.
4. The section is added with three Text line blocks already in place (WALK, PLAY, REST) — edit or clear those lines (see Set it up: quick start).
5. Upload the Image and save.

Choose a style

There is no layout setting — the look comes from your words, the photo, and these choices:

Setting	Default	Options	What it does
Section width	Page width	Page width / Full width	Full width bleeds to both screen edges
Background	Theme background	Theme background / Cream / Lilac / Mint / Apricot	Soft pastel behind the letters
Scroll effect	Image drift	None / Image drift / Slow zoom	Moves the photo gently behind the letters as the page scrolls. Turns itself off when the shop’s animations are disabled or the visitor prefers reduced motion
Effect strength	10 %	5–20 %, step 5	How far the image drifts or zooms

Set it up: quick start

1. Add the section — it starts with three demo lines: “WALK”, “PLAY”, and “REST”. Before editing, prepare a photo without any text in it; all lines share that one image.
2. Work through the three Text line blocks: retype the word on each line you keep, clear the Text field on a line you don’t want (an empty line disappears — no gap is left), or delete the whole block with Remove block.
3. Need a fourth line? Click Add block → Text line (a new block starts with “LOVE” — type your own word over it).
4. Upload the Image — a photo without text in it, simple scenes work best; optionally a separate Mobile image.
5. Save, then check how the photo crops inside your letters and switch to the phone preview — a separate mobile crop often reads better.

Settings

Section settings

Setting	Default	Options	What it does
Image	Empty	Image picker	The photo all lines share. Use a photo without text, at least 2400×1800 px — simple scenes and broad subjects work best
Mobile image	Empty	Image picker	Optional photo for phones, at least 1200×1200 px recommended. Uses the main image when empty; set a focal point to control the crop
Display font	Archivo Black	Font picker	The typeface of the giant words. A heavy font with broad strokes shows more of the photo
Section width	Page width	Page width / Full width	Contained to the page column, or bleeding to the screen edges
Background	Theme background	Theme background / Cream / Lilac / Mint / Apricot	Color behind the letters
Scroll effect	Image drift	None / Image drift / Slow zoom	Subtle image movement while the page scrolls (see the table above)
Effect strength	10 %	5–20 %, step 5	Intensity of the scroll effect
Line spacing	0	0–40, step 4	Extra space between text lines (relative to the design canvas; scales with the section width)
Heading level	H2 — section title	H1 — page title / H2 — section title / H3 — subsection title	How search engines rank the block’s text. Leave at H2 unless this really is the page’s main title

Blocks

Add up to 4 Text line blocks — one per giant word.

Block	Limit	What it adds
Text line	4	One line of giant text

Text line settings

Setting	Default	Options	What it does
Text	“LOVE”	Text	Short words of 3–8 characters work best. Text displays in uppercase and stretches to fill each line. Leave empty to omit the line

Images and content tips

• Desktop image: at least 2400×1800 px, no text baked into the photo — simple scenes with one broad subject (a sleeping dog, a beach, a wall of toys) read best through the letters.
• Mobile image: at least 1200×1200 px; without it the main image is used, cropped by its focal point.
• Busy photos turn the words into noise — pick contrast between subject and background.

Good to know

• The effect respects motion settings. With the shop’s animations off, or for visitors who prefer reduced motion, the image sits still.
• Lines without text disappear — clear a Text line block to drop that row instead of showing an empty gap.
• The text is real text, not an image: search engines can read it, and its heading level is your choice.

Example setups

Brand moment. Two lines — “PAWS” / “UP” — Archivo Black, Full width, Cream background, Image drift at 10 %, one happy golden-retriever photo.

Seasonal splash. Four lines — “SUM” / “MER” / “SALE” / “2026” — Slow zoom at 15 %, Lilac background, one bright beach photo with a separate mobile crop.

Common questions

The photo inside the letters looks random. The photo is cropped to the section — set a focal point in the image editor so the interesting part sits inside the letters, or simplify the photo.

I need five words. Four lines is the maximum. Combine words (“BIG / SALE”) or use a second section.

The drift effect doesn’t move. It’s disabled when the shop’s animations are off or the visitor prefers reduced motion — that’s intentional.