Media with text
Media with text puts one photo or video next to a heading, a paragraph, and a button. Four layouts range from a classic side-by-side to a full-width image with a small text box floating on it.
What it does
Section titled “What it does”Use it anywhere you need one media item explained: introduce a collection, feature a product benefit, or tell part of your story. It accepts both photos and videos — a Shopify-hosted video plays right in place.
Add it to a page
Section titled “Add it to a page”- In Shopify admin, go to Online Store → Themes and click Edit theme. (Older admin versions label this button Customize.)
- Open the template where you want the section.
- Click Add section and choose Media with text.
- Upload media, write your text, set the button.
- Save.
Choose a style
Section titled “Choose a style”The Layout setting switches between four looks:
| Style | Look | How Image position behaves |
|---|---|---|
| Split (default) | Media on one side, text on the other | Side of the media (Left / Right) |
| Boxed overlay | Media full-width with a small text box floating on it | Corner of the text box (Left / Right) |
| Stacked | Media on top, text centered below | Hidden — the section centers everything |
| Large with text box | A tall, full-bleed image with the text box centered on it | Position of the text box (Left / Center / Right) |
Text alignment (left, center, right) works in every layout.
Set it up: quick start
Section titled “Set it up: quick start”- Add the section and keep the Split layout.
- Upload an Image — or set a video (see below).
- Write the Heading and Text, and set the button’s label and link.
- Save and check the phone preview: media above text in every layout.
Settings
Section titled “Settings”Section settings
Section titled “Section settings”| Setting | Default | Options | What it does |
|---|---|---|---|
| Layout | Split | Split / Boxed overlay / Stacked / Large with text box | Switches the overall look |
| Image position | Left | Left / Center / Right | Side of the media (Split) or position of the text box (Boxed overlay, Large with text box) |
| Text alignment | Left | Left / Center / Right | Alignment of the text block |
| Image | Empty | Image picker | Landscape, at least 1600 px wide (Boxed overlay and Large: 2000 px). Used as the video cover when a video is set |
| Video (uploaded to Shopify) | Empty | Video picker | Shopify-hosted video; takes priority over the image and the URL below |
| Or video URL | Empty | URL | YouTube or Vimeo link — used when no Shopify-hosted video is set |
| Subheading | Empty | Text | Small line above the heading |
| Heading | “Share your brand story” | Text | Section title; leave empty for no title |
| Text | (demo paragraph) | Text | Body text |
| First button label | Empty | Text | Shows a button; leave empty for no button |
| Link | Empty | URL | Where the button leads |
Images and content tips
Section titled “Images and content tips”- Split / Stacked: landscape photos at least 1600 px wide.
- Boxed overlay / Large with text box: go bigger — at least 2000 px wide — since the media fills the whole section width.
- Video: upload to Shopify for in-place playback with your Image as the cover, or paste a YouTube/Vimeo link. The uploaded video wins when both are set.
- For Boxed overlay and Large with text box, keep the photo’s busy areas away from the text box corner.
Good to know
Section titled “Good to know”- One media channel wins: Shopify-hosted video, then the video URL, then the image.
- On phones, media always sits above the text, whichever layout you chose.
- The text box is part of the theme’s card language — it inherits the store’s colors and corners, no separate styling needed.
Example setups
Section titled “Example setups”Collection intro. Split, Image position Right, lifestyle photo, heading “Built for tough chewers”, one button to the collection.
Full-bleed campaign. Large with text box, 2000 px campaign photo, text box centered, white heading, “Shop the drop” button.
Common questions
Section titled “Common questions”My video doesn’t autoplay. Playback starts when the shopper taps play; muted autoplay depends on the browser and the media type. The cover image shows until then.
The floating text box covers my photo’s subject. Change Image position (it moves the box’s corner in Boxed overlay and Large layouts), or re-crop the photo with the subject on the opposite side.
The image looks soft on big screens. The photo is under the recommended width — use at least 1600 px (2000 px for the full-width layouts).