Collection and listing sections

Collection pages display product grids with filters and sorting. This chapter covers the four collection-related sections.

8.1 Collection page (collection template + section)

The collection page (/collections/{handle}) renders all products in a collection with Shopify’s native filtering and sorting. Bound to the collection template (cannot be used elsewhere).

The collection section is monolithic — unlike featured-collection (§8.2) which uses a product-grid block, the collection section renders the grid + filter UI + toolbar inline. Settings are organised into seven subheaders.

Toolbar

Setting	What it does
🔧 Enable filtering	✅ Default on. When on, renders the filter UI sourced from Shopify’s collection.filters API. Visitors get one filter group per filter type (boolean / range / list / color swatches). Filter types and values are configured in Shopify Admin → Online Store → Search & Discovery → Filters; this toggle just controls whether the UI shows.
🔧 Enable sorting	✅ Default on. When on, renders the Sort-by dropdown. The available sort options are Shopify’s defaults (Featured / Best selling / Title A–Z / Title Z–A / Price ↑ / Price ↓ / Date ↑ / Date ↓) — no theme-level customisation of the list.

Product grid

Setting	What it does
🔧 Products per page	Range 8–48, step 4. ✅ Default 24. Drives Shopify’s paginate size — once filled, the section uses Shopify’s standard numbered pagination.
🔧 Columns	Range 2–5, step 1. ✅ Default 4. Number of columns at desktop width; mobile auto-stacks.
🔧 Image aspect ratio	Natural (use image’s own ratio) / Square / Portrait (✅ default — 3:4) / Landscape (4:3).
🔧 Show vendor	✅ Default off. Shows the product vendor under the title on each card.
🔧 Show color swatches (show_swatches)	✅ Default on. Inline color-variant swatches under the product name on each card. Off = no swatch dots.

Card style

These control every product card in the grid. They override the theme-wide product-card defaults set in Layout → Product cards (§2.9) only for this section instance.

Setting	What it does
🔧 Card surface	Solid (✅ default — uses scheme bg) / Transparent / Glass.
🔧 Tint glass with accent (card_glass_tint)	Tints the glass cards with the scheme accent (strength = Effects → Glass tint intensity). ✅ Default off. Only visible when Card surface = Glass.
🔧 Card corner radius	Range 0–32px, step 2. ✅ Default 8px.
🔧 Card padding	Range 0–24px, step 2. ✅ Default 0.
🔧 Image corner radius	Range 0–32px, step 2. ✅ Default 0. Separate from card radius — useful for “rounded image inside square card” patterns.
🔧 Card glow	✅ Default off. Scaled by global Section glow intensity.
🔧 Card shadow	✅ Default off. Scaled by global Section shadow intensity.

Effects + chrome

Standard v7 chrome — Color scheme (use global + dark/light pair), Surface (transparent bg, glass, glass tint, glow, shadow), Layout (full width + mobile, radius), Padding (desktop + custom mobile padding), Visibility (hide on desktop/mobile). See chapter §2 and §3.

The collection page can also paint a custom card scheme independently of the section background: turn on card_use_custom_scheme and pick card_color_scheme (single scheme, no dark/light pair) — only the product cards switch scheme; the section background and grid gaps keep the section’s own scheme.

Blocks accepted

heading · text · button · image · video · icon · group · spacer · divider · recently-viewed-grid · wishlist-grid · collection-banner · @app

The collection-banner block is the one that gives you the optional banner hero at the top of the page (image + title + description). The recently-viewed-grid and wishlist-grid blocks let you append cross-sells below the main collection grid. @app slot accepts compatible app blocks.

What’s NOT in the section (so you can stop looking)

• No layout-mode select (sidebar vs drawer vs none). The filter UI renders as a left-aligned panel on desktop and a drawer on mobile — not configurable in this version.
• No sort customisation. Shopify’s full sort list shows when sorting is enabled; no per-option toggles.
• No pagination style picker. Pagination is always Shopify’s numbered links once products_per_page is full. Infinite-scroll / Load-more are not built-in (use a third-party app for that).
• No breadcrumbs setting. If you want a breadcrumb trail, add a heading or custom block above the grid.
• No empty-state custom text. Empty filter results show Shopify’s default empty list (the page itself isn’t broken; visitors just see nothing in the grid).

App compatibility

The section emits these data-attributes for filter/search apps to hook onto:

• data-collection-id="{{ collection.id }}" on the section wrapper
• data-collection-handle="{{ collection.handle }}"
• data-product-grid on the grid wrapper
• data-product-card on each card

