Shopify themes and design
Shopify collection page design
Collection pages are where shoppers compare. They scan product cards, narrow the range with filters and decide which products deserve a closer look. A collection page that makes comparison easy sends better-qualified visitors to product pages.
This page explains how to design Shopify collection pages: what product cards should show, how to choose filters, when to add a collection introduction and how to handle large ranges on phones.
Illustrative diagram
- Title and short introduction
- Filters — based on consistent data
- Sort order
- Product card — image, name, price, key difference
- Product grid — consistent crops
- Load more or pages
Product cards built for comparison
Each product card should show what a shopper needs to decide whether to click: a clear image, the product name, the price and the one or two details that distinguish it from its neighbours, such as available colours or a key size. Cards that look identical except for the photo force shoppers to open every product to compare.
Consistent image crops matter more on collection pages than anywhere else. Mixed backgrounds and sizes make a grid look untidy and hard to scan.
Choosing filters by how shoppers decide
| Product type | Useful filters | Usually unnecessary |
|---|---|---|
| Clothing | Size, colour, fit, price | Vendor, if you sell one brand |
| Furniture | Room, dimensions, material, price | Weight |
| Skincare | Skin type, concern, product type | Pack size, unless it varies widely |
| Parts and accessories | Compatibility, size, type | Colour, if all are the same |
Filters only work if the underlying product data is consistent across the collection.
Filters depend on product data
A filter for 'material' is only as good as the material information stored on each product. If half the range lists 'oak' and the other half 'Oak wood', the filter splits them. Before designing filters, check that the product options, tags or metafields behind them are consistent. Shopify's Search & Discovery app is commonly used to configure storefront filters from this data.
Cleaning product data is unglamorous work, but it decides whether filtering helps or frustrates.
Collection pages on phones
Layout
- Two products per row is common and readable
- Filter button visible without scrolling
- Product count shown so shoppers know the range size
Filtering
- Filters open in a panel, not a long list above products
- Applied filters shown and easy to remove
- Sorting options in plain language
When a collection introduction helps
Shoppers arrive from search
A short introduction confirms they are in the right place and can help the page match their search.
The category needs explaining
For example, which type of filter suits which machine.
Keep it short above products
A sentence or two above the grid; longer guidance can sit below the products.
Large ranges: pagination or loading more
Numbered pages
Suits you when
- Shoppers return to a position in the range
- Very large collections
Watch out for
- Extra taps to see more products on phones
Load more button or infinite scroll
Suits you when
- Browsing-style shopping
- Visual products
Watch out for
- Footer content hard to reach with infinite scroll
- Returning to the same spot after viewing a product
Default sort order
The default order of a collection is a merchandising decision. Best sellers first suits most collections; new arrivals first suits fashion drops; manual order lets you lead with what you want to promote. Whatever the choice, sold-out products should not crowd the first rows, as a grid full of unavailable items suggests the store is empty.
Badges and labels
Labels such as 'New', 'Sale' or 'Low stock' on product cards help shoppers spot what matters, but only if they are used sparingly and accurately. When every card carries a badge, none stands out. Sale labels should reflect a genuine reduction, and stock labels should come from real inventory levels rather than being added for urgency.
Most themes can show sale and sold-out labels automatically from product data, which keeps them accurate without manual effort.
When filters return nothing
Combining filters can leave a shopper with no results. Rather than a blank grid, the page should say that nothing matches, show which filters are applied and offer a one-tap way to clear them. Some themes also hide filter values that would return no products, which prevents the dead end in the first place.
Questions about Shopify collection page design
How many filters should a collection have?
Only those that match how shoppers decide. Too many filters slow people down.
Why do our filters show duplicate values?
Usually inconsistent product data, such as different spellings of the same colour.
Should collections have introductions?
A short one helps searchers. Longer guidance can go below the products.
Two or three products per row on phones?
Two is common and readable; one row of large cards suits very visual products.
Should sold-out products appear?
They can, but they should not crowd the top of the collection.
Can different collections have different layouts?
Yes, with alternative collection templates in the theme editor.
Do product cards need quick add buttons?
They can speed up buying for simple products; products with many options usually need the product page.
Should product cards show reviews?
A small star rating can help comparison, if reviews are genuine and the rating is readable on phones.
Request a Custom Quote
Ask about Shopify collection page design
Thank you — your enquiry has been sent.
We have received your message and will reply by email. If you need to add anything, email info@letgetgrow.com.