We've added some cool new sections in Xclusive to make your Shopify store look good and modern. The slideshow section enables you to add a image slideshow making your store more interactive.
Here's a quick sneak peek:
How to add this section:
To add an slideshow section to your store;
Click on 'add section' which can be found in your left sidebar.
Scroll down, or search for 'slideshow', then click on 'Image collage'.
Done, your slideshow section is added.
General Settings:
The general section contain the settings for layout and spacing. To open the general settings click on the section:
Slideshow
Width:
Choose the width of this section from boxed width or full width.
Height:
Control the height of the section from Small, medium and Large.
Enable custom minimal height:
If you want a custom height check the custom minimal height box.
Custom minimal height:
Adjust the range slider to increase the minimal height of the section.
Enable autoplay:
Enable this setting to make the slideshow slide automaticly.
Seconds between slide:
Set the amount of seconds between every slide. We recommend using a minimum of 3 seconds.
Show play/pause button:
Enable to show a play/pause button on sliders where autoplay is enabled.
Mobile Layout
Height:
Set the height of the section for mobile devices
Spacing
Bottom spacing desktop/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.
Control the stacking order of sections:
Increase or decrease the z-index value to control the visual layering of sections, ensuring the desired display arrangement when using negative spacing.
When we increase the z-index, the section will overlap:
How to customize the slideshow?
By default, there is 1 image banner added, you can edit them, remove them or add more.
1. Editing the image banners:
To edit the blocks you simply click on the block you want to edit in your sidebar on the left of your screen.
After you clicked the block, on the right of your screen the following sidebar will open.
Image:
The section says it all, its an slideshow for images after all. Set your images here, for example a nice banner for a sale.
Layout:
Set the layout of the section. You can choose between 'image left, content right', 'image right, content left' or 'background image'
Image left, content right:
Image right, content left:
Background image:
Image width:
This only applies when Image left or image right is selected. You can set how wide the image should be in terms of this section. Default is 50%, so 50% width of the image, 50% width of the text.
Color scheme:
Select the color scheme for the content/background of the image
Video:
Do you prefer using a video instead of an image? You can select the video here.
Content position:
Set the position of your images/video
Each image banner has 2 headings: Primary and secondary in each banner you will see options to fill your desired headings and customize the font size for headings and choose the right font that works for you.
Below headings you can add description for the banners also.
First Button label:
This text will show on the first button, for example: 'Shop now'
First button link:
Enter a link for the button, for example to your products sale page.
First button color scheme:
Set the color scheme of the first button
Show link instead of button:
Check this box if you don't want a button to show, but only a clickable text.
Second button label:
This text will show on the second button, for example: 'Shop now'
Second button link:
Enter a link for the button, for example to your products sale page.
Second button color scheme:
Set the color scheme of the second button
Show link instead of button:
Check this box if you don't want a button to show, but only a clickable text.
Shop the look feature
With the "Shop the Look" feature, you can tag each banner within the slideshow, linking it directly to the corresponding products in your Shopify store. Customers can simply hover click on the cart icon to view more details, including products variants, their prices, and the option to add them to their cart. This streamlined process eliminates the need for customers to manually search for each item separately, providing a seamless and efficient shopping experience.
Enable 'Shop the look' feature:
Check this box to enable the shop the look feature within that banner.
Products:
You can select up to 12 products to show in the shop the look box.
Color scheme:
You can change the icon color scheme using the option.
Position:
Set the position of the add to cart button to left or right.
Custom text styling
Custom text styling allows you to overwrite the standard typography settings. This way you can customize al your banners in a great and unique way! Enable the option and let your creativity go!
Mobile layout
Mobile image:
Set the image for mobile, this setting is optional but great if your image looks good on desktop, but is cut off in mobile.