The slideshow section makes it possible for you to add a slider section anywhere within your theme. The slideshow section has 3 different layouts for your slides, which can be set up per slider!
​
To activate this section you first have to add the section to your page. This can be done in a few small steps.
​
1) Click on 'add section' which can be found in your left sidebar

2) Scroll down, or search for 'Slideshow', then click on 'Slideshow'
​

3) Done, your Slideshow section is added.
​

The general settings contains the settings for the styling and layout of the Slideshow section.
Simply click on the 'section' to open the settings.

On the right sidebar, the following settings will show

Width:
Select the width for the slideshow section, this can be full width or regular width.
The regular width will make it looked aligned in with the other sections.

Height:
Select the height for the slideshow section. you can also have a custom height in Xpert.
​
​Enable autoplay:
Check the box if you want the enable the autoplay function for the slides, so the slides will cycle automaticly.
​
​Seconds between slides:
If autoplay is enabled, you can set the seconds you want between the slides.

Show play / pause button:
Show a play/pause button, this will only show when autoplay is enabled.

Height:
Select the height for the slideshow section on mobile.

Bottom spacing desktop/mobile:

Set the spacing on the bottom for desktop and mobile.

That way you will get the amount of whitespace below the element you want. The default for desktop is 50px and the default for mobile is 30px.

By default, there is 1 images/banners added, you can edit them, remove them or add more.
​
​1. Editing the slides
To edit the slides you simply click on the block you want to edit in your sidebar on the left of your screen. In this case it will be 'Image banner'

After you clicked the block, on the right of your screen the following sidebar will open.

Image:
Upload the image you want to use for your slider image
​
​Layout:
As stated in the beginning, the section comes with 3 layouts.
​Background image:
Image will be the background of the slide, the text will show on top.
​Image left, content right:

The image will show on the left, your text and button show on the right.
​Image right, content left:
The image will show on the right, your text and button show on the left.

Image overlay opacity:
Want to show an colored overlay over the image? Set the opacity here.
This comes in handy when you use text over the banner image to make it easier to read. (only applies when using the 'background image' layout)
100% = full color
0% = no overlay
​
​Color scheme:
Select the color scheme for the overlay + text colors. You can select the color pallets here.

Video:
Select a video from your Shopify store and it will play on the page.

Content position:
Set the position of the content within the image (text + button)

Sub heading and sub heading position:
You can choose to have a sub heading and the other option help you to adjust it's size.
​
​Heading size:
Select the size of the heading from a range of small to extra large. When you choose for "Extra large", the size of the description will also be a bit larger than normal.

Heading:
Fill in the title of your banner. Don't want to show a title? Simply leave the field empty!
​
​Text:
Fill in the text for the banner. Don't want to show a description/text? Simply leave the field empty!
​

In Xpert you can have 2 buttons in a slide. Both button have same settings;

​Button label:
This text will show on the button, for example: 'View products'
​
​Link:
Enter a link for the button, for example to your products sale page.
​
​Show link instead of a button:
Check this box if you don't want a button to show, but only a clickable text.

You can now upload a different image/mobile optimized image for the mobile in each slide/banner.

2. How to remove a slide?
Do you have multiple slides, but want less? You can always remove the banners one by one to fit in your needs.
To remove the blocks you simply click on the block you want to remove in your sidebar on the left of your screen.

After you clicked the block, on the right of your screen the sidebar will open.
On the bottom left of this sidebar, the following button 'Remove block' shows.

Simply click on this button and your banner/image will be deleted.
​

3. How to add a more slides?
Do you want to use more sliders? That's possible, no worries!
To add blocks you simply click on the 'Add Slide' button in your sidebar on the left of your screen.