Skip to main content

Media Banner

Help Center
Updated

Overview

The Media Banner block displays a large banner with either an image or a video, and supports an overlay content area for text and call-to-action elements.

It’s ideal for:

  • Hero banners

  • Promotions and campaigns

  • Landing pages and featured content

Where to use this block

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

  • Homepage hero or promotional sections

  • Landing pages and content pages

  • Collection or product templates (when the section supports blocks)

How to add this block

  1. Open the Theme Editor

  2. Navigate to a section that supports blocks

  3. Click Add block

  4. Select Media banner

  5. Choose Image or Video in Media type

How overlay content works

Media Banner includes a built-in overlay content area that allows you to place text and CTAs on top of the image or video.

This overlay content is managed through an internal container inside the Media Banner block and is not shared with other blocks.

Content Box (inside Media Banner)

What is the Content Box?

The Content Box is a private container used only inside the Media Banner block.

  • It sits above the media layer (image or video)

  • It holds all overlay content such as text and buttons

  • It cannot be added or reused outside the Media Banner

All overlay content must be placed inside this Content Box.

Where to find the Content Box

  1. Open the Theme Editor

  2. Select a Media Banner block

  3. Inside the Media Banner, locate Content box

  4. Add blocks inside the Content box

If overlay content is added outside the Content Box, it will not appear on the banner.

Supported blocks inside Content Box

Inside the Media Banner’s Content Box, you can add:

  • Text (Heading / Paragraph)

  • Rich text

  • Button

  • Group / Basic group

  • Other supported theme or app blocks

Blocks can be reordered, duplicated, or removed freely.

Using Groups inside Content Box

Groups help control layout and alignment of overlay content.

Example structure

Media Banner
└── Content Box
    └── Basic Group (column)
        ├── Heading
        ├── Rich text
        └── Button

What Groups are useful for

  • Stacking content vertically (column)

  • Arranging items horizontally (row)

  • Controlling spacing using the Gap setting

  • Aligning content (left, center, right)

Common layout patterns

Centered hero banner

  • Group direction: Column

  • Alignment: Center

  • Ideal for landing pages and promotions

Left-aligned content

  • Group direction: Column

  • Alignment: Left

  • Suitable for editorial or storytelling banners

Multiple buttons

  • Group direction: Row

  • Place multiple Button blocks side by side

Block settings

Media

Media type

  • Image

  • Video

If Media type = Image

  • Image
    Select the main image.

  • Mobile image (optional)
    Use a separate image optimized for mobile devices.

  • Link (optional)
    Makes the entire image banner clickable.

If Media type = Video

  • Video
    Select a hosted Shopify video.

  • Aspect ratio

    • Auto (adapt to video)

    • Square (1:1)

    • Portrait (4:5)

    • Landscape (16:9)

Effects

Enable parallax scrolling effect
Adds a subtle parallax movement when scrolling.

Size

Aspect ratio

  • For videos: controls the visible banner ratio

  • For images: sizing is based on width settings and image rendering rules

Image width (Image media type)

  • Width (Desktop / Tablet / Mobile):
    Fit content / Fill / Custom

  • Custom width: percentage (0–100%)

Video width (Video media type)

  • Width (Desktop / Tablet / Mobile): percentage (0–100%)

Borders

  • Border style: None / Solid / Dashed

  • Thickness (when enabled)

  • Border opacity (when enabled)

  • Border radius

Padding

Controls spacing inside the Media Banner block:

  • Top

  • Bottom

  • Left

  • Right

Tips for best results

  • Keep overlay text short and readable

  • Always preview on mobile

  • Use Groups instead of empty blocks for spacing

  • Ensure enough contrast between text and background media

  • Use parallax sparingly (best for large hero banners)

Common mistakes

Adding blocks outside the Media Banner’s Content Box
→ Overlay content will not appear on the banner

Overloading a single Content Box
→ Can make the banner feel cluttered and hard to read

Limitations

  • If no image or video is selected, the banner may not display on live pages (depending on page type)

  • Full-banner link is available for Image banners only

  • Overusing video banners may impact page load performance

Common use cases

  • Homepage hero banner with heading + CTA

  • Seasonal or campaign promotion banner

  • Brand storytelling banner with background video

  • Collection landing banner with promotional copy

Need help?

If the banner isn’t showing:

  • Confirm an image or video is selected for the chosen Media type

  • Make sure overlay blocks are added inside the Content Box

  • Preview on both desktop and mobile before saving

Related articles

Comments

0 comments

Please sign in to leave a comment.

Powered by Zendesk