Collection page

The collection page is where customers browse the products in a collection — filtering by attributes, sorting results, and navigating through the catalog. It is built from two sections: a Collection banner at the top displaying the collection title, description, and optional image, and a Product grid below with filters, sorting, and the product listing.

Editing the collection page

Collection banner

The collection banner displays the collection title and, optionally, the collection description and image. When an image is present, the banner uses a side-by-side layout with the image next to the text. Without an image, it displays as a text-only header.

Image

• Show image — toggle the collection image on or off.
• Image — override the collection's default image with a custom one. If left empty, the collection image set in the Shopify admin is used.
• Full width — stretch the banner edge to edge.
• Image width — control the width of the image relative to the banner (50–150%).
• Image size — choose an aspect ratio: Original, Custom height, Max height, Portrait tall (2:3), Portrait (3:4), Square, Landscape (4:3), Landscape wide (3:2), or Landscape wider (16:9).
• Image height — set a specific height in pixels (240–960 px). Visible when Image size is set to Custom height or Max height.

Content

• Heading size — controls the size of the collection title, from XS to 3XL.
• Show description — toggle the collection description on or off.
• Description size — Large, Medium, or Small. Visible when the description is enabled.
• Text alignment — Left, Center, or Two columns. Defaults to Left when a collection image is displayed.
• Show breadcrumbs — display breadcrumb navigation above the collection title.

Mobile layout

• Image size — override the desktop image size for mobile, or choose Same as desktop to keep it consistent.
• Image height — set a mobile-specific height. Visible when the mobile image size is set to Custom height or Max height.

Product grid

The product grid displays the collection's products with optional filters and sorting controls. A sidebar with filters appears on the left on desktop, or in a full-screen modal on mobile.

Grid layout

• Products per row — how many products appear per row on desktop (2–5).
• Products per row (mobile) — 1 or 2 products per row on mobile.
• Products per page — the number of products loaded per page (6–50).
• Include collection URL — when enabled, product links include the collection path (e.g., /collections/summer/products/shirt), so breadcrumbs on the product page show the full trail (e.g., Home > Collection > Product) instead of just Home > Product.

View mode

Customers can switch between a grid and list view using the view mode toggle. Their preference is remembered across sessions.

• Show view mode selector — show or hide the grid/list toggle.
• Default view mode — choose whether the page loads in Grid or List view by default.

Pagination

Two pagination styles are available:

• Load more (default) — a "Load more" button with a progress bar showing how many products remain.
• Classic — numbered pages with previous/next arrows.

Filtering and sorting

Filters appear in a sidebar on desktop and a full-screen modal on mobile. Sort options are displayed as a dropdown above the product grid. Both use Shopify's native filtering and sorting system — the available filters and sort options are determined by your collection settings in the Shopify admin.

• Show filters — toggle the filter sidebar on or off.
• Default open filters — how many filter groups are expanded by default (0–5).
• Show filter match count — display the number of matching products next to each filter value.
• Show filter values with no matches — show filter values that would return zero results.
• Show selected filter type — prefix active filter badges with the filter label (e.g., "Color: Red" instead of just "Red").
• Enable color swatches — display color filters as visual swatches instead of text checkboxes. See Color swatches for setup details.
• Show sort by — toggle the sort dropdown on or off.
• Show results count — display the total number of products in the collection.

Subcollections

The product grid can display a row of subcollection links above the products, helping customers navigate between related collections. See Subcollections for setup instructions.

• Show subcollections — toggle the subcollection row on or off.
• Subcollections — manually select which collections to display. If left empty, the theme uses the subcollections metafield assigned to the collection.
• Alignment — Auto (matches the banner's text alignment), Left, or Center.

Promotion cards

You can insert promotional image cards into the product grid to highlight sales, new arrivals, or other campaigns. Promotion cards are added as blocks within the Product grid section and appear at a configurable position in the grid. See Promotion cards for details.

• Hide promotion cards when filtering — automatically hide promotion cards when customers are actively filtering results.

Colors

Both sections have independent color settings:

Collection banner:

• Background / Text / Heading — override the default page colors for the banner area.

Product grid:

• Background / Text — override the default page colors for the grid area.
• Product card / Product card text — override colors for product cards within this collection.

The active filter badge colors are configured globally in Theme settings.

Spacing

The Collection banner section supports custom spacing:

• Enable Custom spacing to control the top and bottom padding of the banner section independently.