Slideshow
The slideshow allows multiple slides to display with images and optional text. This section allows you to add a slideshow in full width or grid. There are many options available similar to the slideshow, as you can see in the below screenshot:
You can add a slideshow section to display a carousel of images on a page in your store.
View
Choose how the slideshow transitions between slides: • Normal – Standard slide transition. • Curtain – A curtain-style animation effect.
Height
Customization of the "Slide height" in the Slideshow section is as follows:
Adapt to first slide
Fit screen
Small
Medium
Large
Arrow position
Customization of the "Arrow position" in the Slideshow section is as follows:
Inline
Bottom
Counter
Show or hide the slide counter to let visitors know which slide they’re on.
Counter color
Pick the color of the slide counter text to match your slideshow design.
Enable loop
Enabling loop will result in the slides continuously looping.
Auto rotation
Enable this checkbox to automatically play the images in the slideshow.
Enable product
Display product information (like product name, price) inside the slideshow slide.
Color scheme
In this section, you can change the background and foreground color of the section using the color scheme:
Scheme 1
Scheme 2
Scheme 3
Scheme 4
Scheme 5
Scheme 6
Scheme 7
Mobile layout
Content under images on mobile
By enabling this checkbox, you can view the slide content below the image in a mobile device.
Accessibility
Slideshow description Describe the slideshow for customers using screen readers.
Add Slide
To add slides to the slideshow section, click on the 'Add Slide'. There are many options available similar to the slideshow, as you can see in the below points and screenshot:
Slide
Image
Use "Image" to add the image to the slide. This image will be shown as the main banner background if no video is used.
Control image opacity
Using this settings, you have the ability to change the opacity of the image overlay. Modify this settings to increase or decrease the opacity level of the overlay on the slider image.
Video
Video
You can select a video to use instead of a slider image. The video will act as the main background for the slide.
URL
Paste a YouTube or Vimeo link if you want to embed a video directly into the slide. This allows for easy background video banners.
Heading
Caption
Use this to add a short headline or phrase to highlight your main message.
Text Enter text to display as a main heading of the slide. Size
Customization of the "Heading Size" in the slide is as follows:
Small
Medium
Large
Subheading
Enter the text you would like to display as a subtitle below the slide's main heading.
Product
Select a product to display within the slide.
Desktop content details
Normal slide placement
To change the position of the content on the normal slide, utilize the "Normal slide placement" setting in desktop device. Customization of the "Normal slide placement" in the Slideshow section is as follows:
Top left
Middle left
Bottom left
Curtain slide placement
If using the Curtain slideshow view, choose whether content appears at the Top, Middle, or Bottom of the slide.
Content alignment
Customization of "Desktop content alignment" in the slide is as follows:
Left
Center
Right
Color scheme
In this section, you have the option to modify the background and foreground colors of a slide's content container using the provided color scheme.
Scheme 1
Scheme 2
Scheme 3
Scheme 4
Scheme 5
Scheme 6
Button
Label
Use "Label" to add a label to the Button in the slide. Link
Use "Button link" to add a link to the Button in the slide.
Desktop content alignment
Customization of "Desktop content alignment" in desktop devices is as follows:
Left
Center
Right
Mobile layout
Image
If you want to add a separate image for mobile devices, add a image here.
Content alignment
Customization of "Mobile content alignment" is as follows:
Left
Center
Right
Last updated