# Collection list slider

### Section overview

The Collection Slider section displays a horizontally scrollable carousel of collection cards, allowing merchants to showcase multiple collections in an engaging and space-efficient manner.

#### Common Use Cases

* Highlighting different product categories on the homepage
* Featuring seasonal or trending collections in a visually appealing way
* Creating a browsable overview of your store's catalog
* Combining collection cards with custom content blocks for promotional messaging

#### Usage Tips

* Select collections with visually consistent featured images for the most polished appearance
* Adjust card width settings to control how many collections appear on screen at once
* Consider enabling the split layout option for larger screens to keep heading content visible while scrolling
* Use content blocks strategically to add promotional messaging or calls-to-action between collections
* For mobile optimization, set card width mobile to 10/12 or 12/12 to ensure collections are properly visible

### Section Settings

| Setting              | Description                                                           |
| -------------------- | --------------------------------------------------------------------- |
| Collection           | Select which collections to display in the slider                     |
| Heading              | Add a title for the slider section                                    |
| Content              | Add descriptive text that appears above the slider                    |
| Button label         | Text for the optional button below the heading                        |
| Button url           | URL for the optional button                                           |
| Top spacing          | Amount of space above the section (0-300px)                           |
| Bottom spacing       | Amount of space below the section (0-300px)                           |
| Color scheme         | Background color theme for the section                                |
| Custom color         | Custom background color (when "Custom" is selected for color scheme)  |
| Text color           | Control whether text appears in light or dark mode                    |
| Border color         | Set the color of section borders                                      |
| Button color         | Style for the button below heading content                            |
| Enable color fade    | Makes the section influence the page background color as user scrolls |
| Border position      | Where borders appear around the section                               |
| Card width mobile    | Width of each card on mobile devices (1-12/12 grid)                   |
| Card width desktop   | Width of each card on desktop devices (1-12/12 grid)                  |
| X alignment          | Horizontal alignment of section heading content                       |
| Arrow alignment      | Horizontal alignment of slider navigation arrows                      |
| Arrow placement      | Vertical position of slider navigation arrows                         |
| Enable margin        | Add horizontal margins to the section                                 |
| Enable scroll margin | Add margins to the scrollable area                                    |
| Enable split         | Display heading and content next to the slider instead of above it    |
| Enable split heading | Split the heading into multiple lines                                 |
| Visibility           | Control which device types the section appears on                     |
| Auto scroll delay    | Time between automatic slide transitions (0 to disable)               |
| Enable arrows        | Show navigation arrows for the slider                                 |
| Enable indicators    | Show indicator dots for slider position                               |
| Enable scrollbar     | Show scrollbar for the slider                                         |

### Block Settings

#### Content Block

The Content block allows you to add custom text, images, or videos between collection cards in the slider. Limited to 20 blocks per section.

| Setting                  | Description                                        |
| ------------------------ | -------------------------------------------------- |
| Heading                  | Title text for the content block                   |
| Content                  | Rich text content for the block                    |
| Button label             | Text for the optional button                       |
| Url                      | URL for the button link                            |
| Image                    | Upload an image to display in the block            |
| Show image as background | Display the image as a background behind content   |
| Video                    | Upload or link a video to display                  |
| Enable autoplay          | Automatically play video when visible              |
| Enable mute toggle       | Show mute button on videos                         |
| Enable loop              | Continuously loop video playback                   |
| Minimum height           | Set minimum height for the content block           |
| Enable padding           | Add interior padding to the content block          |
| Color scheme             | Background color theme for the block               |
| Border color             | Set the border style for the block                 |
| Text color               | Control whether text appears in light or dark mode |
| Button color             | Style for the block's button                       |
| Enable gradient          | Add a gradient overlay to the block background     |
| Text position            | Place text above or below the image/video          |
| Y alignment              | Vertical alignment of content within the block     |
| X alignment              | Horizontal alignment of content within the block   |