The collection page gets less attention than any other page in a store. The homepage gets the redesign and the product page gets the long description. The collection page gets whatever the theme did by default.
That is a mistake, because a lot of visitors pass through it. Someone taps “Moisturisers” in the menu, or lands on the collection from a search result, and sees a grid. What happens in the next few seconds decides whether they open a product or leave.
I design a Shopify store as creative director of Skin Boutique Online. This is how I think about its shelves.
What the page is for
A collection page is a shelf. Its job is to take someone from “I am looking for a moisturiser” to two or three products worth opening.
It does not have to sell. The product page does that. The collection page only has to make the choice smaller.
Everything below follows from that.
The product card
The card is the unit the whole page is built from, so start there.
A card needs four things:
- a photo
- the product name
- the price
- something that tells similar products apart
The fourth is the one most stores miss. Ten bottles in a row look the same in a small photo. If the names are long and start with the brand, the part that differs is cut off. Then the customer has to open each product to learn what it is.
Fix that on the card. A short line under the name works: the skin type, the size, the main ingredient. So does a small label. Pick the one thing your customers use to choose and show it.
Keep the photos in one style. Same background, same angle, same crop. A grid of mixed photos looks like a marketplace with many sellers.
Show the review count on the card if you have reviews. Leave it off if most products have none, because a row of empty stars does more harm than no stars.
Sort order
Every collection has a sort order, and somebody chose it, even if that somebody was the default.
Shopify lets you sort a collection by best selling, by name, by price or by date, or set the order by hand. Open your main collections in the admin and look at what each one uses.
For most stores I would start with best selling for large collections and a manual order for small ones. Manual order lets you decide what sits in the first row. That row gets most of the attention, so it should hold the products most people come for.
Sorting by name is rarely right. No customer shops alphabetically.
Check it again after you add products. A new product can land at the end of a manual collection, where nobody scrolls.
Filters
Filters matter once a collection is too long to scan. For a shelf of eight products they are clutter. For a shelf of sixty they are the page.
Build them from the way your customers think. In skincare people come with a concern or a skin type. On Skin Boutique Online the homepage asks for the concern first, and the same logic belongs in the filters. A filter list that opens with “Vendor” and “Product type” was built from the admin’s point of view.
Shopify’s own Search & Discovery app lets you choose which filters appear, and build them from product options, tags or metafields. That last part is the work. A filter is only as good as the data behind it, so each product has to be tagged the same way.
Two checks on a phone:
- Can you open the filters with one tap and close them again?
- After you pick a filter, can you see that it is on and remove it?
If the filter panel covers the whole screen and has no visible way back, people give up on it.
The text at the top
Most themes show the collection title and the description above the grid.
Keep the visible part short. One or two sentences that help someone choose: what is on this shelf and who it is for. A long paragraph above the grid pushes the products down, and on a phone it can fill the whole first screen.
If you have more to say, put it below the products. A short guide under the grid, on how to choose between the products above it, is useful to a reader and gives the page text of its own.
How many products, and what happens at the end
Count how many products you can see on a phone without scrolling. If the answer is one, the cards are too tall. Two columns is the usual answer on a phone.
Then scroll to the bottom. Themes handle the end of the list in different ways: numbered pages, a “load more” button or loading as you scroll. I prefer the first two. With endless loading the footer keeps moving away, and the customer loses their place when they come back from a product.
Whichever you use, test the back button. Open a product from the third row of the second page and go back. You should land where you were.
Empty and nearly empty collections
A collection with two products looks abandoned. Either fold it into a larger one or wait until there is enough to fill a row.
The same goes for filter results. If a filter combination returns nothing, say so in plain words and offer a way back. A blank page reads as a broken one.
Keep sold-out products out of the first row. Whether you hide them or move them to the end depends on the store, but they should not be the first thing a visitor sees.
Collection page SEO, briefly
Collection pages are often the pages that match what people search for. Someone looking for a type of product wants a list of products, and that is what a collection is.
A few things help:
- The title. Use the name people search for. “Moisturisers for dry skin” is clearer than “Hydrate”.
- The description. Write a short one of your own for each main collection.
- The address. Shopify builds it from the title when you create the collection. Keep it short, and if you change it later, redirect the old one.
- Links. Link to your main collections from the menu and from the homepage with normal text links.
One caution. The same product can sit in many collections, and that is fine. What you should avoid is making many collections that hold almost the same products under slightly different names. They compete with each other and none of them is clearly the right page.
Check it on a phone
Before you call a collection done:
- Can you tell two similar products apart without opening them?
- Is the first row the one you would choose?
- Do the filters open and close easily?
- Does the back button return you to the same place?
- Is anything above the grid taller than it needs to be?
Do this on your largest collection. It is the one with the most ways to go wrong.
Where it sits in the store
The collection page is one stop between the homepage and the product page. I go through every page and its job in Shopify store design, page by page.
If you want help with your shelves, send me the store address and the collection that worries you most. Here is what I do for Shopify stores, and here is where to start a project.
