# Collection slider

### Section overview

The Collection slider section allows merchants to showcase products from a selected collection in an interactive horizontal slider format with customizable appearance and behavior.

#### Common use cases

* Highlight featured products or bestsellers on the homepage
* Display related products within collection or product pages
* Create seasonal or promotional product showcases
* Combine product recommendations with custom content blocks

#### Usage tips

* Choose appropriate card widths for both mobile and desktop to ensure products are displayed attractively across devices
* Consider enabling split layout for sections with longer headings or descriptions to prevent overcrowding
* Use the auto-scroll feature sparingly to avoid frustrating users who are trying to browse at their own pace
* For mobile, select wider card widths (8/12 or higher) to ensure products are easily viewable on smaller screens

### Section settings

| Setting              | Description                                                                |
| -------------------- | -------------------------------------------------------------------------- |
| Collection           | Select which product collection to display in the slider                   |
| Products count       | Maximum number of products to display                                      |
| Heading              | Main section heading text                                                  |
| Content              | Rich text area for section description                                     |
| Button label         | Text to display on the section button                                      |
| Button url           | URL the section button links to                                            |
| Top spacing          | Amount of padding above the section (in pixels)                            |
| Bottom spacing       | Amount of padding below the section (in pixels)                            |
| Color scheme         | Background color theme for the section                                     |
| Custom color         | Custom background color (when color scheme is set to custom)               |
| Text color           | Force text to display as light or dark, or use default based on background |
| Border color         | Color style for section borders                                            |
| Button color         | Style and color for the section button                                     |
| Enable color fade    | Allow section to change page background color when scrolled into view      |
| Border position      | Position of decorative borders around the section                          |
| Card width mobile    | Width of product cards on mobile devices (in 12ths)                        |
| Card width desktop   | Width of product cards on desktop devices (in 12ths)                       |
| X alignment          | Horizontal alignment of section content                                    |
| Arrow alignment      | Horizontal alignment of slider navigation arrows                           |
| Arrow placement      | Vertical position of slider navigation arrows                              |
| Enable margin        | Add horizontal margin to section                                           |
| Enable scroll margin | Add margin to scrollable area                                              |
| Enable split         | Split section into two columns with heading on left and content on right   |
| Enable split heading | Split the heading across two lines                                         |
| Visibility           | Control which device types the section appears on                          |
| Auto scroll delay    | Time between automatic slide transitions (in seconds)                      |
| Enable arrows        | Show navigation arrows for the slider                                      |
| Enable indicators    | Show indicator dots for slider position                                    |
| Enable scrollbar     | Show scrollbar for slider navigation                                       |

### Block settings

#### Content

The content block allows for adding custom promotional content alongside products in the slider.

* Block limit: 1

| Setting                  | Description                                                                |
| ------------------------ | -------------------------------------------------------------------------- |
| Heading                  | Block heading text                                                         |
| Content                  | Rich text area for block content                                           |
| Button label             | Text to display on the block button                                        |
| Url                      | URL the block button links to                                              |
| Image                    | Image to display in the block                                              |
| Show image as background | Display the selected image as a background instead of inline               |
| Video                    | Video to display in the block                                              |
| Enable autoplay          | Automatically play video when visible                                      |
| Enable mute toggle       | Show button to toggle video sound on/off                                   |
| Enable loop              | Continuously loop video playback                                           |
| Minimum height           | Minimum height of the block (in pixels)                                    |
| Enable padding           | Add padding inside the block                                               |
| Color scheme             | Background color theme for the block                                       |
| Border color             | Color style for block borders                                              |
| Text color               | Force text to display as light or dark, or use default based on background |
| Button color             | Style and color for the block button                                       |
| Enable gradient          | Apply a gradient effect to the block background                            |
| Text position            | Position of text relative to media (above or below)                        |
| Y alignment              | Vertical alignment of block content                                        |
| X alignment              | Horizontal alignment of block content                                      |