Skip to content
Collection list slider
Section overview
The Collection Slider section displays a horizontally scrollable carousel of collection cards, allowing merchants to showcase multiple collections in an engaging and space-efficient manner.
Common Use Cases
- Highlighting different product categories on the homepage
- Featuring seasonal or trending collections in a visually appealing way
- Creating a browsable overview of your store's catalog
- Combining collection cards with custom content blocks for promotional messaging
Usage Tips
- Select collections with visually consistent featured images for the most polished appearance
- Adjust card width settings to control how many collections appear on screen at once
- Consider enabling the split layout option for larger screens to keep heading content visible while scrolling
- Use content blocks strategically to add promotional messaging or calls-to-action between collections
- For mobile optimization, set card width mobile to 10/12 or 12/12 to ensure collections are properly visible
Section Settings
| Setting | Description |
|---|---|
| Collection | Select which collections to display in the slider |
| Heading | Add a title for the slider section |
| Content | Add descriptive text that appears above the slider |
| Button label | Text for the optional button below the heading |
| Button url | URL for the optional button |
| Top spacing | Amount of space above the section (0-300px) |
| Bottom spacing | Amount of space below the section (0-300px) |
| Color scheme | Background color theme for the section |
| Custom color | Custom background color (when "Custom" is selected for color scheme) |
| Text color | Control whether text appears in light or dark mode |
| Border color | Set the color of section borders |
| Button color | Style for the button below heading content |
| Enable color fade | Makes the section influence the page background color as user scrolls |
| Border position | Where borders appear around the section |
| Card width mobile | Width of each card on mobile devices (1-12/12 grid) |
| Card width desktop | Width of each card on desktop devices (1-12/12 grid) |
| X alignment | Horizontal alignment of section heading content |
| Arrow alignment | Horizontal alignment of slider navigation arrows |
| Arrow placement | Vertical position of slider navigation arrows |
| Enable margin | Add horizontal margins to the section |
| Enable scroll margin | Add margins to the scrollable area |
| Enable split | Display heading and content next to the slider instead of above it |
| Enable split heading | Split the heading into multiple lines |
| Visibility | Control which device types the section appears on |
| Auto scroll delay | Time between automatic slide transitions (0 to disable) |
| Enable arrows | Show navigation arrows for the slider |
| Enable indicators | Show indicator dots for slider position |
| Enable scrollbar | Show scrollbar for the slider |
Block Settings
Content Block
The Content block allows you to add custom text, images, or videos between collection cards in the slider. Limited to 20 blocks per section.
| Setting | Description |
|---|---|
| Heading | Title text for the content block |
| Content | Rich text content for the block |
| Button label | Text for the optional button |
| Url | URL for the button link |
| Image | Upload an image to display in the block |
| Show image as background | Display the image as a background behind content |
| Video | Upload or link a video to display |
| Enable autoplay | Automatically play video when visible |
| Enable mute toggle | Show mute button on videos |
| Enable loop | Continuously loop video playback |
| Minimum height | Set minimum height for the content block |
| Enable padding | Add interior padding to the content block |
| Color scheme | Background color theme for the block |
| Border color | Set the border style for the block |
| Text color | Control whether text appears in light or dark mode |
| Button color | Style for the block's button |
| Enable gradient | Add a gradient overlay to the block background |
| Text position | Place text above or below the image/video |
| Y alignment | Vertical alignment of content within the block |
| X alignment | Horizontal alignment of content within the block |