Collection List Section

The Collection List section showcases your Shopify collections with four distinct layout options and extensive customization controls.

Schema Location

File: sections/collection-list.liquid:72-887

Features

4 layout types: Grid, Carousel, Bento, Editorial
Collection list picker or automatic collection display
Mobile carousel option
Customizable card design
Navigation controls for carousel
Responsive column configuration

Settings

Collection Selection

collection_list

Select specific collections to displayNote: Leave empty to automatically populate with available collections

Layout Type

layout_type

select

default:"grid"

Display layout for collectionsOptions:

grid - Equal column grid
carousel - Horizontal scrollable
bento - Masonry-style layout (4 items max)
editorial - Magazine-style layout

carousel_on_mobile

checkbox

default:"false"

Enable carousel mode on mobile devicesVisible when: layout_type != 'carousel'

Grid & Carousel Settings

columns

range

default:"4"

Number of columns on desktopRange: 1-8, step 1
Visible when: layout_type == 'grid' or 'carousel'

mobile_columns

select

default:"2"

Number of columns on mobileOptions:

1 - Single column
2 - Two columns

Visible when: Grid layout without mobile carousel

mobile_card_size

select

default:"60cqw"

Card size on mobile for carouselOptions:

60cqw - ~1 column visible
44cqw - ~2 columns visible

Visible when: Carousel layout or mobile carousel enabled

columns_gap

range

default:"8"

Horizontal spacing between itemsRange: 0-100px, step 1
Visible when: Grid or carousel layout

rows_gap

range

default:"8"

Vertical spacing between rowsRange: 0-100px, step 1
Visible when: Grid layout

Bento Layout Settings

bento_gap

range

default:"8"

Gap between bento itemsRange: 0-100px, step 1
Visible when: layout_type == 'bento'

Editorial Layout Settings

max_collections

range

default:"4"

Maximum number of collections to showRange: 1-16, step 1
Visible when: layout_type == 'editorial'

icons_style

select

default:"arrow"

Navigation icon styleOptions:

arrow - Arrow icons
chevron - Chevron icons
arrows_large - Large arrows
chevron_large - Large chevrons
none - No navigation

Visible when: Carousel layout or mobile carousel enabled

icons_shape

select

default:"none"

Background shape for iconsOptions:

none - No background
circle - Circular background
square - Square background

Visible when: Icons enabled

Section Layout

section_width

select

default:"page-width"

Section container widthOptions:

page-width - Constrained width
full-width - Full viewport

gap

range

default:"12"

Gap between section elementsRange: 0-100px, step 1

color_scheme

default:"scheme-1"

Section color scheme

Padding

padding-block-start

range

default:"0"

Top paddingRange: 0-100px, step 1

padding-block-end

range

default:"0"

Bottom paddingRange: 0-100px, step 1

Supported Blocks

The section supports these block types:

@theme - All theme blocks
@app - App blocks
text - Text content
icon - Icon elements
image - Images
button - Buttons
video - Videos
group - Block containers
spacer - Spacing
_divider - Divider lines

Static Block: Collection Card

Type: _collection-card Each collection is rendered using this static block. Child Blocks:

_collection-card-image - Collection image
collection-title - Collection name

Settings:

placement - Title placement (on_image, below_image)
horizontal_alignment - Title alignment
vertical_alignment - Vertical position
inherit_color_scheme - Use section color scheme
border - Border style
border_radius - Corner radius

Implementation

Collection Loop Logic

{% raw %}
{% liquid
  if section.settings.collection_list != blank
    assign section_collections = section.settings.collection_list
    assign max_items = section.settings.collection_list.count
  elsif section.settings.layout_type == 'editorial'
    assign max_items = section.settings.max_collections
  elsif section.settings.layout_type == 'bento'
    assign max_items = 4
  elsif section.settings.layout_type == 'carousel'
    assign max_items = section.settings.columns | plus: 2
  elsif section.settings.layout_type == 'grid'
    assign max_items = section.settings.columns
  endif
%}
{% endraw %}

From collection-list.liquid:1-13

Collection Card Rendering

{% raw %}
{% for collection in section_collections limit: max_items %}
  <div class="resource-list__item">
    {% content_for 'block', type: '_collection-card', id: 'static-collection-card', closest.collection: collection %}
  </div>
{% endfor %}
{% endraw %}

From collection-list.liquid:46-49

Layout Types

1. Grid Layout

Best for: Equal importance collections

{
  "layout_type": "grid",
  "columns": 3,
  "mobile_columns": "2",
  "columns_gap": 8,
  "rows_gap": 8
}

2. Carousel Layout

Best for: Many collections, browsing

