# Product slider

### Section overview

The Product slider section displays a customizable horizontal slider of products from a selected collection, optionally mixed with content blocks.

#### Common Use Cases

* Showcasing featured products on the homepage
* Highlighting new arrivals or seasonal collections
* Creating a "You may also like" section on product pages
* Building promotional sections that combine content and product cards

#### Usage Tips

* Select a collection with sufficient products to create a meaningful slider
* Consider mobile users by adjusting the card width settings appropriately
* Use content blocks strategically to introduce or explain the product collection
* For best visual results, use images of consistent dimensions throughout the collection

### Section Settings

| Setting            | Description                                                     |
| ------------------ | --------------------------------------------------------------- |
| Collection         | Select the collection to display products from                  |
| Total items        | Maximum number of products to display                           |
| Heading            | Main heading for the section                                    |
| Content            | Descriptive text for the section                                |
| Button label       | Text for the optional button                                    |
| Button url         | URL the 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 and text color combination for the section           |
| Color border       | Color style for section borders                                 |
| Color button       | Style and color for the section button                          |
| Border position    | Position of borders around the section                          |
| 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 product cards on mobile devices (as a fraction of 12)  |
| Card width desktop | Width of product cards on desktop devices (as a fraction of 12) |
| Enable margin      | Apply horizontal margin to the section                          |
| Enable split       | Split section into a sidebar (1/3) and content area (2/3)       |
| Visibility         | Control whether section appears on mobile, desktop, or both     |
| Enable arrows      | Show navigation arrows for the slider                           |
| Enable indicators  | Show position indicator dots for the slider                     |
| Enable scrollbar   | Show scrollbar for the slider                                   |

### Block Settings

#### Content Block

The Content block adds text, media, and button elements to the product slider. This can be used to introduce or complement the product collection.

Limit: 1 block

| Setting               | Description                                         |
| --------------------- | --------------------------------------------------- |
| Heading               | Block heading text                                  |
| Content               | Descriptive text for the block                      |
| Button label          | Text for the block's button                         |
| Button url            | URL the button links to                             |
| Image                 | Primary image to display                            |
| Image background      | Background image to display behind content          |
| Video                 | Video to display                                    |
| Enable video autoplay | Automatically play video when visible               |
| Enable mute button    | Show a button to toggle video sound                 |
| Enable video loop     | Continuously loop the video                         |
| Minimum height        | Minimum height for the block (in pixels)            |
| Enable padding        | Apply padding around block content                  |
| Color scheme          | Background and text color combination for the block |
| Color text            | Override text color setting                         |
| Color border          | Border color style for the block                    |
| Color button          | Style and color for the block button                |
| Enable gradient       | Apply a gradient effect to the background           |
| Y alignment           | Vertical alignment of content within the block      |
| X alignment           | Horizontal alignment of content within the block    |
| Text position         | Position text above or below the media              |