Collection Page

The collection template displays a filterable, sortable grid of products from a collection.

Setup Order

1. Open the collection templateIn the theme editor top bar, switch to Collections and select the default collection template or a custom collection template.
2. Choose a populated collectionPreview a collection with products so card media, titles, prices, swatches, filters, and pagination can be reviewed together.
3. Configure the collection gridSet desktop columns, mobile columns, products per page, gap, page width, mobile edge-to-edge behavior, and section padding.
4. Review filters and sortingUse the Filter and sort block with Shopify storefront filters, then test applying, clearing, and combining filters.
5. Check product cardsReview product media, details, swatches, quick add, and empty-state copy on desktop and mobile.

Default Layout

The collection page features a product grid with built-in filtering and sorting controls.

Features

Product Grid

• Responsive columns (configurable for desktop and mobile)
• Customizable gap between product cards
• Product cards show image, title, price, badges, and variant swatches

Use Variant Pickers and Swatches for product-card swatch setup, global Swatches behavior, and Product page variant picker checks.

Filtering

Customers can filter products by:

• Color — Swatch-based color filters
• Size — Size option filters
• Price range — Min/max price slider
• Availability — In stock / out of stock
• Product type — Category filters
• Vendor — Brand/vendor filters

Filters use Shopify’s native Storefront Filtering API.

Filter Island

In the Filter and sort block, choose Island for Layout (desktop) to use the floating filter control. In 1.8.0, options wrap within compact columns, wrapped rows keep their dividers aligned, and focused controls stay clear of the title. Filter labels retain the configured text color at full strength; review that color against the drawer background. Show swatch labels also controls the labels beside swatches in the drawer.

Check long filter names, applying and clearing filters, and sorting on desktop and mobile. With a keyboard, choose a sort option, close with Escape, reopen the filter panel, and confirm sorting remains usable.

Sorting

Sort products by:

• Best selling
• Alphabetically (A–Z, Z–A)
• Price (low to high, high to low)
• Date (newest, oldest)

Pagination

Products are paginated with navigation controls at the bottom of the grid.

Section Settings