Collection Page
The collection template displays a filterable, sortable grid of products from a collection.
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
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.
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
| Setting | Description |
|---|---|
| Products per page | Number of products shown per page. |
| Desktop columns | Grid columns on desktop. |
| Mobile columns | Grid columns on mobile. |
| Column gap | Horizontal spacing between products. |
| Row gap | Vertical spacing between product rows. |
| Section width | Page width or Full width. |
| Color scheme | Select a color scheme for the collection page. |
| Padding | Top and bottom padding. |