githubEdit

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)

Last updated

Was this helpful?