Collection list page
The section on the collections listing page — the page at /collections that shows every collection in your store. It ships on the list-collections template, but can be added to any template except the header and footer groups.
Settings
Width
Page — Keeps the content within the page width set in your theme settings. Full — Stretches the content across the full browser width, with a small space at the edges.
Alignment
Horizontal alignment of the section content.
Gap — Desktop / Mobile
Space between the heading and the collection grid.
Color scheme
Color scheme for the section.
Padding
Outer spacing: top / bottom, with independent mobile values via Custom for mobile.
Available Blocks
Heading
The page title above the grid.
Text
The heading content.
Size
Heading 1–6.
HTML tag
Semantic tag rendered (Paragraph, H1–H6). Use headings in order for SEO.
Animation
Entrance effect (Fade, Scale, Slide, Rotate words) played on scroll, with an optional Delay. Shown when block animations are enabled in theme settings.
Collection list
The grid of collection cards.
Collections per page
How many collections to show before pagination.
Custom collections
Show a hand-picked list instead of every collection.
Desktop columns / Mobile columns
Number of cards per row — 2–6 on desktop, 1–2 on mobile.
Gap — Horizontal / Vertical
Spacing between cards and rows, with independent mobile values.
Collection card
Sits inside the list and controls how every card looks.
Ratio
Crop ratio of the collection image.
Placement
Whether the content sits below the image or over it.
Position
Where the content sits when placed over the image.
Content alignment
Horizontal alignment of the card content.
Overlay / Overlay color
A color layer over the image, to keep text legible.
Content gap — Desktop / Mobile
Spacing between the card's title and product count.
Border thickness
Width of the card outline.
Corner radius
Rounding of the card corners, with a Custom corner radius value when set to Custom.
Shadow
Drop-shadow depth.
Type
Inherit the section's color scheme, or apply a separate Color scheme.
Content padding
Inner spacing on all four sides, with independent mobile values via Custom for mobile.
Each card holds three blocks:
Title
Show product count
Display the number of products beside the collection name.
Size
Heading 1–6.
HTML tag
Semantic tag rendered (Paragraph, H1–H6).
Product count font / font size
Typography for the count.
Padding
Outer spacing: top / bottom, with independent mobile values via Custom for mobile.
Description
Source
Description — the collection description from your admin. Product count — the number of products instead.
Text limit
Truncate to 1–3 lines, or 5–20 words.
Size
Text size — Extra small → Double extra large.
Padding
Outer spacing: top / bottom, with independent mobile values via Custom for mobile.
Button
Label
Button text.
Style
Primary, Secondary, Outline, Subtle, or Text.
Show icon
Adds an icon, with Icon, Icon position, and Icon size (plus Custom icon size when set to Custom).
Height — Desktop / Mobile
Button height per device.
Padding
Outer spacing: top / bottom, with independent mobile values via Custom for mobile.
Pagination
How shoppers move through collections beyond the first page.
Type
Pages — numbered links. Load more — a button that appends the next page. Infinite — loads automatically as the shopper scrolls.
Style
Button style for Load more — Primary, Secondary, Outline, or Text.
Height
Button height — Inherit, or Extra small → Extra large.
Result summary
Show a "showing X of Y" line above the control.
Padding
Outer spacing: top / bottom, with independent mobile values via Custom for mobile.
Last updated