Collection Page

The collection page displays the products in a collection as a configurable grid, with faceted filtering, sorting, four pagination styles, and fully customizable product cards. This guide also covers the Collections list page (the landing page that shows all your collections) and the global theme settings that affect both.

Table of contents#

• Before you start
• Part 1 — Collection product grid

- SEO & grid layout - Filters & sorting - Desktop & mobile layout (spacing) - Colors - Product card content blocks - Promo tile block

• Part 2 — Collections list page
• Part 3 — Global settings that affect collections

- Pagination - Filter & sort design - Product card (global styling)

• How-to guides
• Best practices
• FAQ
• Troubleshooting

Before you start#

From your Shopify admin go to Online Store → Themes → Customize.

• Collection grid: open the template picker → choose Collection pages → select the Collection section.
• Collections list: open the template picker → choose Collections list.

Important
The collection template ships with no built-in banner/hero. The collection's title, description, and image are not shown automatically — they're included only as hidden SEO data (controlled by Enable Collection schema). To display a visible collection title or banner, add a section manually (e.g. an image banner or rich text) above the Collection section.

Part 1 — Collection product grid#

Select the Collection section in the Collection pages template.

SEO & grid layout#

Filters & sorting#

These controls are shared with the search results page — styling choices carry across both.

Desktop & mobile layout (spacing)#

Desktop layout

Mobile layout

Colors#

Set under Colors (light mode) and Colors (dark mode), organized by surface. Leave blank to inherit the theme.

Product card content blocks#

The product card is built from content blocks you can add, remove, and drag to reorder on each card. Each block controls one piece of card content.

The card's overall look (image ratio, hover effect, borders, add-to-cart placement, card colors) comes from the global Product card theme settings — see Part 3. The blocks below control which text/content appears on the card and its typography.

Price block detail

The Price block has the most options:

• Price / Compare-at price / Unit price — each has Size (Small/Medium/Large), Font weight (Normal/Medium/Semibold/Bold), and Text transform (Normal/Lowercase/Uppercase).
• Colors (light mode) — Price color, Sale price color, Unit price color.
• Colors (dark mode) — Price color, Sale price color, Unit price color.
• Show "from" price (default off) — prefix the price with "from" for products with multiple variants.
• Show compare-at price (default on) — show the original (struck-through) price on sale items.

Promo tile block#

A Promo tile is a promotional card you drop inside the product grid — it appears after the Nth product card (configurable), spanning one or more columns. Use it for a sale banner, a category callout, or an editorial block woven into the products.

Add it like any other block in the Collection section (Add block → Promo tile). Unlike the card content blocks, the promo tile has no limit, so you can add several and place each at a different position.

The tile is position-aware: if a shopper uses the layout switcher to change the number of columns, the tile re-aligns to a clean row so the grid never looks broken.

Part 2 — Collections list page#

Edit via the Collections list template. It shows all your collections as cards. (Section name: "Main Collection List".)

Layout settings#

Desktop layout#

Mobile layout#

Image loading settings#

Animation#

Background settings#

Media settings (when Background type = Media)#

Part 3 — Global settings that affect collections#

These live in Theme settings and apply everywhere products, pagination, and filters appear.

Pagination#

