You can display several visual assets on a single module as a carousel. This module presents the user with a visual asset similar to a banner, and allows them to click through to view others images listed; each can link through to products or pages on the site or external links.
---
How to set up
Add Module
Add a banner type module. The setup for a carousel will be mostly the same as for a banner.
Upload Image
The carousel is shown with an aspect ratio of 4:1 – to keep sizing consistent across all images in the carousel – so we would recommend uploading image content with dimensions: 4,000 × 1,000 px. We transcode images to smaller sizes and select the most appropriate resolution to display on the store depending on user device. On mobile we switch to an aspect ratio of 2:1, so that the image can be displayed at an appropriate size for the device. This means the image will be cropped in from the sides, so keep the focus of the image and any text in the centre.
Set a Link URL. This is where the image will link to when clicked.
Upload More Images
With only one image, the module will display as a normal banner. After adding several, the module will display as several as banner stacked on top of each other.
Set as Carousel
To set as a carousel, add a Custom Class.
Module > More > Advanced Settings > Custom Classes
Add the class: carousel
This will change the module to display as a carousel / slider.
---
Recommendations
It is recommended that you use five, or fewer, frames to keep the content focussed.
Avoid using text on images, where possible, as this will appear smaller on mobile devices and may not be legible.
Keep branding consistent with the site design so that the user doesn't consider the content advertising and skip over it.
Be aware that content in the second, third and subsequent positions are a lot less likely to be viewed and clicked on, so the item listed first will receive a lot more interaction.
Note
The carousel module does not auto-advance between images; the user must click to navigate to the next or previous image. This is done to avoid distraction from other elements on the page and causing annoyance to the user, as well as encouraging active engagement with the content.
It is currently only possible to have one carousel per page, as having multiple means they interfere with each other.