Split media banners
Place one or two linked image or video promotions side by side.
Split media banners presents one or two independent promotions in the same section. Each Banner can use an image or video, its own copy and destination, and its own content position.
Add Split media banners
- Open Online Store > Themes > Customize.
- Use the page selector to open the template where the promotions should appear.
- Select Add section, then choose Split media banners.
- Add one Banner for a single promotion or two Banner blocks for a split presentation.
The section supports up to 2 Banner blocks. Its preset starts with two Banner blocks.
Banners
The Banners group contains the instruction to use two banners for side-by-side promotional content. It does not add a separate setting.
Layout
| Setting | Options and use |
|---|---|
| Show gap between banners | Adds separation between two Banner blocks. Default: On. |
| Full width | Extends the section to the available page width. Default: Off. The Fullscreen desktop ratio is always full width. |
| Desktop banner ratio | Fullscreen, Natural, 16:9, 2:1 (square split), 21:9, 3:1, or 32:9. Default: Natural. |
| Mobile banner ratio | Fullscreen, Square, 4:3 portrait, or 4:3 landscape. Default: 4:3 portrait. |
Natural follows the first banner’s available media ratio. A fixed ratio keeps the two banners aligned, but can crop subjects; check both blocks together.
Advanced
Allow transparent header
Default: On. When this section is first on the page, it can sit beneath a transparent Header. The Header’s own transparent mode must also permit that state. This setting does not make a later section transparent.
Spacing
| Setting | Options and use |
|---|---|
| Section spacing | None, Small, Medium, or Large. Default: None. |
| Top spacing | Adds the section’s top spacing. Default: On. |
| Bottom spacing | Adds the section’s bottom spacing. Default: On. |
Blocks
Add up to 2 Banner blocks and reorder them in the Theme Editor.
Media
| Setting | Options and use |
|---|---|
| Media type | Image or Video. Default: Image. |
| Image / video fallback | Image shown for an Image banner and the fallback image for a Video banner. |
| Mobile image | Optional narrow-layout image or video fallback. When blank, the main Image / video fallback is reused. |
| Desktop background video | Hosted video for a Video banner. |
| Mobile background video | Optional narrow-layout video. When blank, the desktop video is reused. |
Choose Video only when a hosted background video and a useful still fallback are ready. A mobile-specific video or fallback image is useful when the desktop crop does not preserve the subject.
Content
| Setting | What it controls |
|---|---|
| Eyebrow | Optional short label. |
| Heading | Main banner heading. Default: Featured collection. |
| Body text | Supporting copy. The schema recommends one short sentence. Default: Use this banner for a collection, campaign, or key message. |
| Link label | Visible action label. Default: Explore collection. |
| Link | Destination used by the action or whole banner, depending on Link area. |
| Link area | Link label only keeps the destination on the visible action; Entire banner makes the whole banner the link. Default: Link label only. |
| Button style | Text link, Primary, or Secondary. Default: Text link. Visible when Link area is Link label only. |
The label action appears only when both Link label and Link are present. When Link area is Entire banner, the banner-wide link appears only when Link is present; the button-style control is not relevant.
Style
| Setting | Options and use |
|---|---|
| Enable overlay | Adds a color layer over the media. Default: On. |
| Overlay opacity | 0–80% in 5% steps. Default: 20%. |
| Overlay color | Color used by the overlay. The default follows the global brand color. |
| Text color | Color used by the banner copy. The default follows the global background color. |
Layout
| Setting | Options and use |
|---|---|
| Content horizontal position | Left, Center, or Right. Default: Left. |
| Content vertical position | Top, Middle, or Bottom. Default: Bottom. |
| Content width | Small, Medium, or Large. Default: Medium. |
One banner or two
With one block, the section behaves as a single promotion. With two, the larger layout places the banners side by side and Show gap between banners controls their separation. At narrower sizes the blocks use a stacked presentation; confirm the final order, crop, and copy length in the accepted browser fixture.
Desktop and mobile behavior
Desktop and mobile ratios and media sources are independent. Check both banners at both sizes, especially when using Natural or a mobile-specific source. Do not assume two desktop-wide crops will remain legible when the banners stack.
Media recommendations
Keep key copy in the content fields rather than inside the media. Add useful alt text to images in Shopify Files and a meaningful fallback for every Video banner. Exact image dimensions are not prescribed here; validate the approved fixture in the chosen ratios.
Accessibility and motion
- Use descriptive Link label and Heading values so a linked banner has a clear purpose.
- If Link area is Entire banner, check that the destination is obvious without a separate button.
- Keep Overlay opacity and Text color readable across both images or videos.
- Test the static fallback, keyboard focus, and reduced-motion result for Video banners.
- Verify transparent Header contrast when this is the first page section.
Common issues
- The second promotion is missing: add the second Banner block; the section supports a maximum of two.
- The action is not clickable: confirm both Link label and Link when using Link label only, or confirm Link when using Entire banner.
- Button style is unavailable: it is shown only when Link area is Link label only.
- A banner is hard to read: adjust Enable overlay, Overlay opacity, Overlay color, and Text color together.
- Video shows no useful still: populate Image / video fallback and verify both media sources.
Related guides
- Media slideshow for one large hero with multiple slides.
- Image with text for one image and one focused message.
- Video for a focused video section.