# 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)          |