Skip to content
Collection list slider
Section overview
The Collection Slider section displays a horizontal scrollable slider of product collections, allowing customers to browse through different collection categories with a visually appealing interface.
Common use cases
- Showcasing different product categories on the homepage
- Highlighting seasonal or featured collections
- Creating a navigation element for browsing product categories
- Promoting special collections alongside custom content cards
Usage tips
- Use clear, high-quality images for each collection to improve visual appeal
- Keep the number of collections reasonable to avoid overwhelming customers
- Add a descriptive heading to help customers understand the purpose of the slider
- Consider adding a promotional card to highlight special offers or announcements
Best practices:
- Maintain consistent image dimensions across all collections for a polished look
- Use concise, descriptive titles for each collection
- Set appropriate card widths for mobile and desktop to ensure proper display
Common pitfalls to avoid:
- Adding too many collections, making it difficult for customers to navigate
- Using poor quality or inconsistent images
- Neglecting to configure responsive settings for mobile devices
Mobile responsiveness considerations:
- Adjust card width for mobile using the card_width_mobile setting
- Test the slider on different devices to ensure proper display and navigation
- Consider hiding complex content on mobile if it affects usability
Section settings
| Setting | Description |
|---|---|
| Collection | Select the collections to display in the slider |
| Heading | Set the heading text for the section |
| Content | Add descriptive text content for the section |
| Button label | Text to display on the section button |
| Button URL | URL for the section button link |
| Spacing top | Control the top padding of the section (0-300px) |
| Spacing bottom | Control the bottom padding of the section (0-300px) |
| Color scheme | Choose the color scheme for the section background and text |
| Border color | Select the color for section borders |
| Button color | Choose the style and color for buttons in the section |
| Border position | Set the position of borders (none, top, bottom, or both) |
| Horizontal alignment | Control how content aligns horizontally (left, center, right) |
| Card width mobile | Set the width of cards on mobile devices (fraction of 12) |
| Card width desktop | Set the width of cards on desktop devices (fraction of 12) |
| Visibility | Control section visibility across devices (all, mobile only, desktop only) |
| Enable collection size count | Show or hide the number of products in each collection |
Block settings
Card
The Card block allows you to add a promotional content card to the collection slider, which can feature text, images, or video to highlight special offers or announcements.
Block limit: 1
| Setting | Description |
|---|---|
| URL | Set the link destination when the card is clicked |
| Heading | Add a title for the promotional card |
| Content | Add descriptive text content for the card |
| Button label | Text to display on the card's button |
| Image | Select the main image to display on the card |
| Background image | Choose a background image for the card |
| Video | Upload or select a video to display on the card |
| Enable autoplay | Automatically play video when it comes into view |
| Enable mute toggle | Show a button to toggle video sound on/off |
| Enable loop | Continuously loop the video playback |
| Background color scheme | Choose the color scheme for the card background and text |
| Border color | Select the color and visibility of card borders |
| Button color | Choose the style and color for the card's button |
| Column size | Set how many columns the card should span (1-4) |