Image Banner, Video Banner & Slideshow with Media

Set up Avante's hero sections — Image Banner, Video Banner, and Slideshow with Media: full-width or overlapping layouts, separate mobile images, overlays, and content positioning.

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 for an edge-to-edge look.

For settings shared across most sections (width, color scheme, spacing, overlay, content position, paddings), see Common section settings. For image/video dimensions, see Image & video size recommendations.

---

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:

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. Settings unique to Image Banner:

Setting	What it does
First / Second background image	One image fills the banner; add a second to split it into two side-by-side visuals
Height mode	Adapt to first image keeps the image's ratio; Percents / Pixels set a fixed height
Height	Banner height for the chosen Height mode
Link (+ open in new tab)	Makes the whole banner clickable
Show content only on hover	Reveals the text only on hover
Mobile → Height	Separate banner height on mobile
Mobile → Show only first image	On mobile, show just the first background image
Mobile → Show content under image	Stack 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

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.

Section settings

Shared settings (width, overlay, color scheme, content position, paddings) — see 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. 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

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 change — contact support.

---

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).
• Keep videos short and compressed.

Related

• Common section settings
• Image & video size recommendations
• Transparent header