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