What is the shoppable carousel section?
The Shoppable carousel section is ideal for spotlighting specific products or creating a “Shop the look” feature. Add images and link directly to products, or use hotspots to reveal mini product cards with a quick-buy.
The Shoppable carousel section can be used in multiple ways to enhance product discovery:
-
Product images with product links or interactive hotspots
Show product images that link directly to the product page or have a hotspot that reveals a mini card with product details and a quick-buy. The section could be used instead of a featured collection layout but has the advantage of being able to showcase products from a variety of collections. -
Lifestyle or “how-to” imagery with interactive hotspots
Add aspirational or instructional images with hotspot product cards. Setting up the shoppable carousel in this way encourages exploration and could be used to show real life examples of the product. Perfect for illustrating how to achieve a specific look. -
Image carousel
A purely visual carousel of images which could be placed on a page for social proof or to show alternative images.
How to set up the shoppable carousel section
The main Shoppable carousel settings control the styling of the carousel and the shape and size of the images used. Certain hotspot controls are also maintained here as they will apply to all the slides in the carousel. Use the Section background settings to blend the section into others to create a seamless flow down the page. Our Seamless sections guide explains more about this.
Steps
- Open the Theme Editor and add a Shoppable carousel section to your template.
- Set the Slide width on large screens to control the slide size.
- Choose a predominant Image aspect ratio. Images will be cropped to fit unless Natural is chosen.
- Select whether to Show product image in popups. This setting applies to all slides when using product hotspots.
- Under Heading add a Heading, choose the Size and Alignment.
- Under Style set a Color scheme for the section. These colors will be used for the Section background if it is set to Default.
-
Select a Section background. (See Seamless sections guide for more information)
The options available are:Default: Uses a color scheme
Color: Choose a custom Background color
Image: Upload a Background image
Simple gradient: Define the start and end colors, plus select the gradient style
Advanced gradient: Fully customize the gradient using the Color stop settings - Set the Hotspot animation (pulse) and Hotspot color.
How to set up slides and hotspots
The individual slide settings are used to add the images, product links and position the hotspots.
Steps
- Open the Theme Editor and add a Shoppable carousel section to your template.
- Within each individual Slide block, select a product. This will show the main product image on the slide.
- Add an additional image, if desired, using the image selector. This will replace the product image and could be a lifestyle or usage image.
- Choose whether to Add hotspot to image. Clicking the hotspot will open a product mini card.
- Set the hotspot Horizontal position and Vertical position.
Tip
Use the Shoppable carousel settings to control the Hotspot animation and Hotspot color. Check the color has sufficient contrast to stand out from the image.
FAQs
Why are my hotspots hard to see over my image?
The default hotspot color may not have sufficient contrast to stand out from the background image. Under Style use the color picker to select a color with greater contrast.
Why does my image appear low quality?
Image quality can also be controlled globally in Theme settings > Advanced > Image quality. Check this setting to ensure it is no set to Low (fastest page loading).
How do I add arrows to carousels in my store?
There are settings to control arrow visibility for carousels on larger screens under Theme settings > Design > Carousels.
How can I blend the section background into adjacent sections?
Our Seamless sections guide explains more about using the section background sections to blend section backgrounds together to create a seamless flow of content down the page.
How do I change the color of the product cards?
Product card colors are managed in Theme settings > Colors > Product card color scheme.
Can't find what you're looking for?
Our support staff are here to answer your queries, so don't hesitate to write to us!
Contact us