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.
You also can select the Overlay Opacity for all slides in the section. The Overlay Opacity can be adjusted from 0% to 90%.
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.
For mobile devices, the height will always set to 100%.
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.
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:
-
Left bottom position:
- Left bottom position
- Left center position
In Accessibility, click in the placeholder to change the Slideshow description.
Slides
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.
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.
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.