Media with Text

One image or video on one side, a full content area on the other — the most flexible storytelling section in Volume, with 14 block types.

This is the section that does the explaining. One image or video on one side, and on the other a content area that takes fourteen different kinds of block — headings, copy, buttons, a countdown, a promo code, images that stack as you hover over the text. It's how you tell a story about a product, introduce a founder, or run a campaign that needs a picture, a deadline and a code in the same breath.

At a glance

Where to find it	Add section → Media
Media side	An image, or a Shopify-hosted video
Content side	14 block types, including Countdown timer and Promo code
Allowed on	Any template
Typical use	Product story, founder note, campaign with an offer

---

How to add

1

Add the section

Click Add section and pick Media with text from the Media group.

2

Fill the media side

Upload an Image, or a video file hosted by Shopify. A YouTube or Vimeo link does not belong here — see the warning below.

3

Build the content side

Add blocks in the order you want them read: a Heading, a Text block, a Button. Everything else is optional dressing on top of that spine.

4

Style the heading inline

Inside a heading, {curly braces} switch the enclosed words to the secondary heading style and [square brackets] highlight them. One sentence, two voices, no custom CSS.

5

Handle mobile

Upload a separate mobile image if the desktop crop won't survive a narrow screen — and read the note below on how the swap actually triggers.

The media side takes Shopify-hosted video only. There is no field for a YouTube or Vimeo link on the main media. If that's what you have, either upload the file to Shopify, or keep an image here and add a Video button block to the content side — that block does accept external links and opens the video in a popup.

Good to know

• The mobile swap is driven by the field, not the checkbox. Fill in the mobile image field and the mobile image is used — whether or not the related checkbox looks switched on. If you want the video back on mobile, clear the field.
• The main video is always muted. It's a moving image, not a film. For sound, use the Video section or a Video button block.
• Stacking images on hover and Inline image reveal need matching text. Both blocks have a Hover text field, and the text must match a word or phrase in a Heading block exactly — spelling, case and spacing. A mismatch doesn't error; the effect simply never fires. This is the single most common reason these two blocks "don't work".
• The content side can carry an entire offer. Countdown timer and Promo code are blocks here too, so a campaign section doesn't need a separate banner underneath it.
• Order is layout. Blocks render in the order they're listed. There's no separate arrangement control — if the button should sit above the copy, move the block.

Customization ideas

Product story with a reveal

A heading naming three materials, each wrapped so it matches an Inline image reveal block. Hovering a material shows it. The page teaches something instead of just describing it.

Campaign block with a deadline

Lifestyle image on the left; heading, one line of copy, a Countdown timer and a Promo code on the right. The whole offer in one section, with no second banner needed.

Founder note

Portrait on one side; a short signed paragraph, a signature image and a quiet text link on the other. Resist the urge to add a button — this one isn't selling.

Video with the context beside it

A muted Shopify-hosted clip on the media side, and a Video button block on the content side that opens the full version with sound in a popup. The page stays calm; the full film is one click away.

Alternating ladder

Three of these sections in a row, flipping the media side left-right-left. A classic "three reasons" layout that doesn't need any other section type.

---

Settings reference

Section settings

Setting	What it does
Image	The picture on the media side.
Video	A Shopify-hosted video file for the media side. Always plays muted.
Mobile image instead of video	A separate image for small screens. Filling this field is what triggers the swap.
Media position / ratio	Which side the media sits on, and the shape it's cropped to.

Section layout, Color and Spacing — the standard Volume groups.

Block reference

The content side accepts 14 block types:

Block	What it's for
Heading	The main line. Supports {curly} secondary styling and [square] highlighting.
Subheading	A smaller line above or below the heading.
Text	Rich-text body copy.
Button	A call to action.
Image	An inline image inside the content side.
Context image	An image tied to the surrounding content.
Video button	Opens a video in a popup — the only place an external YouTube or Vimeo link works in this section.
Stacking images on hover	Images that stack up when the matching Hover text in a heading is hovered.
Inline image reveal	Shows an image inline when the matching Hover text is hovered.
Countdown timer	Counts down to a date and time.
Promo code	Displays a code the visitor can copy.
Icon	A small symbol.
Line	A divider.
Empty space	Manual vertical spacing.

Best practices

• One idea per section. If you're writing a second heading into the same content side, you want a second section.
• Put the media on the side the eye isn't coming from. In an alternating ladder, flip it every time — identical layouts in a row read as one block and get skipped as one block.
• Test the hover effects with the real copy. Hover text is matched literally; a trailing space or a capital letter is enough to break it.
• Keep the copy shorter than the image is tall. When the text column outgrows the media, the layout starts to look accidental.

Related

• Video — when the video is the whole point and needs sound
• Image with Hotspots — when the explaining happens on the image itself
• Multicolumn — when the same idea splits into equal parts