Slideshow
Full-width hero carousel built from banner blocks — one slide per block.
Last updated About 7 hours ago
Add Slideshow from the section list and fill it with Banner blocks. Each block is one slide: background image or video, plus optional caption, heading, subheading, and button.
Build your slides
- Add the section and click Add block > Banner.
- Under Banner background, upload a Background image (and a Background image (mobile) if you want a different crop on phones). You can use Background video instead — Shopify-hosted, with separate desktop and mobile files.
- Under Banner foreground content, add your text and button. Pick Link style to make the whole slide clickable, or just the button.
- Repeat for each slide.
There's no separate Image or Video block type anymore — everything goes through Banner blocks.
Fill the viewport
Set Section height to Fixed and Height to 100% for a full-screen hero. When the slideshow is the first section on the page, the theme subtracts your header and announcement bar height so the slide fills the visible screen without hiding under the navigation.
On Default height, use Aspect ratio and Aspect ratio (mobile) to shape each slide from its media instead.
Control autoplay and navigation
Under Slideshow settings:
- Autoplay slideshow + Autoplay delay — auto-advance slides.
- Animation speed — transition timing.
- Loop slides — restart after the last slide.
- Show navigation — prev/next arrows.
- Show pagination + Pagination style (Dynamic dots or Fraction like
2 / 5).
See Slideshow control settings for what each option does.
Add a section header
Turn on Show header under Header settings for a caption, heading, and button that sit above the carousel — useful for a collection name or campaign title that stays put while slides change.
Other settings
Color scheme, Padding settings, Visibility settings, and Width settings. Banner colors pull from your color scheme's banner tokens — see Colors.