Split Banner
Volume's Split Banner section puts two independent banners side by side — ideal for shop-by-category pairs, gender splits, or before/after stories.
Two stories, equal weight. Split Banner puts two independent banners side by side, each with its own image, message, and call to action — the layout shoppers instinctively read as "pick a path." It's the natural fit for men's/women's, new-in vs. bestsellers, or a values statement paired with a shop-now CTA.
How to add
In the Theme Editor, click Add section → Split banner. It arrives with two Banner blocks already in place — configure each side independently.
Good to know
Exactly two banners, no more. Split Banner is capped at two blocks by design — if a third category needs a tile, that's what Banner Grid is for.
The whole banner is clickable via Link, independent of the button. A side doesn't need a visible button to be tappable — set Link on the banner block and turn Show button off for a cleaner, button-free look that still takes shoppers somewhere.
Show image isn't just Image vs. off — there's also an Icon option, which swaps the visual for a small icon plus color, or a context image. That's a quick way to turn one side into a value-prop tile (e.g. a large shipping icon + "Free worldwide shipping") instead of a second photo.
Customization ideas
Pair one photographic side with an icon-based side for a magazine-style contrast — product photo on the left, bold icon + short copy on the right.
Use Wide content width only with a short heading — it's built for punchy statements, not paragraphs.
Set independent overlay values per side so a light and a dark photo both keep readable text without matching each other's mood.
Settings reference
Overlap
Sits the banner under a transparent header
Show content only on hover
Reveals each side's text only on hover
Height (desktop / mobile)
Adapt, Pixels, or Percents, set per device
Content width
Narrow, Regular, or Wide
Background animation
Default, Disable, or Custom — Parallax, Zoom in, or Zoom out (no Sticky option here)
Each Banner block
Image (+ mobile image), Link
The side's background and click destination
Center text, vertical/horizontal position
Where and how the content sits
Overlay (desktop/mobile)
Independent overlay color/opacity per device
Show image
Disable, Image, or Icon — a plain visual, or an icon/context image
Heading, text
Independent show/hide + style per field
Show button, label, icon, style
Solid or Outlined, with an optional icon
Best practices
Keep both images the same aspect ratio so the split reads as one balanced section.
If one side needs a different call to action than the other, that's exactly what the two independent Banner blocks are for.
Was this helpful?