Slideshow

Slideshow section allows you to display multiple banners within one section. There are 4 tabs to settings for this section: General, Layout, Controller, Content, Accessibility.

In the General tab, select Enable large heading if you use the slideshow as a hero section. When turning this on, all heading in the Slideshow section will have the headline’s font size.

You also can select the Overlay Opacity for all slides in the section. The Overlay Opacity can be adjusted from 0% to 90%.

slideshow

In the Layout tab, the section has 2 options to show 70% or full screen height based on your need, which is reflected in the Height dropdown selector. By default, the banner section will be set at 70% screen height for highest quality.

slideshow

For mobile devices, the height will always set to 100%.

In the Controller tab, you can select to show pagination number, navigation or enable autoplay for the slideshow. These options are enabled by default.

The waiting time before autoplay can be set by dragging the Change Slides Every bar below. The autoplay delay time on each time is set at 5 seconds; however, you can change it from 3 to 10 seconds at Autoplay Delay slider to match with content on your slides. Make sure to consider text content and images in each slide to give an appropriate time for customers to consume all the important details without pausing. It’s recommended not to show too many slides in a short time to maintain customer experience in browsing.

slideshow

In the Content tab, information on the slideshow section can be shown at the center, left center or left bottom of the section area, which can be changed at Content Position dropdown selector. The content information is placed at the center of the slideshow banner by default to catch the most attention of customers. Other options (Left Bottom or Left Center) would be more suitable in case a merchant has an important message in the background image that needs to be consumed effectively.

  • Center position:

slideshow

  • Left bottom position:
  • Left bottom position

slideshow

  • Left center position

slideshow

In Accessibility, click in the placeholder to change the Slideshow description.

slideshow

SlidesClick to copy 2222

By default, the Slideshow section comes with 3 slides. To add more slides in this section, click on Add Slide. To remove the unwanted slide, click on the slide, then choose Remove Block at Block Settings. The maximum slides for this section is 5 slides.

To adjust for each slide, click on the slide and go to the Settings. You can change the content in the slide in the Text tab with Subheading, Heading and Description.

slideshow

In the Image card, click on the Select image button to upload the background image and mobile background image. The recommended size is 2880x1200px for background image and 750x1400px for mobile background image.

You can set background images separately for large screens and mobile. If you set the background image for the large screen and don’t upload the image for mobile screen, the mobile view will automatically inherit the image of the large screen. If you set the background image only for the mobile screen, the large screen will not inherit the image of the mobile screen.

slideshow

In the Buttons card, insert the button label name for the Primary and Secondary button to add buttons on the section. Click on the button link to add a direct link for them. If you want to remove one button, just delete the text in the button label.

Navigate this category