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.
Layout
Customization of the "Layout" in the Slideshow section is as follows:
Full width
Fluid
Container
Design type on desktop
Customization of the "Design type" in the Slideshow section is as follows:
Content beside the image
Content over the image
Slide height
Customization of the "Slide height" in the Slideshow section is as follows:
Adapt to first image
Small
Medium
Large
Image position on desktop
The Image position customization in the Slideshow section is as follows:
Left
Right
Block padding on desktop
Utilize this feature to add spacing between blocks.
Carousel
Pagination color scheme
In this section, you can change the background and foreground color of the pagination using the color scheme:
Scheme 1
Scheme 2
Scheme 3
Scheme 4
Scheme 5
Scheme 6
Scheme 7
Pagination style
The style of the slideshow navigation that appears below the images:
Dots
Line
Counter
Numbers
Arrows
Enable loop
Enabling loop will result in the slides continuously looping. Enable autoplay
Enable this checkbox to automatically play the images in the slideshow.
Autoplay interval
Use the bar to set the auto-rotate time of the slideshow. You can set a minimum of “3” seconds and a maximum of “9” seconds.
Animations
Image behavior Customization of the "Image behavior" in the Slideshow section is as follows:
None
Ambient movement
By employing the Ambient movement feature, the slider images will exhibit motion.
Mobile layout
Show content below 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.
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
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.
Mobile image
Use "Mobile image" to add the mobile image to the section. this is optional because it will take desktop image when mobile image will not be added.
Text animation
Enable text animation Enable this checkbox to show text animation this section. Text animation position Customization of the "Text animation position" in the Slideshow section is as follows:
Bottom to top
Left to right
Right to left
Heading
Text Enter text to display as a title in the section. Size
Customization of the "Size" in the slide is as follows:
Small
Medium
Large
Subheading
Text Enter the text you would like to display as a subtitle below the slide's title.
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.
Style
Customization of the "Button style" in the slide is as follows:
Link
Outline
Solid
Desktop content position
To change the position of the content on the slide, utilize the "Desktop content position" setting. Customization of the "Desktop content position" in the Slideshow section is as follows:
Top left
Top center
Top right
Middle left
Middle center
Middle right
Bottom left
Bottom center
Bottom right
Desktop content alignment
Customization of "Desktop content alignment" in desktop devices 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
Scheme 7
Mobile layout
Mobile content alignment
Customization of "Mobile content alignment" in mobile devices is as follows:
Left
Center
Right
Content position
To change the position of the content on the slide, utilize the "Mobile content position" setting. Customization of the "Mobile content position" in the Slideshow section is as follows:
Top
Middle
Bottom
Last updated