# Featured collection slider

### Section overview

The Collection Slider provides a responsive, horizontal scrolling display of collections with customizable cards and promotional content. It allows merchants to showcase multiple collections in an engaging slider format.

#### Common use cases

* Highlighting featured product categories on the homepage
* Showcasing seasonal or promotional collections
* Creating a visual navigation system for store categories
* Displaying curated collections with supporting promotional content

#### Usage tips

* Keep the number of collections reasonable (4-6) to prevent overwhelming customers
* Use consistent imagery across collections for a cohesive appearance
* Customize card width settings for optimal display on both mobile and desktop devices
* Consider adding a promotional card block to provide context or encourage browsing

Mobile responsiveness considerations:

* Adjust card width for mobile using the dedicated mobile width setting
* Preview your slider on mobile devices to ensure readability
* Consider hiding complex slider content on mobile if needed using the visibility settings

### Section settings

| Setting              | Description                                                         |
| -------------------- | ------------------------------------------------------------------- |
| Collection           | Select collections to display in the slider                         |
| Heading              | Main heading for the section                                        |
| Content              | Rich text content to display alongside the heading                  |
| Button label         | Text to display on the section's call-to-action button              |
| Button URL           | URL for the section's call-to-action button                         |
| Spacing top          | Amount of padding above the section (0-300px)                       |
| Spacing bottom       | Amount of padding below the section (0-300px)                       |
| Color scheme         | Background and text color theme for the section                     |
| Border color         | Color of section borders                                            |
| Button color         | Style and color theme for buttons                                   |
| Border position      | Position of borders around the section                              |
| Horizontal alignment | Alignment of content within the section                             |
| Card width mobile    | Width of cards on mobile devices (6-12 out of 12 columns)           |
| Card width desktop   | Width of cards on desktop devices (1-12 out of 12 columns)          |
| Visibility           | Control section visibility on different device types                |
| Show collection size | Enable/disable displaying the number of products in each collection |

### Block settings

#### Card

This block allows you to add a promotional content card to the slider that can include images, text, and video content. Limited to 1 block per section.

| Setting          | Description                                  |
| ---------------- | -------------------------------------------- |
| URL              | Link for the card when clicked               |
| Heading          | Title text for the card                      |
| Content          | Rich text content for the card               |
| Button label     | Text for the card's call-to-action button    |
| Image            | Main image for the card                      |
| Background image | Background image for the card                |
| Video            | Video for the card                           |
| Auto-play video  | Enable/disable automatic video playback      |
| Show mute button | Enable/disable video mute toggle button      |
| Loop video       | Enable/disable video looping                 |
| Background color | Background and text color theme for the card |
| Border color     | Color and style of card borders              |
| Button color     | Style and color theme for the card's button  |
| Column size      | Width of the card in grid columns (1-4)      |