Slideshow Section

The slideshow is a full-width hero section that displays rotating images or videos with text content and call-to-action buttons. It's perfect for showcasing promotions, new collections, or key messages on your homepage.

Overview

The slideshow creates an eye-catching banner at the top of your page. You can add multiple slides that automatically rotate, each with its own image, text, and buttons. It's one of the most impactful sections for grabbing visitors' attention.

Where to Use

  • Homepage: Perfect as the first section on your homepage
  • Collection pages: Showcase featured collections
  • Landing pages: Create compelling entry points

Note: The slideshow cannot be used in header or footer groups.

Blocks

Slide Block

What it does: Each slide is a full-screen image or video with text content and buttons

Limit: Up to 8 slides

Settings:

Background

  • Background Image: Upload a high-quality image (1920 x 1080px recommended)
  • Background Video: Optional video that plays instead of image (if provided, video takes priority)

Content

  • Content Vertical Position: Where text appears on the slide
    • Top: Text at the top
    • Center: Text in the middle (recommended)
    • Bottom: Text at the bottom
  • Subheading: Small text above the main heading (e.g., "New Collection", "Limited Time")
  • Heading: Main large text (e.g., "Summer Sale", "Welcome to Our Store")
  • Heading Size: XL, 2XL, 3XL, or 4XL
  • Description: Supporting text below the heading
  • Text Alignment: Left, Center, or Right

Buttons

  • Button 1 (Primary): Main call-to-action button
    • Label (e.g., "Shop Now")
    • Link URL
    • Style: Primary, Secondary, or Outline
  • Button 2 (Secondary): Optional second button
    • Label (e.g., "Learn More")
    • Link URL
    • Style: Primary, Secondary, or Outline

Settings

Layout

Slide Minimum Height

  • Sets the minimum height of each slide
  • Range: 300-900px
  • Default: 600px
  • Tip:
    • 400-500px: More compact, good for mobile
    • 600px: Balanced (recommended)
    • 700-900px: Large, dramatic impact

Colors

Color Scheme

  • Select a color scheme for text and buttons
  • Controls text color, button colors, and overlay
  • Leave empty to use default theme colors
  • Tip: Choose a scheme that contrasts well with your images

Styling

Overlay Opacity

  • Controls the dark overlay on images (makes text more readable)
  • Range: 0 (no overlay) to 0.9 (very dark)
  • Default: 0.3 (subtle overlay)
  • Tip:
    • 0-0.2: Light overlay, text may be hard to read on light images
    • 0.3-0.5: Balanced (recommended)
    • 0.6-0.9: Dark overlay, ensures text readability

Carousel Settings

Image Transition

How slides transition between each other:

Fade (Default)

  • Smooth fade between slides
  • Elegant and professional
  • Best for: Most stores, professional look

Slide

  • Slides move horizontally
  • Classic carousel effect
  • Best for: Product showcases

Zoom

  • Slides zoom in when transitioning
  • Dynamic and engaging
  • Best for: Dramatic, attention-grabbing slideshows

Zoom Out

  • Slides zoom out when transitioning
  • Unique visual effect
  • Best for: Creative, modern stores

Slide Fade

  • Combines slide and fade effects
  • Smooth and polished
  • Best for: Premium, high-end stores

Show Pagination Dots

  • Displays dots at the bottom indicating which slide is active
  • Default: Enabled
  • Tip: Helps users see how many slides there are and navigate

Show Navigation Arrows

  • Displays left/right arrows to manually navigate slides
  • Default: Enabled
  • Tip: Allows users to control the slideshow

Enable Autoplay

  • Automatically advances to the next slide
  • Default: Disabled
  • Tip: Enable for dynamic, engaging experience

Autoplay Speed

  • How long each slide displays before moving to the next
  • Range: 2-10 seconds
  • Default: 5 seconds
  • Tip:
    • 3-4 seconds: Fast-paced, good for short messages
    • 5-7 seconds: Balanced (recommended) - gives time to read
    • 8-10 seconds: Slower, good for detailed content

Enable Loop

  • When enabled, slideshow cycles back to first slide after the last
  • Default: Enabled
  • Tip: Keep enabled for continuous experience

Padding

Top Padding

  • Space above the slideshow
  • Range: 0-100px
  • Default: 40px
  • Tip: Set to 0 if slideshow is at the very top of the page

Bottom Padding

  • Space below the slideshow
  • Range: 0-100px
  • Default: 40px
  • Tip: Creates breathing room before next section

How It Works

Single Slide

  • If you add only one slide, it displays as a static banner
  • No carousel, no autoplay
  • Simple hero image with content

Multiple Slides

  • If you add 2 or more slides, they automatically rotate
  • Uses the transition effect you've selected
  • Can be controlled with arrows and pagination dots
  • Autoplay works if enabled

Common Use Cases

Homepage Hero

  • 2-3 slides showcasing:
    • New collection launch
    • Current promotion
    • Brand story or mission

Seasonal Promotions

  • Holiday sales
  • Back-to-school campaigns
  • Summer collections
  • Winter specials

Product Launches

  • New product announcements
  • Featured collections
  • Limited edition items

Brand Storytelling

  • Company mission
  • Behind-the-scenes content
  • Customer testimonials

Tips & Best Practices

