Skip to content
Collection list slider
Section overview
The Collection list slider is a customizable horizontal slider that showcases different product collections through cards. It provides an interactive way for users to browse through various product categories.
Common Use Cases
- Highlight different product categories on your homepage
- Showcase featured or seasonal collections
- Create a visually appealing navigation for your store's main product lines
- Display curated collections alongside custom content blocks
Usage Tips
- Keep the number of collections reasonable to prevent overwhelming users
- Use consistent imagery across collection cards for a cohesive look
- Consider mobile display when setting card widths - cards that are too wide on mobile may create a poor user experience
- Use the custom content block to introduce the collections or provide context
- For better performance, optimize collection images before uploading
Section Settings
| Setting | Description |
|---|---|
| Collection | Select the collections to display in the slider |
| Heading | Main heading for the section |
| Content | Text content to display below the heading |
| Button label | Text to display on the button |
| Button URL | URL to navigate to when button is clicked |
| Top spacing | Amount of space above the section (in pixels) |
| Bottom spacing | Amount of space below the section (in pixels) |
| Color scheme | Background and text color theme for the section |
| Border color | Color of the section border |
| Button color | Style and color of the button |
| Border position | Position of the border (top, bottom, both, or none) |
| Size | Width of the section content |
| X alignment | Horizontal alignment of section content |
| Arrow alignment | Horizontal alignment of slider navigation arrows |
| Card width mobile | Width of cards on mobile devices (in 12ths) |
| Card width desktop | Width of cards on desktop devices (in 12ths) |
| Enable margin | Whether to add horizontal margin to the section |
| Enable split | Whether to split the header and content into separate columns |
| Visibility | Control whether section appears on all devices, only mobile, or only desktop |
| Enable arrows | Show navigation arrows for the slider |
| Enable indicators | Show indicator dots for the slider |
| Enable scrollbar | Show a scrollbar for the slider |
Block Settings
Content
The Content block allows you to add a custom content card to the beginning of the collection slider, which can include text, images, or video.
Block limit: 1
| Setting | Description |
|---|---|
| Heading | Title text for the content block |
| Content | Rich text content for the block |
| Button label | Text to display on the button |
| URL | Link destination when the content is clicked |
| Image | Main image to display in the content block |
| Image background | Background image for the content block |
| Video | Video to display in the content block |
| Enable autoplay | Automatically play video when visible |
| Enable mute toggle | Show mute/unmute button for video |
| Enable loop | Continuously loop the video |
| Minimum height | Minimum height of the content block (in pixels) |
| Enable padding | Add padding inside the content block |
| Color scheme | Background and text color theme for the block |
| Text color | Force text to be light or dark, regardless of background |
| Border color | Color of the border around the content block |
| Button color | Style and color of the button |
| Enable gradient | Apply a gradient overlay to the block background |
| Y alignment | Vertical alignment of content within the block |
| X alignment | Horizontal alignment of content within the block |
| Text position | Position of text relative to the image (above or below) |