Slideshow with banner
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 with banner section to display a carousel of images on a page in your store.
Background color
Select color for section background color.
Layout
Customization of the "Layout" in the Slideshow with banner section is as follows:
Full width
Grid
Slide height
Customization of the "Slide height" in the Slideshow with banner section is as follows:
Adapt to first image
Small
Medium
Large
Carousel
Enable loop
Enabling loop will result in the slides continuously looping. Enable autoplay
Enable this checkbox to automatically rotate 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.
Navigation
Enable arrows
Enable this checkbox to show slider arrow in this section.
Background and text color
Select background and text color for slider navigation color.
Pagination
Style
Customization of the "Style" in the Slideshow with banner section is as follows:
None
Dots
Counter
Numbers
Background and text color
Select background and text color for slider pagination color.
Animation
Customization of the "Image behavior" in the Slideshow with banner section is as follows:
None
Ambient movement
By employing the Ambient movement feature, the slider images will exhibit motion.
Mobile layout
By enabling this checkbox, you can view the slide content below the image in a mobile device.
Accessibility
Describe the slideshow for customers using screen readers.
Add Slide
To add slides to the slideshow with banner section, click on the 'Add Block'. There are many blocks available in 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.
Badge
Enter the text you would like to display as a badge text before the slide's heading.
Uppercase badge
By enabling this, you can see uppercase badge.
Background and text color Select background and text color for badge pill. Text
Enter the text you would like to display as a subheading before the slide's heading.
Bold text
By enabling this checkbox, you can set subheading text with thickness.
Size
Customization of the "Subheading size" in the slide is as follows:
Small
Medium
Large
Heading
Text
Enter text to display as a title in the slide.
Size
Customization of the "Heading size" in the slide is as follows:
Small
Medium
Large
Description
Text
Enter the text you would like to display as a description of the slide.
Size
Customization of the "Description text size" in the slide is as follows:
Small
Medium
Large
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 button
Solid button
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 slide 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 can change the background and foreground color of a section using the color scheme. We provide total scheme 13. User can select any color scheme out of scheme 13.
Scheme 1
Scheme 2
Scheme 3
Scheme 4
Scheme 5
Scheme 6 and so on.
Mobile layout
Mobile content alignment
Customization of "Mobile content alignment" in mobile devices is as follows:
Left
Center
Right
Content position on bottom
Enable this checkbox to show the slide content below the image in mobile view. Not applicable when content is set below the image.
Add Bottom banner
Click on "Add block" you can see bottom banner block that banner show only for bottom in this slideshow banner.
Banner height
Customization of the "Banner height" in the Slideshow with banner section is as follows:
Adapt to first image
Small
Medium
Large
First banner
Image
Use "Image" to add the image to the bottom.
Clickable image
Applicable when the button label is not added. when button is not available at that time you can use clickable image so that redirect link available in image. --> Heading
Heading text
Enter text to display as a title in the slide.
Heading size
Customization of the "Heading size" in the slide is as follows:
Small
Medium
Large
--> Price
Text Enter text to display as a text in the price part.
Price Enter price number to that banner. Price color
Select color to show price color highlighted. --> 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 slide 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 can change the background and foreground color of a section using the color scheme. We provide total scheme 13. User can select any color scheme out of scheme 13.
Scheme 1
Scheme 2
Scheme 3
Scheme 4
Scheme 5
Scheme 6 and so on.
Mobile layout
Mobile content alignment
Customization of "Mobile content alignment" in mobile devices is as follows:
Left
Center
Right
Content position on bottom
Enable this checkbox to show the slide content below the image in mobile view. Not applicable when content is set below the image.
Second banner
Image
Use "Image" to add the image to the bottom.
Clickable image
Applicable when the button label is not added. when button is not available at that time you can use clickable image so that redirect link available in image. --> Heading
Heading text
Enter text to display as a title in the slide.
Heading size
Customization of the "Heading size" in the slide is as follows:
Small
Medium
Large
--> Price
Text Enter text to display as a text in the price part.
Price Enter price number to that banner. Price color
Select color to show price color highlighted. --> 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 slide 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 can change the background and foreground color of a section using the color scheme. We provide total scheme 13. User can select any color scheme out of scheme 13.
Scheme 1
Scheme 2
Scheme 3
Scheme 4
Scheme 5
Scheme 6 and so on.
Mobile layout
Mobile content alignment
Customization of "Mobile content alignment" in mobile devices is as follows:
Left
Center
Right
Content position on bottom
Enable this checkbox to show the slide content below the image in mobile view. Not applicable when content is set below the image.
Add Right banner
Click on "Add block" you can see right 2 banner block that banner show only for right in this slideshow banner.
First banner
Image
Use "Image" to add the image to the bottom. Banner height
Customization of the "Banner height" in the Slideshow with banner section is as follows:
Adapt to first image
Small
Medium
Large
Clickable image
Applicable when the button label is not added. when button is not available at that time you can use clickable image so that redirect link available in image. --> Heading
Heading text
Enter text to display as a title in the slide.
Heading size
Customization of the "Heading size" in the slide is as follows:
Small
Medium
Large
--> Price
Text Enter text to display as a text in the price part.
Price Enter price number to that banner. Price color
Select color to show price color highlighted. --> 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 slide 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 can change the background and foreground color of a section using the color scheme. We provide total scheme 13. User can select any color scheme out of scheme 13.
Scheme 1
Scheme 2
Scheme 3
Scheme 4
Scheme 5
Scheme 6 and so on.
Mobile layout
Mobile 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 slide is as follows:
Top left
Top center
Top right
Middle left
Middle center
Middle right
Bottom left
Bottom center
Bottom right
Content alignment
Customization of "Mobile content alignment" in mobile devices is as follows:
Left
Center
Right
Second banner
Image
Use "Image" to add the image to the bottom.
Banner height
Customization of the "Banner height" in the Slideshow with banner section is as follows:
Adapt to first image
Small
Medium
Large
Clickable image
Applicable when the button label is not added. when button is not available at that time you can use clickable image so that redirect link available in image. --> Heading
Heading text
Enter text to display as a title in the slide.
Heading size
Customization of the "Heading size" in the slide is as follows:
Small
Medium
Large
--> Price
Text Enter text to display as a text in the price part.
Price Enter price number to that banner. Price color
Select color to show price color highlighted. --> 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 slide 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 can change the background and foreground color of a section using the color scheme. We provide total scheme 13. User can select any color scheme out of scheme 13.
Scheme 1
Scheme 2
Scheme 3
Scheme 4
Scheme 5
Scheme 6 and so on.
Mobile layout
Mobile 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 slide is as follows:
Top left
Top center
Top right
Middle left
Middle center
Middle right
Bottom left
Bottom center
Bottom right
Content alignment
Customization of "Mobile content alignment" in mobile devices is as follows:
Left
Center
Right
Last updated