Hero Optional Slides

Theme: Multipurpose Fashion Theme

Help Center > Sections & Blocks > Hero & Banner Sections > Hero (Optional Slides)

Overview

The Hero (Optional Slides) section displays a full-width image slideshow at the top of your page. Each slide can include a subheading, heading, body text, and up to two buttons overlaid on the media. Use it on your homepage to showcase promotions, new collections, or brand messaging. Merchants can add multiple slides and customize transitions, autoplay, navigation style, and mobile behavior.

Where to Add This Section

Go to Online Store > Themes > Customize.
Select the Homepage or the template where you want the hero.
Click Add section.
Choose Hero (optional slides) (sometimes shown as Hero optional slides depending on theme labeling).
Position it at the top for maximum impact.
Save.

📷 Image placeholder: Add a screenshot of the Add section menu with Hero optional slides selected.

Quick Setup (3 Steps)

Add slide blocks - Click Add block > Overlaid Hero Slide. Add one block per slide.
Add content - For each slide: upload an image, enter heading and text, add button links.
Configure section - Set full width, height adjustments, autoplay, and navigation style in section settings.

How it works

Slides are blocks: Each Overlaid Hero Slide block becomes one slide.
Optional slides: If you add 1 slide, the section behaves like a single hero. If you add 2+ slides, it becomes a carousel.
Navigation and autoplay: Navigation UI and autoplay are meaningful only when you have 2+ slides.
Mobile media: If a slide has a Mobile image, it will be used on small screens instead of the desktop image.

Section Settings

Setting	Description	Default
Full width	Stretch the section to the viewport edges.	On
Desktop height adjustment	Adjust slide height on desktop (px). Use this to fine-tune how tall the hero appears.	0
Mobile height adjustment	Adjust slide height on mobile (px). Useful if text overlaps or the hero feels too tall.	0
Animation type	Transition style between slides.	Horizontal slide
Navigation style	Choose how users navigate: Dots, Arrows, Bars, Minimal.	Dots
Auto play	Automatically rotate slides (2+ slides recommended).	Off
Auto interval	Seconds between slides when autoplay is enabled.	5
Enable drag	Allow swipe/drag navigation, especially on mobile.	On
Border radius	Rounded corners (px). Set to 0 for square edges.	0
Pause on hover	Pause autoplay when the cursor is over the hero (desktop). Applies only if autoplay is enabled.	N/A
Pause on interaction	Pause autoplay after the user interacts (clicks navigation, drags, uses keyboard). Applies only if autoplay is enabled.	N/A

Animation options

Horizontal slide - Slides move left/right.
Fade - Fade between slides.
Scale fade - Scale and fade.
Parallax - Parallax-style transition.
Crossfade - Crossfade between slides.
Slide + fade - Combined slide and fade.

📷 Image placeholder: Add a screenshot of Hero section settings and one slide in the preview.

Blocks: Overlaid Hero Slide

Each slide is an Overlaid Hero Slide block. Add multiple blocks for multiple slides.

Block settings

Setting	Description
Subheading	Small text above the main heading.
Heading	Main headline (example: "New Arrivals").
Heading size	Font size (px).
Text	Body text below heading.
Slide link	Primary button URL.
Slide link text	Primary button label (example: "Shop now").
Slide link 2	Secondary button URL.
Slide link text 2	Secondary button label.
Button scheme	Color scheme for buttons.
Image	Slide background image (desktop).
Mobile image	Optional separate image for mobile.
Text protection	Dark overlay opacity (0 to 100) to improve text readability.
Vertical alignment	Top, Center, Bottom.
Horizontal alignment	Left, Center, Right.
Text animation delay (ms)	Optional delay (0 to 500ms) before the text sequence starts on this slide.

Sequential text animation

When a slide becomes active, the text content animates in a smooth sequence after the slide transition completes. Elements animate in this order: subheading, heading, text, primary button, secondary button. Each element fades in and moves up slightly (opacity 0 to 1, translateY 20px to 0) with a 200ms stagger between items. The animation respects prefers-reduced-motion and is disabled when users have reduced motion enabled.

Best practices for slide content

Heading: Keep it short (5 to 10 words) and scannable.
Text: 1 to 2 sentences maximum. Link to deeper content if needed.
Image: Use high-quality images (1920x800px or similar). Avoid busy images where text overlays.
Text protection: Use 20 to 40% when text is hard to read on the image.
Mobile image: Use a taller or cropped image for better mobile layout.

Performance guidelines

Use 2 to 4 slides. Too many increases load time and reduces clarity.
Prefer optimized images (WebP if available in your workflow) and keep file sizes reasonable.

Step-by-Step Setup

Step 1: Add the section

In Theme Customizer, add Hero (optional slides) and place it at the top of your homepage.

Step 2: Add your first slide

Click Add block within the Hero section.
Select Overlaid Hero Slide.
Upload an Image (required).
Enter Heading (example: "Welcome to Our Store").
Add Text if desired.
Set Slide link and Slide link text for your CTA (example: /collections/all, "Shop now").
Adjust Text protection if the image makes text hard to read.
Set Vertical and Horizontal alignment for text position.

