A grid of collections with featured images, overlays, and typography controls. Twenty-seven settings across eight groups.
Merchant-addable
Yes
Settings
27
Block types
—
File
sections/collection-list.liquid
Used by default on: Collection list
Screenshots pending
Captures for Collection list at desktop and mobile widths are generated from a live store by
npm run shots. They appear here automatically once that has run.
When to use it
The list-collections template, and home pages that route by category.
Setting it up
Add the section and write the header under Section header.
Set columns under Layout settings and card behavior under Card settings.
Configure Overlay options if your collection images need a scrim behind the text for contrast.
Set Color schemes and Section spacing.
Where the content comes from
Shopify collection data owns titles and featured images.
Notes and cautions
If text sits over imagery, use the overlay controls rather than hoping the images are dark enough. Contrast has to hold on every image, not the one you tested.
Section settings
Every setting on the section itself, in the order it appears in the theme editor. Group headings
match the editor's own grouping.
Section header
HeadingText
ID
title
Default
Our Collections
Heading sizeDropdown
ID
title_size
Default
Medium
Smallh2
Mediumh1
Largeh0
SubheadingText
ID
subtitle
Default
Curated selections for your style
Subheading sizeDropdown
ID
subtitle_size
Default
Medium
Smallsmall
Mediummedium
Largelarge
Header alignmentDropdown
ID
header_alignment
Default
Left
Leftleft
Centercenter
Rightright
Layout settings
Layout styleDropdown
ID
layout_style
Default
Modern grid
Modern gridgrid
Split collagecollage
Interactive list with hoverinteractive-list
Slideshowcarousel
Number of columns on desktopSlider
Applies to Modern Grid layout only.
ID
columns_desktop
Default
3
Range
2 to 5, in steps of 1
Number of columns on mobileDropdown
Applies to Modern Grid layout only.
ID
columns_mobile
Default
1 column
1 column1
2 columns2
Collections per pageSlider
ID
pagination_limit
Default
12
Range
4 to 36, in steps of 2
Card settings
Card styleDropdown
ID
card_style
Default
Standard (content below)
Standard (content below)standard
Overlay (content over image)overlay
Image aspect ratioDropdown
ID
image_ratio
Default
Square (1:1)
Square (1:1)square
Portrait (3:4)portrait
Landscape (16:9)landscape
Adapt to imageadapt
Use custom corner radiusCheckbox
ID
use_custom_card_radius
Default
Off
Card border corner radius (px)Slider
ID
card_radius
Default
8
Range
0 to 30, in steps of 2
Shown when
use_custom_card_radius
Show product countCheckbox
ID
show_count
Default
On
Call-to-action textText
ID
cta_text
Default
Shop collection
Shop collection linkDropdown
Choose whether to show a separate "Shop collection" link, or let the collection title be the only link to the collection page.
ID
cta_link_display
Default
Show "Shop collection" link
Show "Shop collection" linkshow
Hide — title links to collection onlyhide
Typography
Content sizeDropdown
Scales the collection title and "Shop collection" link together, on desktop.
ID
content_size
Default
Medium
XSxs
Smalls
Mediumm
Largel
Extra largexl
2X large2xl
3X large3xl
Title font size — mobileDropdown
ID
title_font_size_mobile
Default
Medium
Smallsmall
Mediummedium
Largelarge
Extra largexl
2X large2xl
Link font size — mobileDropdown
ID
cta_font_size_mobile
Default
Medium
Smallsmall
Mediummedium
Largelarge
Extra largexl
2X large2xl
Overlay options
Content positionDropdown
Applies when Card Style is set to Overlay.
ID
overlay_content_position
Default
Bottom left
Top lefttop-left
Top centertop-center
Top righttop-right
Middle leftmiddle-left
Middle centermiddle-center
Middle rightmiddle-right
Bottom leftbottom-left
Bottom centerbottom-center
Bottom rightbottom-right
Overlay colorColor
ID
overlay_bg_color
Default
#000000
Overlay opacitySlider
ID
overlay_opacity
Default
40
Range
0 to 100, in steps of 5
Hover and badges
Enable product preview on hoverCheckbox
Shows the first product image when hovering over cards.
ID
enable_hover_product_image
Default
On
Show floating count badgeCheckbox
Displays the product count as a sleek pill-shaped badge on top of the card.