Consumed by Search & Discovery (Boost AI, Searchanise, Smart Search & Filter), InstaSearch, Globo Filter & Search, and similar apps. See chapter 16 — App compatibility.

8.2 Featured Collection (featured-collection)

A “featured collection” section for use on any template. The section is a thin @theme wrapper — the actual grid configuration (collection picker, columns, card surface, etc.) lives on the product-grid BLOCK that you drop inside.

Available on: any template except the password page (disabled_on: password).

Section-specific settings

Setting	What it does
🔧 Content alignment	Left / Center (✅ default) / Right — applies to heading/text blocks beside the grid.
🔧 Content gap	Range 0–80px, step 4. ✅ Default 24px. Gap between stacked blocks (heading on top of grid, CTA below, etc.).

Effects + chrome + color scheme

Standard v7 chrome, plus section_padding_x (range 0–80px, step 4, default 24) for the horizontal inner padding.

Blocks accepted

product-grid · heading · text · button · image · video · icon · group · spacer · divider · recently-viewed-grid · wishlist-grid

Add a product-grid block as the centrepiece — that’s where collection picker / max products / columns / card surface settings live. Wrap with heading/text blocks for the section title and description.

Common use

• Home page — “New arrivals”, “Best sellers”, “Sale” featured grids (one section per collection theme)
• Product page — “Related” or “From the same collection” callouts (use this instead of related-products §7.5 when you want curatorial control over which products show)
• Article page — “Shop this article” callouts for inline product promotion

8.3 Collection List (collection-list)

A grid of collection cards (each card represents one collection, not products). Like Featured Collection, the section is a thin @theme wrapper — the actual grid + card configuration lives on the collection-grid BLOCK.

Available on: any template (no enabled_on restriction).

Section-specific settings

Setting	What it does
🔧 Content alignment	Left / Center (✅ default) / Right.
🔧 Content gap	Range 0–80px, step 4. ✅ Default 24px.

Effects + chrome + color scheme

Standard v7 chrome.

Blocks accepted

collection-grid · heading · text · button · image · video · icon · group · spacer · divider · recently-viewed-grid · wishlist-grid

Add a collection-grid block for the grid itself — that’s where columns, layout (grid vs carousel), title position (below/overlay), card style settings live. See §8.7 for the block’s full reference.

Common use

• Home page — “Shop by category” navigation grid
• Mega-menu — collection-cards inside a navigation megamenu (place the section inside the megamenu structure)

8.4 List Collections (collections template + section)

The /collections template (no specific collection) displays all collections in a grid. This is the index page for stores that want a “view all collections” page. Bound to the list-collections template.

Unlike §8.3 Collection List which is block-first, this section is monolithic — header, grid configuration, card style all live as section settings (similar to §8.1 Collection page).

Header

Setting	What it does
🔧 Show heading	✅ Default on.
🔧 Custom heading	Free text. If blank, defaults to the localised “Collections” string.
🔧 Heading size	H1 / H2 (✅ default) / H3.
🔧 Heading alignment	Left (✅ default) / Center / Right.
🔧 Show product count	✅ Default off. When on, displays the total number of collections under the heading.

Product grid

Setting	What it does
🔧 Columns	Range 2–5, step 1. ✅ Default 3.
🔧 Image aspect ratio	Natural / Square (✅ default) / Portrait / Landscape / 16:9.
🔧 Show description	✅ Default off. Renders the collection’s description under its title.
🔧 Show product count per collection	✅ Default off. Renders “N products” subtitle under each card.

Card style

Setting	What it does
🔧 Title position	Below (✅ default) or Overlay (title rendered over the image with a gradient scrim).
🔧 Overlay intensity	Range 0–90%, step 5. ✅ Default 55%. Visible when title position = overlay. Scrim darkness.
🔧 Hide card border	✅ Default off.
🔧 Card surface	Solid (✅ default) / Transparent / Glass.
🔧 Card glass tint	✅ Default off. When on AND card surface = glass, the glass takes an accent tint (uses --ne-glass-bg-tinted — see §2.2).
🔧 Card corner radius	Range 0–32px, step 2. ✅ Default 12px.
🔧 Card padding	Range 0–24px, step 2. ✅ Default 0.
🔧 Image corner radius	Range 0–32px, step 2. ✅ Default 0.
🔧 Card glow	✅ Default off.
🔧 Card shadow	✅ Default off.

Effects + chrome

