Images with text section

Applies to: Split 5.1.0 and later. Added in: Split 1.0.0. Last checked: 2026-10-13 against Split 5.1.0.

The Images with text section shows up to 4 images side by side across the page, each with a tagline, a title and a button over it. Use it to promote collections, campaigns or pages.

Where to find it: select Add section in the theme editor, then choose Images with text.

Adding imagesCopy Anchor Link

Each image is an Image with text block. You can add up to 4; the section starts with two.

• Tagline shows a small line above the title.
• Title shows the main text. It gets smaller as you add blocks, so four titles still fit side by side.
• Button label adds an outline button with an arrow under the title.
• Link sets where the block leads (see the next part).
• Background image fills the block. Split crops it to the box and keeps the image's focal point in view, if you set one in Shopify.
• Text and Image overlay under Custom colors set this block's text color and a color layer over its image. The overlay is shown at 40 percent opacity, which helps light text stand out on a busy photo. Leave both transparent to use the theme colors.
• Heading tag sets the HTML level of the title for search engines (H2 by default).

Link and buttonCopy Anchor Link

Where the Link goes depends on what else the block has:

• Button label filled in: only the button is a link.
• No button label, but a Title: the text area is the link, and the title underlines when the mouse is over it.
• No button label and no title: the whole block, image included, is one link.

On desktop the image zooms in slightly when the mouse is over a linked title or block.

Image height and text alignmentCopy Anchor Link

These two settings apply to every block of the section.

• Image height: Half makes the blocks half the screen height, Full height the full screen height, below the header.
• Text alignment places the text in one of nine positions, from Left top to Right bottom. Center middle is the default.

The blocks share the width equally: 1 block takes the full width, 2 take half each, 3 a third, 4 a quarter. On phones 480 px wide and narrower every block takes the full width; with 4 blocks, phones and tablets held upright show them two by two.

For image sizes that crop least with 1 or 2 blocks, see Image size recommendations.

How do I get a different layout?Copy Anchor Link

Add several Images with text sections one after the other. The design changes with the number of blocks, so a section with 1 block followed by a section with 3 blocks gives one wide banner and a row of three. Each section has its own Image height.

Why is the whole image a link instead of my button?Copy Anchor Link

Because Button label is empty. Without a label, Split makes the title, or the whole block when there is no title, the link. Type a label to show a button and keep the rest of the block unlinked.

All Images with text settingsCopy Anchor Link

Every setting in this group, with its type and default.

Related pagesCopy Anchor Link

• Gallery section: images side by side with a caption, in rows of up to 4.
• Rich text section: one image half with a title and text blocks on the other half.
• Image size recommendations: image sizes for 1 to 4 blocks.
• How Split is built: the screen-height boxes Split builds pages from.