Slideshow
A powerful, multi-slide hero with image and product slides, advanced transitions, and full autoplay control. Create stunning first impressions that convert.
Overview
The Slideshow is one of the most impactful sections in your store. It supports multiple slide types, sophisticated transitions, thumbnails, and autoplay with progress indicators. Perfect for showcasing campaigns, products, or brand storytelling.
Multiple Slide Types
Transition Effects
Full Controls
Smart Autoplay
When to Use
- Homepage hero — Showcase multiple campaigns, products, or lifestyle images
- Seasonal campaigns — Rotate through promotional content automatically
- Product launches — Highlight new arrivals with dedicated slides
- Brand storytelling — Create a visual narrative with multiple slides
Quick Setup
Add a Slideshow in 3 Steps
- 1In the Theme Editor, click Add section → Slideshow
- 2Click Add block → Choose Image slide or Product slide
- 3Upload images and configure your transition style
Section Settings
Layout
| Setting | Type | Default | Description |
|---|---|---|---|
| Section width | select | Page width | Choose 'Page width' to respect your max-width setting, or 'Full bleed' for edge-to-edge display. |
| Image focal point | select | Center | Where to anchor the image when cropping. Options: Top, Center, Bottom. |
💡 Note: The slideshow automatically adapts its height to match the image aspect ratio. This ensures your images display at their optimal proportions across all devices.
Slideshow Behavior
| Setting | Type | Default | Description |
|---|---|---|---|
| Loop continuously | checkbox | true | When enabled, the slideshow returns to the first slide after the last one. |
| Auto-advance slides | checkbox | false | Automatically move to the next slide after the specified time. |
| Time per slide | range | 5000ms | How long each slide is visible before auto-advancing. Range: 1–9.5 seconds. |
Transitions
Brave's slideshow includes 5 unique transition styles to match your brand aesthetic:
| Setting | Type | Default | Description |
|---|---|---|---|
| Slide transition | select | Slide | The animation style when changing slides. Options: Fade, Slide, Flip (3D), Creative, Parallax. |
| Transition duration | range | 500ms | How long the transition animation takes. Faster = snappier, Slower = smoother. |
| Scroll reveal effect | select | None | Optional effect when the slideshow scrolls into view. 'Reveal' creates a curtain effect where images slide in dramatically. |
| Text entrance | select | None | Animate text with a 'Fade up' effect when slides change. |
💡 Tip: The Parallax transition creates a layered movement effect where the image and text move at different speeds, creating visual depth.
Navigation Controls
| Setting | Type | Default | Description |
|---|---|---|---|
| Show prev/next arrows | checkbox | true | Display arrow buttons on the left and right sides of the slideshow. |
| Show thumbnail strip | checkbox | false | Display small image previews below the slideshow for quick navigation. |
| Show progress bar | checkbox | false | Display a segmented progress bar that fills as autoplay advances. Requires 'Auto-advance slides' to be enabled. |
Section Spacing
| Setting | Type | Default | Description |
|---|---|---|---|
| Remove mobile top spacing | checkbox | false | Useful to stack sections seamlessly on mobile without gaps. |
Appearance
| Setting | Type | Default | Description |
|---|---|---|---|
| Controls style | select | Light | 'Light' uses white arrows/dots for dark images. 'Dark' uses black arrows/dots for light images. |
Block Types
The slideshow supports two types of blocks:
Image Slide
A simple image slide with optional heading and text overlay.
| Setting | Type | Default | Description |
|---|---|---|---|
| Desktop image | image | - | The main image displayed on desktop screens. Recommended: 2400×1200px or wider. |
| Mobile image | image | - | Optional portrait image for mobile. Falls back to desktop image if not set. |
| Heading | text | - | Large text overlay displayed on the slide. |
| Text | richtext | - | Supporting text displayed below the heading. |
Product Slide
A slide that features a specific product with its card displayed.
| Setting | Type | Default | Description |
|---|---|---|---|
| Product | product | - | Select a product to feature on this slide. |
| Desktop image | image | - | Override the product's featured image with a custom lifestyle photo. |
| Mobile image | image | - | Optional mobile-specific image. |
| Heading | text | - | Override the product title with custom text. |
| Text | richtext | - | Custom description. If left empty, uses a truncated version of the product description. |
| Content position | select | Left | Position the text and product card on the left or right side of the slide. |
| Overlay color | color | Transparent | Add a semi-transparent color overlay to improve text readability. |
Best Practices
Image Recommendations
⚠️ Important: Always upload a separate mobile image for the best experience on phones. Desktop images cropped to mobile often cut off important content.
Transition Selection Guide
Fade
Smooth and unobtrusive
Slide
Classic horizontal carousel
Flip (3D)
Bold, modern effect
Creative
Adds scale and movement
Parallax
Layered movement depth
Performance Tips
- Limit slides to 3–5 — More slides means more images to load
- Use WebP images — Shopify automatically serves WebP when supported
- Enable lazy loading — The theme handles this automatically for below-fold content
- Use 'Adapt to image' height — Avoids unnecessary cropping and processing
Troubleshooting
Slides look cropped
- Switch height mode to Adapt to image to preserve aspect ratios
- Check the Image focal point setting (try Top or Bottom)
- Upload images with the recommended dimensions
Autoplay not working
- Ensure Auto-advance slides is enabled
- Check if you have multiple slides (autoplay needs 2+ slides)
- Progress bar only shows when autoplay is enabled
Controls are hard to see
- Switch Controls style from Light to Dark (or vice versa) based on your image brightness
- Light controls work best on dark images, dark controls on light/bright images
Thumbnails not showing
- Ensure Show thumbnail strip is enabled
- Check that at least one slide has a desktop image set