Autoplay
Advances to the next slide automatically when enabled. Default: On.
Usage
- Turn on for a rotating hero that cycles through slides without shopper input.
- Turn off when you want shoppers to move through slides only with arrows or dots.
Image slideshow
Image slideshow is a full-width carousel where each slide uses a background image or video with overlaid heading, subheading, and description. Add up to ten slides, set autoplay and navigation, and darken the media with a color overlay so text stays readable.
Storefront preview
Storefront preview
Where to find this section
Where to find this
Themes → Customize → Add section → Image slideshow
Find it under Slideshows in the section picker. After adding the section, use Add Slide for each panel (up to 10).
Theme editor section list
Slideshow
Autoplay speed
How long each slide stays visible before autoplay moves to the next one. Range: 2–10 s (step 1). Default: 5 s. Applies when Autoplay is on.
Usage
- Use a longer interval when slides include more text to read.
- Use a shorter interval for quick, image-led campaigns.
Show navigation arrows
Shows previous and next arrow controls on the carousel. Arrows appear only when the section has more than one slide. Default: On.
Usage
- Turn on so shoppers can move between slides manually.
- Turn off for a cleaner look when autoplay and dots are enough.
Show pagination dots
Shows dot indicators for each slide at the bottom of the carousel. Dots appear only when the section has more than one slide. Default: On.
Usage
- Turn on when you have multiple slides so shoppers can see how many there are and jump to one.
- Turn off for a single-slide hero or when you prefer arrows only.
Loop slides
Returns to the first slide after the last one when enabled. Default: On.
Usage
- Turn on for a continuous carousel experience.
- Turn off to stop on the final slide.
Arrow color
Color of the previous and next arrow icons. Default color: #000000.
Usage
- Pick a color that stays visible against your slide backgrounds.
- Match the dot color for consistent navigation styling.
Dot color
Color of the pagination dots. Default color: #000000.
Usage
- Use the same color as the arrows for a unified control bar.
- Choose a lighter or darker shade if dots blend into the slide background.
Layout
Content alignment
Horizontal position of the overlaid text on each slide. Options: Left, Center, or Right. Default: Left.
Usage
- Use Left for the layout shown in the storefront preview.
- Use Center for symmetrical hero copy over the image.
- Use Right when the focal point of your photo sits on the left.
Image ratio
Sets the crop shape of slide media across the carousel. Default: Auto – Original.
Usage
- Use Auto – Original to respect each image’s natural proportions.
- Pick a fixed ratio (such as 16:9 – Widescreen or 4:5 – Portrait) for uniform slide heights.
Overlay
Overlay color
Tint placed over each slide’s image or video to improve text contrast. Default color: #000000.
Usage
- Use a dark overlay on bright product photos so gold or light text stays readable.
- Uses the same corner radius on every slide in the section.
Overlay opacity
Strength of the overlay tint. Range: 0–90% (step 5). Default: 50%.
Usage
- Increase opacity when text is hard to read against the photo.
- Lower opacity to show more of the underlying image or video.
Slide block
Image
Background image for this slide. Recommended size: 2000 px wide; use 4000 px for retina quality.
Usage
- Use a high-quality lifestyle or product shot with space for overlaid text.
- Each Slide block can use a different image.
Image alt text
Describes the slide image for accessibility and SEO. Falls back to the slide heading or store name when left blank.
Usage
- Write a short, accurate description of what appears in the photo.
Hosted video
Shopify-hosted video that plays as the slide background instead of a still image.
Usage
- Upload a short looping clip for motion-led hero slides.
- When a hosted video is set, it takes priority over the image and external video URL.
Video URL
YouTube or Vimeo link used as the slide background when no hosted video is selected.
Usage
- Paste a YouTube or Vimeo URL for autoplaying background video.
- Use when you already host campaign footage on an external platform.
Text color
Color applied to the subheading, heading, and description on this slide. Default color: #FFFFFF.
Usage
- Pick a color that contrasts with the overlay and background media.
- Each slide can use a different text color.
Heading
Main title overlaid on the slide (for example Signature scents crafted to linger). Leave blank to hide the heading on this slide.
Usage
- Use one strong line that fits the hero layout.
- Pair with the subheading and description for a headline plus supporting copy.
Heading size
Size of the heading text. Range: 40–60 px (step 2). Default: 40 px.
Usage
- Increase for short, punchy headlines on large screens.
- Reduce if long headings wrap awkwardly on mobile.
Subheading
Small label above the heading (for example Luxury Eau de Parfum). Leave blank to hide the subheading on this slide.
Usage
- Keep it short—a collection name, season, or product type works well.
Subheading size
Size of the subheading text. Range: 18–24 px (step 1). Default: 18 px.
Usage
- Keep the subheading smaller than the heading for clear hierarchy.
Description
Supporting paragraph under the heading. Leave blank to show subheading and heading only.
Usage
- Keep to one or two sentences so the hero stays scannable.
- Line breaks in the editor are preserved on the storefront.
Description size
Size of the description text. Range: 18–24 px (step 2). Default: 18 px.
Usage
- Align with the subheading size for balanced body copy.
Slide link
Makes the entire slide clickable and links to a collection, product, or page in your store.
Usage
- Paste a URL or search for a destination in the theme editor.
- Leave blank when the slide is informational only.
Slide link label
Accessible label for the invisible slide link, read by screen readers. Falls back to the slide heading when left blank.
Usage
- Describe where the slide link goes (for example Shop signature scents collection).
Open slide link in new tab
Opens the slide link in a new browser tab when enabled. Default: Off.
Usage
- Use for external URLs; keep off for in-store collection and product links.
Section spacing
Section spacing
Adds empty space above and below this section on desktop and mobile.
Usage
- Top padding (desktop) — Default: 40 px · 0–100 px
- Bottom padding (desktop) — Default: 40 px · 0–100 px
- Top padding (mobile) — Default: 40 px · 0–100 px
- Bottom padding (mobile) — Default: 40 px · 0–100 px
- When you move the slider, the gap above or below grows or shrinks