Standard v7 chrome — Color scheme, Surface (transparent/glass/glow/shadow), Layout (full width + radius), Padding (desktop + custom mobile padding), Visibility.

Blocks accepted

heading · text · button · image · video · icon · group · spacer · divider · recently-viewed-grid · wishlist-grid · @app

Note: there’s no Sort setting and no “show empty collections” toggle. Shopify lists all collections in manual order; if you want a different order, reorder them in Shopify Admin → Collections.

8.5 Product Grid block (product-grid)

The grid block used inside Featured Collection (§8.2). 29 settings configure the data source, layout, card content, card style, and color scheme.

Data source

Setting	What it does
🔧 Collection	Collection picker — which collection’s products to show.
🔧 Products to show	Range 2–24, step 1. ✅ Default 8.

Layout

Setting	What it does
🔧 Layout	Grid (✅ default) or Carousel (single-row horizontal scroll).
🔧 Columns	Range 2–6, step 1. ✅ Default 4.
🔧 Columns (mobile)	1 or 2 (✅ default).
🔧 Gap	Range 4–40px, step 4. ✅ Default 16px.
🔧 Arrow position	Below (✅ default) or On media (overlay arrows over images). Carousel mode only.
🔧 Arrow icon	Chevron (✅ default) / Arrow / Caret.
🔧 Arrow shape	Circle (✅ default) / Rounded / Square / Plain.

Card content

Setting	What it does
🔧 Image ratio	Natural (✅ default) / Square / Portrait (3:4) / Landscape (4:3). Only 4 options — no named 4:5 / 2:3 / 16:9 ratios.
🔧 Title lines	Range 0–4, step 1. ✅ Default 2. Titles clamp with ellipsis. 0 = unlimited.
🔧 Title font role	Inherit (✅ default) / Body / Subheading / Heading / Accent.
🔧 Title bold	✅ Default off.
🔧 Title italic	✅ Default off.
🔧 Title-price gap	Range 0–32px, step 2. ✅ Default 8px.
🔧 Show vendor	✅ Default off.
🔧 Show secondary image on hover	✅ Default on.
🔧 Show swatches	✅ Default on. Inline color swatches under product name.
🔧 Enable quick view	✅ Default on. Quick-view button on hover.
🔧 Enable add to cart	✅ Default off. Quick-add button. Single-variant adds directly; multi-variant opens variant-picker popup.

There is no separate “Show price” toggle — price always renders. No “Show wishlist heart” toggle here — heart visibility is controlled at theme-level via Theme settings → Wishlist (§2.10).

Card style

Setting	What it does
🔧 Card radius	Range 0–48px, step 2. ✅ Default 12px.
🔧 Image radius	Range 0–48px, step 2. ✅ Default 0.
🔧 Card padding	Range 0–24px, step 2. ✅ Default 0.
🔧 Card surface	Solid (✅ default) / Transparent / Glass.
🔧 Tint glass with accent (card_glass_tint)	Tints the glass cards with the scheme accent (strength = Effects → Glass tint intensity). ✅ Default off. Visible when Card surface is Solid or Glass (any non-transparent surface).
🔧 Card glow	✅ Default off.
🔧 Card shadow	✅ Default off.

There is no “Card hover effect” select (Lift/Zoom/Tilt/Glow-pulse) at this block — those modifiers are bento-tile (§9.2) territory. Product cards have a fixed gentle lift+ shadow on hover when card_glow or card_shadow is enabled.

Color scheme

Setting	What it does
🔧 Use global scheme	✅ Default on. When off, exposes a per-block color-scheme picker.
🔧 Color scheme	Visible when use_global_scheme is off. ✅ Default Scheme 1.

Quick add (multi-variant popup)

When a product has multiple variants and Enable add to cart is on, clicking “Add to cart” opens a small popup overlay on the card with the variant picker (radio buttons or pills). Visitor picks variant → clicks ATC → cart updates → popup closes.

⚠️ For products with > 4 options (size + color + material + extra), the popup becomes cramped. Either disable quick-add for such products (rare) or rely on Quick View (chapter 9), which has the full variant picker UI.

8.6 Collection Banner block (collection-banner)

A hero-style banner that sits at the top of a collection or search results page. Defaults to the collection’s image and title (or the search query as title); both can be overridden per-block.

Available inside the Collection page section (8.1) and Search page section (11.4).

Settings — image

