Full-screen slideshow section with multiple slides, autoplay, transition effects, and customizable content per slide.
Slideshow
The Slideshow section displays a full-screen slideshow with multiple slides. Each slide can contain a background image or video, a title, a subtitle, text and a CTA button. Ideal for the homepage or campaign pages.
Key features
| Feature | Description |
|---|---|
| Multi-slides | Add as many slides as needed |
| Media per slide | Image or video, for desktop and mobile separately |
| Content per slide | Subtitle, title, text, button -- individually customizable |
| Content position | 9 possible positions per slide (desktop + mobile) |
| Transition effects | Slide or Fade |
| Navigation | Arrows and/or pagination (dots or progress bars) |
| Autoplay | Configurable automatic scrolling (3-10s) |
| Featured Product | Option to embed a mini product form |
Main settings
Media heights
| Setting | Description | Options | Default |
|---|---|---|---|
| Desktop height | Slideshow height on desktop | Adapt / Small / Medium / Large / Full | Large |
| Mobile height | Slideshow height on mobile | Adapt / Small / Medium / Large / Full | Medium |
| Media border radius | Media corner rounding | 0-50px | 0 |
Overlay
| Setting | Description | Options | Default |
|---|---|---|---|
| Overlay opacity | Darkens the image for text readability | 0-100% | 20% |
| Overlay color | Overlay color | Foreground / Background / Accent 1 / Accent 2 | Foreground |
Behavior
| Setting | Description | Options | Default |
|---|---|---|---|
| Autoplay | Automatic scrolling | On / Off | On |
| Speed | Display duration per slide | 3-10s | 5s |
| Animation | Transition type between slides | Slide / Fade | Fade |
| Navigation | Show arrows | On / Off | On |
| Pagination | Show dots or bars | On / Off | On |
| Loop | Return to the beginning after the last slide | On / Off | On |
| Desktop video loop | Loop videos on desktop | On / Off | On |
| Mobile video loop | Loop videos on mobile | On / Off | On |
Navigation style
| Setting | Description | Options | Default |
|---|---|---|---|
| Arrow background | Arrow button background color | Transparent / Background / Foreground / Accent 1 / Accent 2 | Background |
| Icon color | Arrow color | Foreground / Background / Accent 1 / Accent 2 | Foreground |
| Border | Border around buttons | None / Background / Foreground / Accent 1 / Accent 2 | None |
| Icon style | Arrow type | Arrow / Chevron | Arrow |
| Icon size | Navigation icon size | 16-32px | 20px |
Pagination style
| Setting | Description | Options | Default |
|---|---|---|---|
| Pagination style | Pagination appearance | Dots / Progress bars | Dots |
| Progress color | Bar color (bars mode) | Accent 1 / Accent 2 / Foreground / Background | Accent 1 |
| Dots color | Dots color (dots mode) | Background / Foreground / Accent 1 / Accent 2 | Background |
| Dots size | Dots diameter | 8-20px | 12px |
Available blocks
Slide block
Each slide is an individual block with its own settings:
| Field | Description |
|---|---|
| Desktop media type | Image or Video |
| Desktop image | Background image for desktop |
| Desktop video | Background video for desktop |
| Mobile media type | Image or Video |
| Mobile image | Dedicated mobile image (optional, inherits from desktop) |
| Mobile video | Dedicated mobile video |
| Subtitle | Text above the title |
| Title | Slide main title |
| Text | Descriptive paragraph |
| Button text | CTA label |
| Button link | Destination URL |
| Button style | Primary / Secondary / Tertiary |
| Vertical position | Top / Middle / Bottom |
| Horizontal position | Left / Center / Right |
| Mobile vertical position | Top / Middle / Bottom (mobile) |
| Mobile horizontal position | Left / Center / Right (mobile) |
| Text alignment | Desktop text alignment |
| Mobile text alignment | Mobile text alignment |
| Content width | Max width of the content block (px) |
| Content background | Transparent / Blur |
| Content border radius | Content background rounding |
Featured Product block
Allows embedding a mini product form directly in the slideshow, with a variant selector and add-to-cart button.
Use cases
Classic homepage hero
- 3 slides with high-quality images (min 1920px)
- Fade transition for an elegant effect
- Autoplay at 5 seconds
- Overlay at 20-30% for readability
- Centered content with CTA button
Promotional campaign
- 2-3 slides with limited-time offers
- Progress bars to create a sense of urgency
- Content position set to left with blur background
- CTA buttons in primary style
Seasonal lookbook
- 4-5 slides with lifestyle images
- Subtitles for context (e.g., "Spring Collection")
- Slide transition for dynamic scrolling
- Arrow navigation in chevron style
💡Always provide a dedicated mobile image (portrait format) for each slide. The desktop image (landscape) will be cropped on vertical screens, which may cut off important elements.
⚠️If using videos, make sure they are short (5-15s) and compressed. Heavy videos impact load time, especially on mobile. Prefer videos hosted on Shopify rather than external URLs.
ℹ️In Full (full-screen) mode, the slideshow takes up 100% of the viewport height. This works very well as the first section on the homepage, but can be too imposing further down the page. Use Large or Medium in that case.