Skip to main content
Build your brand and increase sales with a premium ecommerce experience.

Banjo sections: Slideshow

Updated

Overview

You can add a slideshow section to display a carousel of up to 5 images on a page in your store.

Section settings

Setting Description
Section width Set the width of the section using the drop-down menu:
  • Grid
  • Full width
  • Full width no gap
Section spacing Set the spacing of the section using the drop-down menu:
  • Small
  • Medium
  • Large
Visible when the Section width setting is set to Grid.
Slide height The slide height of the slideshow:
  • Adapt to first image
  • Small
  • Medium
  • Large
CONTROLS  
Show navigation dots Checked to show navigation dots.
Show navigation arrows Checked to show navigation arrows.
Color Set the color of the controls.
AUTOPLAY  
Auto-rotate slides Check this box to automatically rotate through the images in the slideshow. If this box is not checked, then the slideshow displays a static image until the customer manually advances the slideshow.
Change slides every Use the bar to set the auto-rotate time of the slideshow. Minimum: 3 seconds, maximum: 10 seconds.
ACCESSIBILITY  
Slideshow description Describe the slideshow for customers using screen readers.

Image slide settings

The image slide supports one or two images, and a text box with buttons.

Setting Description
DESKTOP IMAGE  
Image Static image for your slideshow. Click Select Image to view your media library, or click the Change button to change or remove the image.
Edit alt text Describe the slideshow image and provide context for customers using screen readers.
Image width Set the width of the image. Defaults to 50%.
Image overlay opacity Adds an overlay to the banner images. Use the slider to set the opacity of the overlay. Defaults to 0%.
Image position Set the position of the image using the drop-down menu, visible when the ‘Desktop logo’ setting is set to Left.
  • Left
  • Right
MOBILE IMAGE  
Image Static image for your slideshow. Click Select Image to view your media library, or click the Change button to change or remove the image.
Edit alt text Describe the slideshow image and provide context for customers using screen readers.
Image overlay opacity Adds an overlay to the banner images. Use the slider to set the opacity of the overlay. Defaults to 0%.
CONTENT  
Content position The position of the content over the image. Choose between middle, or bottom, and left, center, or right. Middle center is the default setting.
Subheading Optional subheading text for the image. Text is added to each image individually.
Heading Optional heading text for the image. Text is added to each image individually.
Heading size The font size of the heading: Small Medium(Default) Large
Description Optional description text for the image. Text is added to each image individually.
Content width Set the width of the content. Defaults to 60%.
Text color desktop Set the text color of heading, subheading, description for desktop computers.
Text color mobile Set the text color of heading, subheading, description for mobile devices.
FIRST BUTTON  
Label Enter text for a button, or leave blank to hide the button entirely.
Link The URL that you want the button to link to
Style The style of the button. Choose from Primary, Outline and Underline.
SECONDARY BUTTON  
Label Enter text for a button, or leave blank to hide the button entirely.
Link The URL that you want the button to link to.
Style The style of the button. Choose from Primary, Outline and Underline.