Image Banner, Video Banner & Slideshow
Set up Volume's hero sections — Image Banner, Video Banner, and Slideshow: full-width or overlapping layouts, autoplay video, rotating slides, and content positioning.
Make a strong first impression at the top of any page. Volume's hero sections turn the space above the fold into a full-bleed statement — a still image, an autoplaying video, or a rotating slideshow — with heading, text, and buttons laid over the media.
Pick the one that fits your goal:
Image Banner — a full-width image (one, or two side by side) with overlaid content.
Video Banner — a looping background video for motion and atmosphere.
Slideshow — several image or video slides that rotate automatically, each with its own content and up to three buttons.
All three share the same layout controls — section width, color scheme, overlay, content position, and top/bottom spacing — set individually in each section's settings. All three can also overlap the header: turn on Overlap in the section's Colors settings to sit the banner under a transparent header.
Blocks — Image Banner & Video Banner
The background image or video is a section setting, not a block. Inside the banner you add content blocks from the Add block list — confirmed available on both sections: Subheading, Heading, Text, Button, Icon (with text), Line. (The exact list can vary slightly per section — check Add block inside the section you're editing.)
Image Banner
A full-width background banner with overlaid heading, text, and button — one or two background images side by side.
How to add
In the Theme Editor, click Add section → Image banner, then upload a First image (optionally a Second image) and Save.
Good to know
Content under image (mobile) also turns off the mobile scroll/parallax effect. If you've set a custom scroll animation but it doesn't seem to run on mobile, check whether this is on — the two are linked by design, since a parallax effect doesn't make sense once the image is no longer sitting behind the text.
Show content only on hover has no mobile equivalent — there's no hover on touch, so on mobile the content behaves as if this setting is off. Don't rely on it to hide content from mobile shoppers.
Sticky content is off by default here — unlike Video Banner, where it's on by default. Turn it on explicitly if you want the pinned-while-scrolling effect.
Customization ideas
Two images + Show only first image (mobile) — desktop gets a split-in-half banner, mobile automatically simplifies to one clean full-width image. No second section needed.
Set Link (making the whole banner clickable) and skip the button block for a clean, minimal hero — the whole image invites the click instead of one small button doing the work.
Content under image (mobile) turns this into a stacked "image, then text" layout on phones — useful when you'd rather not fight for overlay legibility on small screens.
Settings
First / Second image
One image fills the banner; add a second to split it into two side-by-side visuals
Height
Adapt to first image keeps the image's ratio; Pixels / Percents set a fixed height (desktop and mobile are set separately)
Link (+ open in new tab)
Makes the whole banner clickable
Show content only on hover
Reveals the text only on hover — desktop only, see Good to know
Content under image (mobile)
Stacks text below the image instead of over it, and disables the mobile parallax effect
Show only first image (mobile)
On mobile, shows just the first background image when two are set
Sticky content
Keeps the content pinned in place while the banner scrolls past — off by default
Video Banner
A full-width section with a looping background video and overlaid content — useful for runway clips or brand films.
How to add
In the Theme Editor, click Add section → Video banner, add your file under Video, and Save.
Good to know
Sticky content is ON by default for this section — the opposite of Image Banner. It's what gives video banners their signature pinned-while-scrolling feel; turn it off if you just want the section to scroll away normally.
Mute/pause controls only appear if Enable mute or Enable pause is checked. Leave both off for a fully chromeless, ambient background video.
Since the video is always muted regardless of the mute control's state, Enable mute really just adds a visible "tap to unmute" affordance — the video plays silently either way until a shopper interacts with it.
Customization ideas
Turn on Enable mute without Enable pause for ambient brand films — shoppers can opt into sound, but the motion never stops.
Pair Content under video (mobile) with a separate, shorter mobile-cropped video file for the cleanest small-screen experience.
Settings
Video
The background video — plays muted and on loop automatically
Height
Adapt to video keeps its ratio; Pixels / Percents set a fixed height (desktop and mobile are set separately)
Show content only on hover
Reveals the text only on hover
Enable mute / pause controls
Adds a small control letting shoppers mute or pause the video
Controls position
Aligns the mute/pause controls (left, center, or right)
Content under video (mobile)
Stacks text below the video instead of over it, on mobile only
Sticky content
Keeps the content pinned in place while the banner scrolls past — on by default for this section
Slideshow
A rotating hero slideshow with image and video slides, each with its own overlaid content, autoplay, and choice of transition effect.
How to add
In the Theme Editor, click Add section → Slideshow, then Add block → Image or Loop video for each slide, and Save.
Good to know
Autoplay speed only matters if Enable autoplay is on. Setting a speed without turning on autoplay is a common "why isn't it rotating" moment — the two settings are independent toggles.
Autoplay speed and Transition duration control different things. Autoplay speed (3–10s) is how long a slide sits still before advancing; Transition duration (100–2000ms) is how long the animation between slides takes.
Arrow style and size only show once Show arrows is on — they're hidden from the settings panel otherwise, not just visually disabled.
Each Image slide block can swap its image for an Icon under Show image (Image / Icon / Disable) — the same trick used on Split Banner — useful for slipping a value-prop or trust-badge slide into an otherwise photo-only slideshow.
Up to 8 slides per section.
Customization ideas
Mix in one or two icon-based slides (free shipping, easy returns, secure checkout) between photo slides for variety without leaving the slideshow.
Try Effect: Cards or Coverflow for a more editorial, less "standard carousel" feel — works best with fewer, high-quality slides rather than a long autoplay loop.
Give each slide its own set of up to 3 buttons to test different CTAs or send shoppers to different collections per slide, instead of adding more sections.
Settings
Height
Adapt to first image keeps the first slide's ratio; Pixels / Percents set a fixed height (desktop and mobile are set separately)
Enable autoplay
Rotates slides automatically (off by default)
Autoplay speed
Seconds each slide stays before advancing (3–10s) — only applies when autoplay is on
Effect
Transition style: Slide, Fade (default), Flip, Coverflow, Cards, or Creative
Transition duration
How long the transition itself takes (100–2000ms)
Show arrows
Toggles the prev/next navigation arrows
Arrows style / size
Solid, invert, or outlined; small, regular, or large — visible only when Show arrows is on
Bullets size
Large or small pagination dots
Slide blocks
Each slide is an Image or Loop video block, with its own content configured inside that slide:
Image
Image or Icon (Show image), context image (small supplementary image, image mode only), overlay, content position, Subheading, Heading, Text, and up to three independent buttons
Loop video
Same content settings, with a video file (muted, autoplay) in place of the image
Best practices
Set a separate mobile height (or a mobile-specific image) — a wide desktop image or tall video can crop awkwardly on mobile.
Keep a readable overlay when text sits over a busy image or video.
For a full-bleed hero under a transparent header, turn on Overlap in the section's Colors settings.
Keep videos short and compressed to protect page speed.
Was this helpful?