Home Sections Set up the Hero slideshow

Set up the Hero slideshow

Last updated on Jun 20, 2026

Set up the Hero slideshow

The Hero slideshow is a full-width banner that rotates through one or more slides at the top of a page. Each slide carries its own background image or video and its own stacked content (heading, subheading, eyebrow, button). You add it from the Banners group under Add section.

Hero slideshow with a heading and button

Add the section

  1. In the theme editor, open the page where you want the banner. The home page is the usual spot.
  2. Click Add section and open the Banners group.
  3. Choose Hero slideshow. It arrives with three example slides you can edit, reorder, add to, or remove.

Build a slide

Each slide is a Slide block inside the section. The slide holds two things: a background (the Background settings) and the content stacked on top of it. That content is itself made of blocks you add inside the slide, such as a heading, a rich text paragraph, an eyebrow, and a button.

  1. In the section, open a Slide block.
  2. Set its background under Background (see Slide settings below).
  3. Add or edit the content blocks inside the slide, then drag them to set their stacking order.
  4. To add another slide, use Add block in the section and pick Slide. To reorder slides, drag them in the block list.

A slideshow holds up to 20 slides. Keep one clear message per slide. Long headings fight the image and read poorly on phones.

Section settings

These controls sit in the section panel and apply to the whole slideshow.

Entry choreography

Controls how the sections below this one appear as the page scrolls in. Choose None, Rounded corners, or Rounded corners, then drift.

Color

  • Color scheme. Sets the colors for the slideshow frame and any content that is not overridden per slide.
  • Use dark header theme over this section. Switches the header to its dark style while it sits over this section, so the links stay readable on a dark image.
  • Overlay this section with the header. Lets the slideshow sit behind a transparent header. This only works when the slideshow is at the top of the page. While it is on, the margin controls for the top edge are hidden, because the section runs under the header instead of below it.

Size

  • Desktop height. The slideshow height on desktop, as a percent of the screen height (70 to 100).
  • Mobile height. The slideshow height on phones, as a percent of the screen height (65 to 100).

Navigation

  • Show thumbnails. Shows small slide previews a visitor can click to jump between slides. Thumbnails appear only when the slideshow has more than one slide.
  • Thumbnail side. Places the thumbnail rail on the Right or the Left. Available when Show thumbnails is on.

Autoplay

  • Auto-rotate slides. Advances the slides on their own.
  • Rotate every. How long each slide stays before the next one appears, in seconds (3 to 20). Available when Auto-rotate slides is on.
  • Pause on hover. Stops the rotation while a visitor hovers over the slideshow. Available when Auto-rotate slides is on.

Margin

Space outside the section.

  • Top. Space above the section, in pixels. Hidden when Overlay this section with the header is on.
  • Bottom. Space below the section, in pixels.
  • Use different margins on mobile. Reveals separate margin controls for phones.
  • Top (mobile) and Bottom (mobile). Per-phone spacing, shown once Use different margins on mobile is on.

Slide settings

These controls live on each Slide block, so every slide can differ.

Background

  • Media type. Choose Image or Video for the background.
  • Image. The desktop background image. Shown when Media type is Image.
  • Mobile image. A separate image for phones. Falls back to the desktop image when not set. Shown when Media type is Image.
  • Video. The background video, played muted and looping. Shown when Media type is Video.

Color

  • Color scheme. The color scheme for this slide. Set it per slide so the text reads against that slide's background.

Overlay

A tint laid over the media so light text stays readable.

  • Overlay. Choose None, Solid, or Gradient.
  • Color. The overlay color, with transparency. Shown when Overlay is Solid.
  • Overlay opacity. How strong the gradient tint is, as a percent. Shown when Overlay is Gradient.

Layout

  • Content alignment. Side aligns the content to the edge opposite the thumbnails. Center places it in the middle.
  • Gap. Vertical space between the stacked content blocks, in pixels.
  • Mobile gap. The same spacing on phones, in pixels.

Animation

  • Image animation. A slow motion on the background image. Choose None, Drift, or Zoom.

Tips

  • The first slide loads first and is the LCP image. Pick a sharp, well-composed image for it, and keep the heading short so the banner paints fast.
  • For the overlay header look, give the first slide a dark image or a stronger Overlay so the header links stay readable, and leave Use dark header theme over this section on.
  • On a slide with a video background, the overlay still applies. Raise Overlay opacity or switch to a Solid overlay if the text gets lost in busy footage.
  • Two or three focused slides usually convert better than many. Put your most important slide first, since many visitors never reach the second one.