Setting	What it does
🔧 Image	Banner image. Defaults to collection.image (set in Shopify Admin → Collections → image). Override per-block when collection has no image set or you want a different one.
🔧 Height	Compact / Medium (✅ default) / Large / Cover (full viewport).
🔧 Parallax	✅ Default off. Background-attachment fixed — image stays put as content scrolls over it (desktop only).

Settings — text

Setting	What it does
🔧 Heading	Override the heading. Empty = use collection title (or search query).
🔧 Heading size	H1 (✅ default) / H2 / H3.
🔧 Description	Rich-text. Override the description. Empty = use collection description from Shopify Admin.
🔧 Text alignment	Left / Center (✅ default) / Right.
🔧 Vertical position	Top / Center (✅ default) / Bottom. Where the text sits within the banner height.
🔧 Text color	✅ Default #ffffff (white). Custom color picker.

Settings — overlay

Setting	What it does
🔧 Overlay color	✅ Default #000000 (black). Tint over the image.
🔧 Overlay opacity	Range 0–90%, step 5. ✅ Default 30%. Darken for text readability.

When to use

• ✅ Collection landing pages where you want a hero feel above the product grid
• ✅ Search results with branded backdrop (default uses no image — set one for editorial searches)
• ⚠️ For non-banner collection-pages (minimal, designer-y, no hero), simply don’t add a Collection Banner block. The Collection section works fine without it.

8.7 Collection Grid block (collection-grid)

A grid of collection cards — used inside the Collection List section (8.3). Each card features the collection’s image + title + (optional) product count.

This block is similar to Product Grid but for collections instead of products.

Settings — layout

Setting	What it does
🔧 Layout	Grid (✅ default) or Carousel (single-row horizontal scroll).
🔧 Columns	Range 2–5, step 1. ✅ Default 3.
🔧 Columns (mobile)	1 (✅ default) or 2.
🔧 Gap	Range 4–48px, step 4. ✅ Default 16px.

Settings — card content

Setting	What it does
🔧 Image ratio	Square / Portrait (✅ default — 3:4) / Tall / Landscape / Wide.
🔧 Title position	Below (✅ default) or Overlay (over image, with gradient scrim).
🔧 Overlay intensity	Range 0–100%, step 5. ✅ Default 50%. Visible when title position = Overlay.
🔧 Text alignment	Left (✅ default) / Center / Right.

Settings — card style

Setting	What it does
🔧 Card background	Solid (✅ default) or Transparent. Note: the schema has two related settings — card_background (legacy, solid/transparent) AND card_surface (newer, solid/transparent/glass). The newer card_surface is the one to use.
🔧 Card radius	Range 0–48px, step 2. ✅ Default 12px.
🔧 Image radius	Range 0–48px, step 2. ✅ Default 0.
🔧 Card padding	Range 0–24px, step 2. ✅ Default 0.
🔧 Card surface	Solid (✅ default) / Transparent / Glass.
🔧 Tint glass with accent (card_glass_tint)	Tints the glass cards with the scheme accent (strength = Effects → Glass tint intensity). ✅ Default off. Only visible when Card surface = Glass.
🔧 Card glow	✅ Default off.
🔧 Card shadow	✅ Default off.

Settings — carousel arrows (when Layout = Carousel)

Setting	What it does
🔧 Arrow position	Below (✅ default) or On media (overlay on the card image). No “Outside” option in the current schema.
🔧 Arrow icon	Chevron (✅ default) / Arrow / Caret.
🔧 Arrow shape	Circle (✅ default) / Rounded / Square / Plain.

Settings — color scheme

Standard pattern: Use global color scheme (✅ default on) + Color scheme picker + dark/light pair (when use_global is off).

Accepted child blocks

collection-card only. Each card represents one collection.

Collection card block (collection-card)

A single collection card inside the collection-grid (above).

Setting	What it does
🔧 Collection	Collection picker.
🔧 Label override	Override the collection title (empty = use collection’s actual title).
🔧 Link override	URL picker. Override the collection page link.
🔧 Image override	Image picker. Override the collection’s image.
🔧 Show count	✅ Default off. Show “(N products)” next to or below the title.
🔧 Use custom color scheme	✅ Default off. When on, exposes scheme + dark/light pair for this single card.

When to use

• ✅ “Shop by category” navigation grids on the home page (Collection List section with this Collection Grid block inside)
• ✅ Sub-collection navigation on a parent collection page
• ✅ Footer-area “Browse by collection” carousel (Layout = carousel, 4–6 collections)

Next

Chapter 9 — Premium signature sections — Hotspot Image, Bento Grid, Quick View, Sticky Product Bar.