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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.brickspacelab.com/paper/sections/products-and-collections/collection-list-slider.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.