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 |
---|---|
Layout | Choose between Full width (default) or Grid. Full width displays the slideshow the full width of the section, whereas Grid displays the slideshow with padding on either side. |
Slide height |
The height of the slideshow:
|
Slide height mobile |
The height of the slideshow:
|
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: 9 seconds. |
Enable pagination | Display the list of pagination dots. |
Enable navigation | Display pagination arrows. |
Preload first image | This is an important setting. If the section is put on the top page, the image of the first slide may be usually the Largest Contentful Paint(LCP) element. So it needs to preload to help display faster. Then your website will get a better score when testing it with Google Pagespeed Insights. |
Mobile layout |
|
Show content below images on mobile |
Check the box to show the content below images on mobile. |
Enable pagination | Display the list of pagination dots on mobile. |
Enable navigation | Display pagination arrows on mobile. |
Accessibility | Add a description for your slideshow for visually impaired customers. |
Image slide settings
Setting | Description |
---|---|
Image | Choose a static or dynamic image for your slideshow. Click Select Image to view your media library, or click the source button to connect a dynamic source. Once an image has been selected, clicking the Change button allows you to remove, change, or delete the image. |
Mobile image | Override the main image on mobile. |
Edit alt text |
Describe the slideshow image and provide context for customers using screen readers. |
Heading |
Optional heading text for the image. Text is added to each image individually. |
Heading size |
Choose between a small, medium (default), or large heading. |
Subheading | Optional subheading text for the image. Text is added to each image individually. |
Starting price label | The starting price is shown before the button. Add label for the starting price. |
Starting price | Set a value for the starting price. The value is interpreted in the base currency. If the customer views the store in another currency, the value will be converted to the corresponding currency. |
Button label | Enter text for a button, or leave it blank to hide the button entirely. |
Button link | The URL that you want the button to link to. Click the source button to add a dynamic source as a URL. |
Button style | Display the button as a solid button, outline button or a link. |
Desktop content position | The position of the content box over the image. Choose between top, middle, or bottom, and left, center, or right. Middle center is the default setting. |
Desktop content alignment | Aligns the text in the container. Choose between left, center (default), or right. |
Image width on desktop |
Display the image in full width or half width. Ignore this setting if the "Slide height" is set to "Adapt to first image". |
Image position on desktop | When the image is displayed in half width on desktop, you can set its position. |
Image overlay opacity | Use the slider to adjust the opacity of the image overlay. |
Colors | Set colors of text, background, and button. |
Mobile layout | Choose how the content will appear on a mobile device. Choose between left, center (default), or right. |
Comments
0 comments
Article is closed for comments.