Skip to main content

Slideshow v4

Combines images, text, and call-to-action buttons in your slideshow

A slideshow is a quick and interactive way to showcase content and information on your site. Slideshow lets you display your most popular products/collections or shout out about what's new with a call-to-action button.

slideshow demo

steps:
  1. In the theme editor (Customize), click Add section
  2. Locate Slideshow
  3. Save

Section settings​

1. Layout settings​

  • Container type: Choose the container type to determine where to place the slide's content

  • Full width margin: Create a padding on both sides ( only apply Container type is Full width )

  • Section height (desktop): Create a fixed height slideshow for the desktop screen

  • Section height (mobile): Create a fixed height slideshow for the mobile screen

Layout settings

  • Show navigation (desktop): Display navigation button on desktop screen

  • Slideshow autoplay: Turn on autoplay slideshow

  • Slideshow changing times (seconds): Set time in seconds to change slideshow

Carousel settings

3. General settings​

  • Padding top: Create top padding for slideshow
  • Padding bottom: Create bottom padding for slideshow

General settings

Block settings​

1. Slideshow​

1. Title settings​

Title settings

2. Description settings​

Title settings

3. Button settings​

You have the flexibility to modify the label displayed on the button right here. Additionally, you can custom the button by selecting the Button style, Button size option, Custom Border radius, Button padding and Choose the button's effect .

slideshow demo

4. Image settings​

slideshow demo

5. General settings​

  • Color scheme: lets you select a predefined color scheme for the section, which applies to the text and background.

  • Background image The priority is higher than Background color

  • Use parallax enables a parallax scrolling effect for the background image (if one is set)

  • Background video url higher priority than Background image and Background color

  • Background margin (desktop): Create a margin on both sides for background ( only apply on desktop screen )

slideshow demo