✅ Do's

  • Use high-quality images: 1920 x 1080px minimum, sharp and clear
  • Keep text concise: Short headings (5-7 words), brief descriptions
  • Use contrasting colors: Ensure text is readable over images
  • Add clear CTAs: Use action-oriented button labels ("Shop Now", "Explore")
  • Limit slides: 2-4 slides is ideal (maximum 8)
  • Test on mobile: Ensure text and buttons are readable on phones
  • Optimize images: Compress images for faster loading
  • Use overlay: Adjust opacity so text is always readable

❌ Don'ts

  • Don't use low-quality images: Blurry or pixelated images look unprofessional
  • Don't overcrowd text: Too much text is hard to read
  • Don't use tiny text: Ensure headings are large and readable
  • Don't forget mobile: Always preview on mobile devices
  • Don't use too many slides: More than 4-5 slides can be overwhelming
  • Don't skip buttons: Always include at least one call-to-action
  • Don't ignore loading speed: Large images/videos can slow down your site

Creating Effective Slides

Slide 1: Main Promotion

  • Image: High-quality product or lifestyle image
  • Subheading: "Limited Time" or "New Arrivals"
  • Heading: Main promotion message
  • Description: Brief details
  • Button 1: "Shop Now" → Link to collection
  • Button 2: "Learn More" → Link to details page

Slide 2: Brand Story

  • Image: Brand or store image
  • Subheading: "About Us"
  • Heading: Brand mission or tagline
  • Description: Brief brand story
  • Button 1: "Shop Collection" → Link to main collection
  • Button 2: (Optional)

Slide 3: Trust Signal

  • Image: Customer or product image
  • Subheading: "Customer Favorite"
  • Heading: "Rated 5 Stars"
  • Description: Trust-building message
  • Button 1: "Shop Now" → Link to products

Image Guidelines

Recommended Size

  • Width: 1920px minimum
  • Height: 1080px (or maintain aspect ratio)
  • Aspect Ratio: 16:9 works well

Image Quality

  • Format: JPEG or PNG
  • Quality: High resolution, sharp focus
  • File Size: Optimize to 200-500KB for faster loading

Image Content

  • Focus: Clear subject in center
  • Text Placement: Leave space for text overlay
  • Colors: Consider how text will look over the image

Video Guidelines

Video Requirements

  • Format: MP4 recommended
  • Length: 10-30 seconds (loops automatically)
  • Size: Keep file size reasonable for loading speed
  • Content: Should work well on loop

Video Tips

  • Videos take priority over images if both are provided
  • Ensure video content is appropriate for looping
  • Test video playback on different devices
  • Consider video file size impact on page speed

Button Best Practices

Primary Button (Button 1)

  • Label: Action-oriented ("Shop Now", "Explore", "Get Started")
  • Style: Primary (bold, prominent)
  • Link: Most important destination (main collection, sale page)

Secondary Button (Button 2)

  • Label: Supporting action ("Learn More", "View Details")
  • Style: Outline or Secondary
  • Link: Additional information (about page, details)

Button Placement

  • Center alignment: Most common and balanced
  • Left alignment: Good for text-heavy slides
  • Right alignment: Less common, can work for specific designs

Content Positioning Tips

Center (Recommended)

  • Best for: Most slides
  • Balanced: Works well with most images
  • Professional: Classic, polished look

Top

  • Best for: When image bottom is important
  • Use when: Bottom of image has key visual elements

Bottom

  • Best for: When image top is important
  • Use when: Top of image has key visual elements

Transition Effects Guide

Fade

  • Best for: Professional, elegant stores
  • Effect: Smooth, subtle transition
  • Use when: You want a polished, refined look

Slide

  • Best for: Product showcases
  • Effect: Horizontal movement
  • Use when: You want a classic carousel feel

Zoom

  • Best for: Dramatic, attention-grabbing
  • Effect: Zoom in effect
  • Use when: You want high impact

Zoom Out

  • Best for: Creative, modern stores
  • Effect: Zoom out effect
  • Use when: You want a unique, modern feel

Slide Fade

  • Best for: Premium, high-end stores
  • Effect: Combines slide and fade
  • Use when: You want the best of both effects

Troubleshooting

Slides Not Rotating

  • Check: You need 2 or more slides for rotation
  • Check: Enable "Enable Autoplay" if you want automatic rotation
  • Check: Verify slideshow settings are saved

Text Not Readable

  • Solution: Increase overlay opacity (0.4-0.6)
  • Solution: Use darker images or adjust color scheme
  • Solution: Ensure good contrast between text and background

Images Look Blurry

  • Solution: Use images at least 1920px wide
  • Solution: Upload high-resolution images
  • Solution: Don't stretch small images

Buttons Not Clickable

  • Check: Verify button links are filled in
  • Check: Test on different devices
  • Check: Ensure buttons aren't hidden behind other elements

Video Not Playing

  • Check: Video format should be MP4
  • Check: File size should be reasonable
  • Check: Test video in different browsers

Slideshow Too Fast/Slow

  • Adjust: Change "Autoplay Speed" setting
  • Tip: 5-7 seconds is usually a good balance

Mobile Issues

  • Check: Preview on actual mobile devices
  • Check: Ensure text is large enough to read
  • Check: Verify buttons are easily tappable

Related Sections

  • Hero - Alternative hero section option
  • Image with Text - Static image with text content
  • Featured Collection - Showcase specific collections

Next Steps: