The Slideshow section is one of the most powerful visual elements in any Shopify theme.
It’s typically placed at the top of your homepage (hero banner) and helps showcase your featured collections, promotions, or brand story with rotating images or videos.
This section allows you to:
- Display multiple slides (images or videos).
- Add headings, subheadings, and call-to-action (CTA) buttons.
- Adjust layout, colors, font sizes, and overlay effects.
- Control animation speed and autoplay behavior.
How to Add the Slideshow Section
- Go to your Shopify admin → Online Store → Customize.
- From the left sidebar, click Add Section → Slideshow.
- Choose where to place it (commonly at the top of the homepage).
- Click Save to apply your changes.
Section Structure Overview
The section is made up of:
- Global Settings: controls overall behavior (layout, height, autoplay, etc.).
- Blocks: each block represents one slide (image/video + text + button).
Global Settings Explained
| Setting | Description | Recommendation |
|---|---|---|
| Full Width | Display slideshow across the full screen width. | Recommended for hero banners or video backgrounds. |
| Height Ratio | Adjusts the height (e.g., 16:9, 4:3, or adapt to image). | Use 16:9 for landscape images or “adapt” for mixed heights. |
| Autoplay | Automatically rotates slides. | Enable for dynamic visual engagement. |
| Slide Duration | Time per slide (in seconds). | 4–6 seconds is ideal for readability. |
| Padding & Margin | Spacing above and below the slideshow. | Adjust to balance with surrounding sections. |
Slide (Block) Settings
Setting
Function
Best Practice
Subheading
Small text above main heading.
Use to introduce new collections or offers.
Heading
Main headline for the slide.
Include your primary keyword for SEO.
Description
Short supporting text.
Keep it under 25–30 words for clarity.
Text Position
Align text (left, center, right, top, bottom).
Center alignment works best for hero banners.
Button Label & Link
CTA text and destination URL.
Example: “Shop Now” linking to a collection page.
Button Style
Choose between Primary / Secondary button.
Make sure it contrasts well against the background.
Image
Background image for the slide.
Use optimized JPEG or WebP under 400 KB.
Background Video
Replace image with autoplay video.
Keep short, silent, and lightweight.
Overlay Opacity
Controls darkness/lightness overlay for text visibility.
0.3–0.5 is optimal.
Colors & Fonts
Customize text color and size.
Ensure accessibility and strong contrast.