Theme settings → Pagination. Controls the look of page navigation (the collection section's Loading type controls the behavior).

Filter & sort design#

Theme settings → Filter & sort. Global styling for all filter UI.

General

Light mode / Dark mode colors — Heading label, Secondary text, Hint count, Dropdown background, Dropdown border, Divider, Item hover background, Item active background, Item hover text, Item active text, Active pill background, Active pill hover background. (Each mode ships with sensible defaults.)

Product card (global styling)#

Theme settings → Product card. Controls how every product card looks across the store (collections, search, featured products). Highlights:

Layout

Media

Add button

Alignment, Light mode, Dark mode — content alignment (Start/Center/End) and full light/dark color sets (background, text, icons, border, price, sale price) with sensible defaults.

The card-style settings interact with the per-card content blocks in Part 1: the global group sets the frame and media; the blocks set the content and typography.

How-to guides#

Set up product filters#

1. In Shopify admin, go to Settings → Search & Discovery → Filters and add filters (price, color, size, availability, etc.).
2. In the theme editor, open the Collection section → turn on Enable filtering and choose a Desktop filter placement and Mobile filter style. Save.

Add a title or banner above the product grid#

1. On the Collection pages template, click Add section above the Collection section.
2. Add an image banner, rich text, or heading section and set its content. Save.

(The grid alone does not show a collection title — see the note at the top.)

Switch to a "Load more" button or infinite scroll#

1. Open the Collection section → set Loading type to Load more button or Infinite scroll. Save.

Change how many products show per row#

1. Open the Collection section → set Columns on desktop, Columns on tablet, and Columns (mobile). Save.
2. Optionally keep Enable layout switcher on so shoppers can adjust it themselves.

Customize what appears on each product card#

1. Open the Collection section and expand the product card blocks.
2. Add/remove blocks (Vendor, Title, Price, Rating, etc.) and drag to reorder.
3. Adjust typography per block; set the overall card frame in Theme settings → Product card. Save.

Add a promotional tile inside the grid#

1. Open the Collection section → Add block → Promo tile.
2. Set Desktop position and Mobile position (the tile appears after that product number) and choose a Width (e.g. Full width) for each breakpoint.
3. Add media (image or video), heading/text, and up to two buttons; set alignment and colors. Save.
4. Need more than one? Add additional Promo tile blocks — there's no limit — and give each its own position.

Best practices#

• Add a banner section for branding and SEO context, since the grid has no built-in header.
• Keep cards clean. Title + Price (plus swatches and a rating) is usually enough; avoid enabling every block.
• Choose the right loading type. Pagination (AJAX) or Load more feel smooth without overwhelming; Infinite scroll suits discovery-led stores.
• Match desktop and mobile columns to your imagery. 3–4 desktop columns and 2 mobile columns work for most catalogs; use fewer for large, detailed images.
• Style filters once. Because filter/sort styling is shared with search, set it globally under Theme settings → Filter & sort and verify both pages.
• Use full-width promo tiles. When weaving a Promo tile into the grid, prefer Full width (or a span matching your column count) so it stays tidy as shoppers change columns with the layout switcher.

FAQ#

Why isn't my collection's title or description showing? The grid doesn't render them automatically (they're only structured data). Add a banner/heading section above the grid.

Where do I create filters? In Shopify admin under Settings → Search & Discovery → Filters. The theme controls only placement and styling.

What's the difference between *Loading type* and *Pagination mode*? Loading type (per section) controls behavior and has four options; Pagination mode (global) is the fallback and has fewer. The section setting wins.

How do I change the product card image shape? In Theme settings → Product card → Media → Media height (e.g. Square, Portrait, Landscape).

Can the same settings affect the search page? Yes — filter/sort styling and product-card styling are shared between collections and search.

Can I put a banner or promo inside the product grid? Yes — add a Promo tile block to the Collection section. It's inserted after a product number you choose (independent desktop and mobile positions and widths), and you can add multiple tiles.

Troubleshooting#

Filters aren't appearing. Confirm Enable filtering is on in the Collection section and that filters exist in Settings → Search & Discovery.

The grid shows the wrong number of columns. Check Columns on desktop/tablet/mobile in the Collection section. If shoppers can change it, the layout switcher may have been used — that's per-visitor and doesn't change your defaults.

Pagination style changes aren't visible. Pagination style is global (Theme settings → Pagination); pagination behavior is the section's Loading type. Adjust the right one.

Product cards look inconsistent across pages. Card framing/media/colors come from the global Product card settings; per-card content/typography comes from the Collection section blocks. Align both.

Collection card backgrounds/overlays aren't applying on the Collections list page. Confirm Background type is set to Color or Media, and (for media) that an image/video is uploaded and Enable overlay is configured as intended.