Step 3: Add more slides

Repeat Step 2 for each additional slide. Drag blocks to reorder slides.

Step 4: Configure section settings

Turn Full width On for edge-to-edge display.
Set Desktop height adjustment and Mobile height adjustment if needed.
Choose Animation type (Horizontal slide or Fade are common).
Enable Auto play and set Auto interval (example: 5 seconds) if you want rotation.
Keep Enable drag On for mobile swipe.
Select Navigation style (Dots are recommended for clarity).
If available, enable Pause on hover and Pause on interaction for better UX.
Save.

📷 Image placeholder: Add a screenshot of a completed hero with 2 to 3 slides visible on the storefront.

Mobile behavior

Mobile image override: If a slide has a Mobile image, it will replace the desktop image on small screens.
Readability: Use Text protection to keep headings and buttons legible on mobile.
Gestures: With Enable drag turned on, users can swipe between slides.

Use cases

Homepage hero - Lead with your best promotion or brand message.
Collection launch - Multiple slides for different new collections.
Seasonal campaigns - Rotate seasonal imagery and offers.
Brand story - Slides with minimal text for visual impact.

For merchants

Use 2 to 4 slides. Too many can slow the page and dilute your message.
Lead with your strongest promotion or brand message.
Test on mobile: ensure text is readable and buttons are easy to tap.
Use Mobile image when desktop image crops poorly on small screens.
If autoplay is enabled, consider enabling pause behavior so customers can read.

Accessibility

Carousel has appropriate ARIA roles and labels.
Autoplay should be pausable (pause on interaction, hover, or a pause control if provided).
Sequential text animation respects prefers-reduced-motion. Animations are disabled when users prefer reduced motion.
Text protection overlay improves contrast for readability.
Ensure heading and button text meet contrast requirements (WCAG).

Troubleshooting

Autoplay does not rotate: Confirm you have 2+ slides and autoplay is enabled. Reduced-motion settings may limit animations on some setups.
Drag/swipe not working: Make sure Enable drag is On and test on a real mobile device.
Navigation hard to see: Increase Text protection or choose a navigation style with better contrast in your design.

Common mistakes

Mistake	Fix
No image on slide	Upload an image in each Overlaid Hero Slide block.
Text unreadable on image	Increase Text protection overlay.
Too many slides	Use 2 to 4 slides, remove or consolidate extras.
Autoplay too fast	Set Auto interval to 5 to 8 seconds.
Mobile image missing	Add Mobile image when desktop image crops poorly.
Buttons not working	Enter a valid Slide link URL (collection, product, or page).

Notes for implementation

If there are 0 slide blocks, consider hiding the section on the storefront to avoid empty space.
If there is 1 slide, consider hiding navigation controls and disabling autoplay automatically.
Ensure the hero media has meaningful alt text when images convey information (decorative images can use empty alt where appropriate).

FAQs

1. How many slides should I use?

We recommend 2 to 4 slides. Too many slides can reduce clarity, slow page performance, and dilute your primary message.

2. What happens if I add only one slide?

With a single slide, the section behaves like a static hero banner. Navigation controls and autoplay are typically unnecessary in this case.

3. Can I use video instead of an image?

Yes, if your theme build includes video support in the slide block. Use muted videos for autoplay compatibility and provide a mobile image fallback for better performance on smaller devices.

4. Why is autoplay not working?

Check the following:

You have at least 2 slides.
Auto play is enabled in section settings.
The browser is not limiting animations due to reduced motion preferences.

5. How can I make text more readable over the image?

Increase the Text protection overlay (recommended 20 to 40). You can also choose a less busy background image or adjust text alignment.

6. Why do my images look cropped on mobile?

Use the Mobile image setting for each slide. Mobile screens have different aspect ratios, so a separate optimized image improves layout and readability.

7. What is the recommended image size?

A common recommendation is around 1920x800px for desktop. Ensure the focal point remains centered and avoid placing critical text near edges.

8. Does this section affect page speed?

It can. Large images, too many slides, or heavy videos may impact performance. Optimize images, limit slide count, and avoid unnecessarily large video files.

9. Can I reorder slides?

Yes. In the Theme Customizer, drag and drop Overlaid Hero Slide blocks to change the slide order.

10. Are two buttons required?

No. Both buttons are optional. You can use only a primary button or remove buttons entirely for a minimal hero layout.

11. Can customers swipe between slides on mobile?

Yes, if Enable drag is turned On in section settings. This allows touch-based swipe navigation.

12. Does the text animation affect accessibility?

No. The sequential animation respects prefers-reduced-motion. If a user has reduced motion enabled, animations are disabled automatically.

13. Why are navigation arrows or dots not visible?

Check the selected Navigation style and ensure there is sufficient contrast between navigation controls and the background image. Increasing Text protection may also help.

14. Can I link the entire slide instead of using buttons?

If supported by your theme implementation, you can use the Slide link setting to direct users to a collection, product, or page. Otherwise, use buttons for clearer call-to-action behavior.

15. Is this section compatible with Online Store 2.0?

Yes. The section uses standard Shopify section and block schema and is fully compatible with Online Store 2.0 templates.

Multipurpose theme documentation