> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/volume-themes/sections/banners/image-banner-video-banner-and-slideshow.md). # 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 | Setting | What it does | | ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------- | | 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**. {% hint style="success" icon="sparkles" %} The background video always plays **muted and on loop** — a browser autoplay policy, not a theme limitation. Keep the file short and compressed so it doesn't slow the page down. {% endhint %} #### 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 | Setting | What it does | | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------ | | 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. {% hint style="success" icon="lightbulb" %} **Note:** a separate mobile video isn't supported natively in the Loop video slide. If you need a different video on mobile, that takes a small custom-development change — [contact support](https://staylime.zendesk.com/hc/en-us/requests/new). {% endhint %} #### Settings | Setting | What it does | | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | | 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: | Block | Key settings | | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 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. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://staylime.com/docs/volume-themes/sections/banners/image-banner-video-banner-and-slideshow.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.