> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/volume-themes/sections/media/media-with-text.md).
# 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.
{% hint style="info" %}
**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 |
| {% endhint %} | |
***
### How to add
{% stepper %}
{% step %}
### Add the section
Click **Add section** and pick **Media with text** from the **Media** group.
{% endstep %}
{% step %}
### 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.
{% endstep %}
{% step %}
### 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.
{% endstep %}
{% step %}
### 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.
{% endstep %}
{% step %}
### 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.
{% endstep %}
{% endstepper %}
{% hint style="warning" %}
**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.
{% endhint %}
{% hint style="success" icon="lightbulb" %}
### 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](/docs/volume-themes/sections/media/video.md) 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.
{% endhint %}
### 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](/docs/volume-themes/sections/media/video.md) — when the video is the whole point and needs sound
* [Image with Hotspots](/docs/volume-themes/sections/media/image-with-hotspots.md) — when the explaining happens on the image itself
* [Multicolumn](/docs/volume-themes/sections/media/multicolumn.md) — when the same idea splits into equal parts
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://staylime.com/docs/volume-themes/sections/media/media-with-text.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