{
  "layout_type": "carousel",
  "columns": 3,
  "icons_style": "arrow",
  "icons_shape": "circle"
}

3. Bento Layout

Best for: Featured collections (max 4)

{
  "layout_type": "bento",
  "bento_gap": 8
}

Masonry-style layout with varying item sizes.

4. Editorial Layout

Best for: Magazine-style presentation

{
  "layout_type": "editorial",
  "max_collections": 4,
  "gap": 64
}

Large spacing, emphasis on imagery and content.

Presets

The section includes 4 presets:

1. Collections Bento

Category: Collections Settings:

Layout: bento
Bento gap: 8px
Section width: page-width
Padding: 24px top/bottom

Card Style:

Title on image with white background
Bottom-left alignment

2. Collections Grid

Category: Collections Settings:

Layout: grid
Columns: 3
Mobile columns: 2
Gaps: 8px
Padding: 48px top/bottom

Card Style:

Title on image with white background
Top-left alignment

3. Collections Carousel

Category: Collections Settings:

Layout: carousel
Columns: 3
Arrow navigation with circle background
Padding: 48px top/bottom

Card Style:

Title below image
Center alignment

4. Collections Editorial

Category: Collections Settings:

Layout: editorial
Max collections: 4
Large gap: 64px
Padding: 48px top/bottom

Card Style:

Title below image
H5 heading style
Increased spacing

Resource List Rendering

{% raw %}
{% render 'resource-list',
  list_items: list_items,
  list_items_array: list_items_array,
  settings: section.settings,
  carousel_ref: 'collectionList',
  slide_count: max_items,
  content_type: 'collections',
  test_id: 'collections-list-grid'
%}
{% endraw %}

From collection-list.liquid:61-69

Collection Card Image Settings

Image Ratio

{
  "type": "_collection-card-image",
  "settings": {
    "image_ratio": "adapt"
  }
}

Options: adapt, square, portrait, landscape

Title Styling

{
  "type": "collection-title",
  "settings": {
    "type_preset": "rte",
    "background": true,
    "background_color": "#ffffff",
    "padding-block-start": 4,
    "padding-block-end": 4,
    "padding-inline-start": 8,
    "padding-inline-end": 8
  }
}

Accessibility

Collection titles are semantic headings
Images include alt text from collection settings
Keyboard navigation for carousel
Touch/swipe support on mobile
Proper focus management

Performance Tips

Limit Collections: For optimal performance, limit displayed collections to 8-12 items in grid layouts.

Bento Layout: The bento layout is optimized for exactly 4 collections. More or fewer items may not display correctly.

Common Use Cases

Shop by Category

Use grid layout to show main product categories.

Featured Collections

Use bento layout to highlight 4 seasonal or promotional collections.

Collection Browser

Use carousel layout to showcase many collections without overwhelming the page.

Editorial Feature

Use editorial layout for storytelling-focused collection presentations.

Collection Links

Simple collection navigation

Product List

Display products from collections

Carousel

General content carousel

Sections

Blocks

Snippets

Web Components

​Schema Location

​Features

​Settings

​Collection Selection

​Layout Type

​Grid & Carousel Settings

​Bento Layout Settings

​Editorial Layout Settings

​Navigation (Carousel)

​Section Layout

​Padding

​Supported Blocks

​Static Block: Collection Card

​Implementation

​Collection Loop Logic

​Collection Card Rendering

​Layout Types

​1. Grid Layout

​2. Carousel Layout

​3. Bento Layout

​4. Editorial Layout

​Presets

​1. Collections Bento

​2. Collections Grid

​3. Collections Carousel

​4. Collections Editorial

​Resource List Rendering

​Collection Card Image Settings

​Image Ratio

​Title Styling

​Accessibility

​Performance Tips

​Common Use Cases

​Shop by Category

​Featured Collections

​Collection Browser

​Editorial Feature

​Related Sections

Collection Links

Product List

Carousel

Build docs developers (and LLMs) love

Schema Location

Features

Settings

Collection Selection

Layout Type

Grid & Carousel Settings

Bento Layout Settings

Editorial Layout Settings

Navigation (Carousel)

Section Layout

Padding

Supported Blocks

Static Block: Collection Card

Implementation

Collection Loop Logic

Collection Card Rendering

Layout Types

1. Grid Layout

2. Carousel Layout

3. Bento Layout

4. Editorial Layout

Presets

1. Collections Bento

2. Collections Grid

3. Collections Carousel

4. Collections Editorial

Resource List Rendering

Collection Card Image Settings

Image Ratio

Title Styling

Accessibility

Performance Tips

Common Use Cases

Shop by Category

Featured Collections

Collection Browser

Editorial Feature

Related Sections