Collection Carousel Section
Use this section to display products from a selected collection in a scrollable carousel format with customizable navigation controls and layout options.
Set up a Collection Carousel section
- Go to Customize theme
- In Theme editor, select the page where you want to add the Collection Carousel
- Select "Add section" → "Collection carousel"
Section Placement
This section cannot be added to header or footer areas.
Configuration Settings
| Setting name | Description |
|---|---|
| Featured Collection | Select the collection to display in the carousel |
| Navigation | Choose between "Labels" (text) or "Arrows" for carousel navigation. Default is arrows |
| Title display | Choose text size for collection title, from XS to 7XL, with responsive options. Default is "2XL / desktop 4XL" |
| Title alignment | Position the title left or right. Default is left |
| CTA text | Enter text for the call-to-action button. Default is "View All" |
| CTA display | Set the text size for CTA, from XS to 2XL. Default is "text-base" |
| CTA alignment | Position the CTA left or right. Default is right |
| Horizontal spacing size | Choose "None" or "Small" padding between products. Default is none |
| Section padding | Adjust top and bottom padding independently (0-100px). Default is 0px |
| Color Scheme | Select a color scheme to match your store's design |
| Indent section | Add left and right edge indentation when enabled. Default is false |
Best Practices
- Use arrows navigation for desktop, test on mobile
- Limit carousel to 6-8 products for best UX
- Add clear CTA to view full collection
- Test swipe gestures on mobile devices
Carousel vs Grid
Use carousels for featured or curated selections. For full collections, use the grid layout for better SEO and accessibility.
Product Display
The carousel will display up to 10 products from the selected collection. If the collection is empty, placeholder products will be shown in the theme editor.