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:
|
Section spacing | Set the spacing of the section using the drop-down menu:
|
Slide height | The slide height of the slideshow:
|
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.
|
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. |