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.
Hero slideshow
Hero slideshow is a full-width carousel with copy on one side and product imagery on the other. Add up to ten slides, each with its own tagline, heading, description, button, images, and background. Autoplay, arrows, and dots are controlled at the section level.
Storefront preview
Storefront preview
Where to find this section
Where to find this
Themes → Customize → Add section → Hero slideshow
Find it under Slideshows in the section picker. After adding the section, use Add Slide for each carousel panel (up to 10).
Theme editor section list
Slideshow behavior
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.
Slideshow controls
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.
Slide block
Tagline
Small label above the main heading (for example Fragrance Edit). Leave blank to hide the tagline on this slide.
Usage
- Keep it short—a collection name, season, or campaign label works well.
- Each Slide block can use different tagline text.
Tagline color
Color of the tagline text. Default color: #000000.
Usage
- Ensure enough contrast against the slide background.
- Match or complement the heading color on the same slide.
Tagline font size
Size of the tagline text. Range: 18–24 px (step 1). Default: 18 px.
Usage
- Keep the tagline smaller than the main heading for clear hierarchy.
Content
Main heading for the slide (for example A signature scent for every mood). Leave blank to hide the heading on this slide.
Usage
- Use one strong line that fits the hero layout.
- Pair with the description for a headline plus supporting copy.
Content color
Color of the heading text. Default color: #000000.
Usage
- Test against light and dark slide backgrounds before publishing.
Content font size
Size of the heading text. Range: 40–60 px (step 2). Default: 48 px.
Usage
- Reduce the size if long headings wrap awkwardly on mobile.
- Use the default for a bold hero headline as in the storefront preview.
Description
Supporting paragraph under the heading. Leave blank to show tagline and heading only.
Usage
- Keep to one or two sentences so the hero stays scannable.
- Describe the collection, mood, or offer tied to the button link.
Description color
Color of the description text. Default color: #000000.
Usage
- Use the same color as the heading or a slightly softer tone for hierarchy.
Description font size
Size of the description text. Range: 18–24 px (step 1). Default: 18 px.
Usage
- Align with the tagline size for balanced body copy.
Button label
Text on the call-to-action button (for example Shop fragrances). Leave blank to hide the button on this slide.
Usage
- Use action wording that matches where the link goes.
Button link
Destination when the button is clicked—a collection, product, or page in your store.
Usage
- Paste a URL or search for a destination in the theme editor.
- Without a link, the button does not navigate anywhere.
Open in new tab
Opens the button link in a new browser tab when enabled. Default: Off.
Usage
- Use for external URLs; keep off for in-store collection and product links.
Button style
Visual style of the button. Options: Primary, Secondary, Tertiary, or Arrow button. Default: Tertiary.
Usage
- Use Tertiary for the outline-style button shown in the storefront preview.
- Choose Arrow button when you want a trailing arrow icon on the label.
- Primary and secondary follow your global button styles from theme settings.
Main image
Primary product or lifestyle image on the right side of the slide. Recommended size: 400 px wide; use 800 px for retina quality.
Usage
- Use a clear product shot or bottle image with transparent or simple backgrounds.
- Each slide can show a different product or campaign visual.
Main image alt text
Describes the main image for accessibility and SEO. Falls back to the image file alt text or slide heading when left blank.
Usage
- Write a short, accurate description of what appears in the photo.
Decorative image
Smaller accent image layered near the main image (for example a secondary bottle or detail shot). Recommended size: 130 px; use 260 px for retina quality.
Usage
- Adds depth to the hero composition; leave empty to show the main image only.
- Use imagery that complements the main product without competing for attention.
Decorative image alt text
Describes the decorative image for screen readers. Falls back to the image file alt text or slide heading when left blank.
Usage
- Describe the accent image if it adds meaningful product context.
- Use empty alt treatment only when the image is purely decorative.
Background style
How the slide background is filled. Options: Solid, Gradient, or Image. Default: Gradient.
Usage
- Choose Gradient for soft color blends as in the storefront preview.
- Choose Solid and set Solid background for a single flat color.
- Choose Image and upload a Background image for a full-slide photo backdrop.
Solid background
Fill color when Background style is Solid. Default color: #FFFBF4.
Usage
- Pick a brand color that keeps text readable without extra overlay.
Gradient background
Gradient fill when Background style is Gradient. Uses the theme gradient picker. Default: warm pink-to-cream gradient.
Usage
- Match seasonal campaigns with complementary gradient stops.
- Vary gradients per slide to distinguish carousel panels.
Background image
Full-slide background photo when Background style is Image. Recommended size: 2000 px wide; use 4000 px for retina quality.
Usage
- Use soft or blurred imagery so overlaid text stays readable.
- Ensure heading and description colors contrast with the photo.
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