Slideshow

How to add section Slideshow to website

The Slideshow is a prominent section featuring dynamic images or content, usually at the top of the website. It’s designed to make a strong first impression, convey key messages, or highlight important content.

Demo of Slideshow on website

In the theme editor (Customize), Add section Slideshow.

How to configure layout section slideshow

Content Settings

Configure layout content for all items in the section

In the theme editor (Customize), click section Slideshow then locate Content Settings. Here you can make the necessary configurations.

Content Settings

Layout : Choose the layout of the content. You can choose the available layouts : Content Inside, Content On The Left , Content On The Right , Inside Container.
Content Vertical Align : Set vertical align for content.
Content Max Width (Px) : Set the given content's maximum width. Set value -1 to apply default settings from theme.
Min Height (Px) : Set the given content's min height. Set value -1 to apply default settings from theme.
Min Height Mobile (Px) : Set the given content's min height on mobile. Set value -1 to apply default settings from theme.
Fit To Screen : Turn on to display fit to screen height.
Container : Set content container.

Animation

Choose background image effect when next slider.

In the theme editor (Customize), click section Slideshow then locate Animation. Here you can make the necessary configurations.

Animation background settings

Slider Settings

Slider settings

Show Pagination : Show pagination for slider.
Show Navigation : Show navigation for slider.
Auto Height Enable : Turn on to have the slider automatically adjust the height between items.
Loop Mode : Turn on so items loop endlessly.
Fade Enable : Turn on fade effect when next slider.
Center Mode : Turn on center mode.
Center padding : Fill padding for center mode.
Autoplay : Turn on to let the slider play automatically.
Autoplay Timeout : Set time automatically next slider.
Arrow Color : Configure color scheme for Arrow slider
Dot Color : Configure color scheme for Dot slider

How to add new slider item to slideshow section

Add new slider

Each block will be 1 item slider. You can add slider by adding block.

Add a new slider item to the section

We have all types of blocks available to suit your slider building needs.

Example of block type heading

Heading : - Present your content with eye-catching animations.

Example of block type Info Box

Info Box : - Present the information in the box.

Liquid : - You can use block type liquid to build custom slideshow layouts.

Configure background for each slider

In the theme editor (Customize), click section Slideshow, Click the block you want to edit, then locate Background Setting. Here you can make the necessary configurations.

Background Setting

Background color : Configure background color for slider.
Background image : Configure background image for slider.
Background Image Position : Configure background image position for slider.
Background Image Size : Configure background image size for slider.
Use Background Video : Turn it on if you want to use a video background. Enter your video url.
Background Video : Enter your video url. Allow format MP4, MOV and WEBM supported.

Animation content for each slider

In the theme editor (Customize), click section Slideshow, Click the block you want to edit, then locate Animation. Here you can make the necessary configurations.
Each type block will have different animation configurations suitable for the available fields.

Example of Animation for block