# Collection

### Section overview

The main collection section renders collection template content with controls for spacing, background media, borders, and responsive visibility. It is the core container for collection grid and filter-driven experiences.

#### Common use cases

* Building the primary collection page layout.
* Managing spacing and color styles for collection listings.
* Supporting filter and pagination patterns inside a single section wrapper.
* Applying responsive display behavior for desktop and mobile collection views.

#### Usage tips

* Start from preset values, then tune spacing and gap based on card density.
* Use optional background media only when product readability remains strong.
* Keep border and color settings consistent with neighboring sections.
* Validate mobile filter interactions after any layout changes.

### Section settings

| Setting                          | Description                                                 |
| -------------------------------- | ----------------------------------------------------------- |
| Enable background image or video | Turns on background media rendering for the section.        |
| Image background desktop         | Background image used on desktop.                           |
| Image background mobile          | Optional background image override for mobile.              |
| Video background                 | Optional background video source.                           |
| Show video on mobile             | Enables background video playback on mobile devices.        |
| Show entire image                | Displays full image rather than cropping to fill.           |
| Top spacing                      | Adds top padding to the section container.                  |
| Bottom spacing                   | Adds bottom padding to the section container.               |
| Minimum height                   | Sets a minimum section height.                              |
| Gap size                         | Controls spacing between child layout elements.             |
| Color scheme                     | Sets section background and text color treatment.           |
| Color border                     | Sets section border color style.                            |
| Border position                  | Controls where borders appear.                              |
| Vertical alignment               | Aligns content vertically within the section.               |
| Enable margin                    | Applies global horizontal margin settings.                  |
| Enable header overlap            | Allows section to overlap the header when enabled globally. |
| Scroll snap align                | Applies scroll snap alignment when enabled globally.        |
| Visibility                       | Controls device visibility (all, mobile, or desktop).       |

### Block settings

This section is limited to one private layout block:

* `_layout__collection` (limit: 1)