> 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/avante-themes/sections/banners/image-banner-video-banner-and-slideshow-with-media.md). # Image Banner, Video Banner & Slideshow with Media Make a striking first impression the moment someone lands on your store. Avante's hero sections turn the top of any page into a full-bleed statement — a bold image, an autoplaying video, or a rotating slideshow — with your heading, message, and call-to-action laid right over the media. Everything is customizable, from height and overlay to separate desktop and mobile artwork, so the hero looks intentional on every screen. 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 with Media** — several image or video slides that rotate automatically, each with its own content. Image Banner and Video Banner set their media at section level; Slideshow with Media is a dedicated slideshow with slide blocks, autoplay, and pagination (covered lower down). All three can overlap a [transparent header](/docs/avante-themes/features-and-advanced-setup/transparent-header.md) for an edge-to-edge look. For settings shared across most sections (width, color scheme, spacing, overlay, content position, paddings), see [Common section settings](/docs/avante-themes/sections/overview.md#common-section-settings). For image/video dimensions, see [Image & video size recommendations](/docs/avante-themes/faq/performance/image-and-video-size-recommendations.md). *** ### Blocks — Image Banner & Video Banner The background image/video is a **section setting** (not a block). Inside the banner you add content blocks. All of these are shared **Common blocks** — see [Common blocks](/docs/avante-themes/sections/overview.md#common-blocks): Subheading, Heading (gradient), Text, Button, Image, Inline image reveal, Context image, Empty space, Line, Video button, Custom Liquid, Promo code, Countdown timer. *** ### Image Banner A full-width background banner with overlaid heading, text, and button — one or two background images side by side.
#### How to add 1. In the Theme Editor, click **Add section** 2. Select **Image Banner** 3. Upload a **First background image** (optionally a **Second background image**) 4. **Save**
#### Section settings Shared settings (width, overlay, color scheme, content position, paddings) — see [Common section settings](/docs/avante-themes/sections/overview.md#common-section-settings). Settings unique to Image Banner:
SettingWhat it does
First / Second background imageOne image fills the banner; add a second to split it into two side-by-side visuals
Height modeAdapt to first image keeps the image's ratio; Percents / Pixels set a fixed height
HeightBanner height for the chosen Height mode
Link (+ open in new tab)Makes the whole banner clickable
Show content only on hoverReveals the text only on hover
Mobile → HeightSeparate banner height on mobile
Mobile → Show only first imageOn mobile, show just the first background image
Mobile → Show content under imageStack text below the image instead of over it
*** ### Video Banner A full-width section with a looping background video and overlaid content — ideal for runway clips or brand films.
#### How to add 1. In the Theme Editor, click **Add section** 2. Select **Video Banner** 3. Add your video under **Loop video** 4. **Save**
{% hint style="success" icon="sparkles" %} #### Good to know * The Loop video is always **muted and autoplays** — a browser policy, not a theme limitation. For a video with sound and play controls, use the **Video** section instead. * Keep the file short and compressed to avoid slowing the page. {% endhint %} #### Section settings Shared settings (width, overlay, color scheme, content position, paddings) — see [Common section settings](/docs/avante-themes/sections/overview.md#common-section-settings). Settings unique to Video Banner: | Setting | What it does | | --------------------------------- | ---------------------------------------------------------------------------------------- | | Loop video | The background video — plays muted and on loop automatically | | Height mode | **Adapt to video** keeps the video's ratio; **Percents** / **Pixels** set a fixed height | | Height | Banner height for the chosen Height mode | | Show content only on hover | Reveals the text only on hover | | Mobile → Height | Separate banner height on mobile | | Mobile → Show content under video | Stack text below the video instead of over it | *** ### Slideshow with Media A large-format hero slideshow with image and video slides, full overlay content per slide, autoplay, and multiple pagination styles. This is a dedicated section (separate from Image/Video Banner above).
#### How to add 1. In the Theme Editor, click **Add section** 2. Select **Slideshow with Media** 3. Add slides via **Add block** → **Image** or **Loop video** 4. **Save**
#### Section settings Shared settings (width, color scheme, paddings, height) — see [Common section settings](/docs/avante-themes/sections/overview.md#common-section-settings). Unique to Slideshow with Media: | Setting | What it does | | ----------------------- | ---------------------------------------------------------------------------------------------------- | | Height mode | **Adapt to first image** keeps the first slide's ratio; **Percents** / **Pixels** set a fixed height | | Desktop / Mobile height | Slideshow height per device (for Percents/Pixels modes) | | Desktop controls | Navigation style: **Classic arrows**, or **Arrows with numbers** (left / center / right alignment) | | Fill controls | Filled style for the navigation controls | | Enable autoplay | Rotate slides automatically | | Autoplay speed | Seconds each slide stays before advancing | #### Slide blocks Each slide is added as an **Image** or **Loop video** block, and its heading/text/buttons are configured inside that slide. | Block | Key settings | | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Image | Image + **Focal point**, **Context image** (small supplementary image), overlay, content position, Subheading, Heading (gradient), Text, **Dim text**, and **two independent buttons** | | Loop video | Same content settings with a video file (muted, autoplay) and **video overlay opacity** | {% hint style="success" icon="lightbulb" %} **Note:** a separate mobile video isn't supported natively in this section. If you need a different video on mobile, it takes a small [custom-development](/docs/services/custom-development-services.md) change — [contact support](https://staylime.zendesk.com/hc/en-us/requests/new). {% endhint %} *** ### Best practices * Use a separate **Mobile image** on every slide/banner — a wide desktop image gets cropped on mobile. * Keep a readable **overlay** if text sits over a busy image. * For a full-bleed hero under a transparent header, set **Section width → Overlap by navigation** (see [Transparent header](/docs/avante-themes/features-and-advanced-setup/transparent-header.md)). * Keep videos short and compressed. ### Related * [Common section settings](/docs/avante-themes/sections/overview.md#common-section-settings) * [Image & video size recommendations](/docs/avante-themes/faq/performance/image-and-video-size-recommendations.md) * [Transparent header](/docs/avante-themes/features-and-advanced-setup/transparent-header.md) --- # 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 dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://staylime.com/docs/avante-themes/sections/banners/image-banner-video-banner-and-slideshow-with-media.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.