Media with content

Media with content puts an image or a video on one side and your own content on the other. The content side is built from theme blocks, so it can hold a heading, text and a button, or anything else the theme blocks offer, plus app blocks.

It can’t be placed in the header or footer groups. Three presets are available when you add it:

Image with text. An image with a heading, text and a button.
Split hero. A full-screen image with a heading and a button, and no padding, for opening a page.
Video with text. A video with a heading, text and a button.

Settings

Media. Image (default) or Video.
Image. Shown when Media is set to Image. The crop follows the focal point set on the image in the image picker. Without an image, a placeholder illustration shows.
Video. Shown when Media is set to Video. Nothing loads until a shopper presses play; the video’s preview image shows until then.
Media position. Left (default) or Right. On mobile the media always sits above the content.
Media width. Half (default) splits the row evenly; Wide gives the media three fifths of it.
Content alignment. Where the content sits against the media. Top, Center (default) or Bottom.
Height. Fit the media (default) sizes the section to the image or video; Full screen makes it fill the window.
Color scheme. Default: scheme-1.

Spacing

Top padding / Bottom padding. Range: 0 to 300 px in 5 px steps. Default: 60 px each.

Blocks

The content side accepts every theme block (heading, text, button, group, image, icon, video, countdown and the rest) and app blocks. They stack in the order you arrange them.

Tips

Alternate the media position down a page. Two or three of these sections stacked with the media left, then right, then left read as one designed page rather than a row of repeats.
Use Wide when the picture carries the message. Half suits a paragraph of real copy; Wide suits a strong photograph with a short line beside it.
Set a focal point on the image. On a tall row the image is cropped, and the focal point decides what survives the crop.
Pick a video with a telling preview image. The preview is what most shoppers see, since the video only plays when pressed.