Home Fullwidth Slider

What this section does

This section controls the homepage hero slider, including slide media, copy, motion, and content panel styling.

How to set it up

1. Go to Online Store -> Themes.
2. Click Customize.
3. Make sure the template is Home page.
4. In the left sidebar under Template, select Home fullwidth slider.

Editor Areas Overview

Left sidebar (template tree)

1. Home fullwidth slider: the selected section instance on the homepage template.
2. Add Slide: creates a new slide block inside this section.
3. Slide blocks:
   • Each block is one slide.
   • Click a block to edit that specific slide content.
   • Drag blocks to reorder slide sequence.

Center canvas (live preview)

1. The blue outline marks the selected slider section.
2. You can preview text, media, button styles, and control visibility in real time.
3. Bottom controls in preview represent slider arrows, dots/progress, and play/pause behavior.

Right settings panel (section controls)

The screenshot shows these section-level settings:

1. Auto-rotate slides
2. Slide duration (seconds)
3. Transition type (Fade, Slide, Slide from top, Zoom + fade)
4. Transition speed (milliseconds)
5. Gradient opacity
6. Controls opacity
7. Buttons background opacity
8. Controls overall size
9. Progress indicator width
10. Content surface (color)
11. Content surface opacity
12. Content border (color)
13. Content border opacity
14. Content border width
15. Content box width

Section Controls: What Each One Does

1. Auto-rotate slides: turns automatic slide movement on or off. Keep this off if your hero contains dense copy users need time to read.
2. Slide duration: controls how long each slide stays visible before changing. Use a longer duration when slides have two buttons or longer text.
3. Transition type: sets the motion style between slides (Fade, Slide, Slide from top, Zoom + fade). Use subtler transitions for premium/editorial layouts.
4. Transition speed: controls animation time in milliseconds. Lower values feel snappier, higher values feel smoother but can feel slow if overused.
5. Gradient opacity: adjusts overlay strength over media to improve text legibility. Increase this when image/video backgrounds are visually busy.
6. Controls opacity: adjusts visibility of arrows, progress, and playback UI. Reduce it for minimal designs, increase it for accessibility and discoverability.
7. Buttons background opacity: controls how solid the controls’ button backgrounds look. Higher opacity improves contrast over bright imagery.
8. Controls overall size: scales slider controls globally. Increase on stores targeting mobile-heavy traffic or older audiences.
9. Progress indicator width: sets how wide the progress/dot track appears. Wider values make navigation state easier to scan.
10. Content surface: sets the panel background color behind text content. Choose a color that supports brand tone and contrast.
11. Content surface opacity: controls transparency of the text panel background. Higher values improve readability over bright media.
12. Content border: sets border color around the content panel. Useful for defining the panel edge on low-contrast backgrounds.
13. Content border opacity: controls border visibility. Lower values are subtle; higher values create a stronger framed look.
14. Content border width: sets border thickness. Keep thin for modern style, increase only if panel separation is weak.
15. Content box width: controls maximum width of the text panel. Narrower widths improve readability; wider widths support longer copy blocks.

Slide Block Controls (When You Click A Slide)

Focus on these important controls for each slide:

1. Media type (Video asset or Image): choose motion-heavy storytelling (Video) or faster-loading visual clarity (Image).
2. Uploaded video / Image: primary visual asset for the slide. Use optimized media and consistent art direction across slides.
3. Video asset filename: fallback/reference field for theme video asset handling; keep naming consistent for easier maintenance.
4. Eyebrow + Show eyebrow: optional short pre-heading label for context (campaign tag, season, collection).
5. Heading: main message on the slide. Keep concise so it remains readable across breakpoints.
6. Text: supporting description. Use this to add value, not to repeat the heading.
7. Content panel fill color + Content panel fill opacity: controls readability against the media background.
8. Content panel border color + Content panel border opacity: helps separate content from background when contrast is low.
9. Eyebrow color, Heading color, Body text color: set text contrast intentionally for accessibility.
10. Heading size + Body text size: typography scale per slide; avoid oversized headings that wrap awkwardly on mobile.

Button label/link fields are intentionally omitted here because they are self-explanatory.

Common Merchant Tasks

Add a new slide

1. Select Home fullwidth slider in sidebar.
2. Click Add Slide.
3. Configure media, text, and buttons for the new block.
4. Drag to desired position.
5. Save.

Reorder slides

1. In the left sidebar, drag slide blocks up/down.
2. Verify order in preview.
3. Save.

Disable autoplay

1. Turn off Auto-rotate slides.
2. Save.

Simplify visual chrome

1. Reduce Controls opacity and Buttons background opacity.
2. Lower Gradient opacity if media appears too dark.
3. Keep text contrast readable before publishing.

Tips

1. Use 2-4 slides maximum to keep first-load messaging focused.
2. Keep heading length consistent across slides for cleaner transitions.
3. If readability is weak, increase panel opacity before increasing font size.
4. Test autoplay and transition speed on mobile to avoid a “too fast” feel.

FAQs

Why does slide text become hard to read on some images?

Increase Gradient opacity and/or Content surface opacity, then check heading and body text colors.

Why does the slider feel too busy?

Reduce control opacity, simplify transitions (for example Fade), and limit the number of active buttons per slide.

Why are spacing and text wraps different on mobile?

Check Content box width, Heading size, and Body text size for each slide block. Desktop-safe values can still wrap aggressively on smaller screens.

Related guides

• Header Documentation
• Mega Menu Documentation
• Theme Documentation

Publish Checklist

1. Check all slide links.
2. Check desktop and mobile preview.
3. Confirm transition speed feels natural.
4. Save and publish.

Need help?

If you still need help, contact support via the Contact page.