Media with text – Boostheme Help Center

Overview

The Media with text block displays a piece of media (image or video) alongside a text content area.
It’s designed for storytelling layouts where visuals and written content work together.

This block is ideal for:

Brand storytelling
Highlighting product features
Campaign sections with supporting copy
Editorial-style landing layouts

Where to use this block

You can use Media with text in sections that support blocks, such as:

Homepage content areas
Landing pages and content pages
Collection or product templates (when supported by the section)

How to add this block

Open the Theme Editor
Navigate to a section that supports blocks
Click Add block
Select Media with text
Configure layout, then add media and text inside the block

How content works (Block structure)

Media with text uses a fixed internal structure:

Media with text
├── Media (private block)
└── Content box with text (private block)
    └── Content blocks (Text, Rich text, Button, Group, etc.)

⚠️ Important

Media and Content box with text are private blocks
You don’t add them from the block picker
You configure them inside the Media with text block only

Media (inside Media with text)

The Media area displays the visual content that appears next to the text.

What you can add

Inside the Media area, you can add:

Image
Video (hosted on Shopify)
Other supported media blocks (if enabled by the theme)

How to add media

Select a Media with text block
Locate the Media area inside the block
Click Add block
Choose Image or Video
Upload or select your media

⚠️ Required
If no media is added, the block may not display on live pages.

Media behavior on devices

Desktop / Tablet
Media is displayed next to the text, based on the selected layout (Image first / Text first)
Mobile
Media is always displayed above the text for better readability

Content box with text (inside Media with text)

The Content box with text is the text area displayed next to the media.

Supported blocks

Inside this area, you can add:

Text (Heading / Paragraph)
Rich text
Button
Group / Basic group
Other supported theme or app blocks

Example structure

Media with text
└── Content box with text
    └── Basic group (column)
        ├── Heading
        ├── Rich text
        └── Button

Tips

Keep headings short and clear
Use Groups to control spacing and alignment
Always preview on mobile (media appears above text)

Block settings

Layout

Image first: Media appears on the left (desktop)
Text first: Text appears on the left (desktop)

On mobile, media is always shown above text.

Size

Width (Desktop / Tablet / Mobile)
Sets the overall width of the block (0–100%).

Gap

Gap (Desktop): Spacing between media and text (also applies to tablets)
Gap (Mobile): Spacing between media and text on mobile

Borders

Border style: None / Solid / Dashed
Thickness (when enabled)
Border opacity (when enabled)
Border radius

Appearance

Custom background
Background color
Gradient background (optional)

Padding

Controls spacing inside the block:

Top
Bottom
Left
Right

Common mistakes

Block doesn’t show on live pages
→ No image or video added inside the Media area

Text or button not showing
→ Content blocks were not added inside the Content box with text

Layout looks cramped
→ Increase Gap
→ Reduce content length
→ Use Groups to organize content

Limitations

If no media is selected, the block may not display on live pages
Media and Content box with text are internal and cannot be reused outside this block

Common use cases

Feature highlight: Image on the left + benefits on the right
Storytelling section: Video + brand mission copy
Campaign section: Visual + short promo text + CTA button

Need help?

If the block isn’t displaying or the layout looks incorrect:

Confirm media is added inside the Media area
Make sure text and CTA blocks are inside the Content box with text
Preview on desktop and mobile before saving