Collection Pages are the aiding gates that drive customers to final purchase decisions. Filter, sort, compare products – the route has its full steps until a buyer falls in love with a product & makes the call. Now, we know, sellers, that it’s a competitive world out there.
Hence, let’s set the strategy straight: Design an effective Collection Page & help customers assess all the goods you got to show. We promise you that with all the right practices, your Collection Pages are going to be too lit to convert!
But first, let’s answer the question
What are Collection Pages?
A Collection Page showcases all the products for sale in a specific category of your online store. In simpler words, the Collection Page carries all the product information your customers need in order.
There are 2 things buyers want to know when shopping at your eCommerce store: what you’re selling & where they can get it. Jane’s decor category Collection Page shows exactly that!
How Collection Pages benefit your store
Collection Pages play an important role in driving conversion & creating product awareness for your eCommerce store. Indeed, a proper Collection Page informs customers about the products in a category they’ve navigated to. For shoppers, great Collection Pages mean multiple product choices, easy navigation & a simplified shopping experience. For sellers, this means profit.
Components of a Collection Page
We already know what the eCommerce product catalog is & how it benefits your online store business. Let’s further explore the components that make it the guide to customers’ purchases!
Category name
The category name is the first indication – often fixed in the top navigation menu, showing which categories shoppers are able to skim through. One category may consist of many Collection Pages. Do you notice the Uniqlo Women category is highlighted in red? This is a design effect to help customers easier identify the category of the Collection Page they’re currently viewing.
Categories are the foremost indicators of the searching path customers can take to find the exact products they’re looking for.
Breadcrumbs
Breadcrumbs display your Collection Page’s parents’ categories or sub-categories. As means of navigation, shoppers can easily move between separate categories & view different Collection Pages while they browse your products list.
Gap’s breadcrumbs as navigation to various Collection Pages.
Learn more:
What is Shop Pay and Is It Safe?
Sort menu
The sort menu has various options for shoppers to quickly skim wanted products based on different criteria such as “Best Selling”, “Alphabetically, A-Z”, “Price, low to high” & “Date, new to old”.
Customers can find & assess the shop’s products in a distinct order or a special specification (e.g., “Best Selling”).
Page name
As mentioned, one category can have many Collection Pages, and these are all distinct pages. In the below sample, the “Makeup” category contains different Collection Pages such as “All Makeup”, “Face Makeup”, or “Lip Makeup”.
Macy’s has at least 6 Collection Pages in each category of their eCommerce store.
Pages
To be able to navigate & window-shop the numerous products that each criterion of the Collection Pages contains, users have to browse through pages. Often, a number of 10, 50, or 100+ products per page is a good to go.
Enhance interaction & ease customers into making the purchase by browsing your Collection Page pages.
Browse by
A browse-by menu allows customers to navigate to a more specific sub-category page of your Collection Page. See it for yourself in the following COACH example:
Apparel sub-category under the Styles For Men Collection Page of COACH.
Filter menu
After the customer has set their search on a certain Collection Page of a category, it’s time to specify their product choice. The filter menu helps shoppers narrow down product options faster by attributes like color, price, size, brand, in-store availability & more.
Various filtering options for Zappo’s customers to further refine their product requirements.
Product details
Product details help inform buyers of each product on the Collection Page they’re browsing. The information includes the name of the item, its price, available colors, customer ratings, promotional offers & many more.
For example, besides the basic product information, Branelo Store’s pet supplies have the Cyber Monday offer tag attached to each of its products on the Collection Page (the page uses the EcomSolid app).
What makes a great Collection Page?
Done with the anatomy! Now, the question is how can you design an effective Collection Page. But before that, we’d like you to know overall the 4 key factors that make such a page great:
Focus on a category with diversity
By creating a category & making the best out of it, you are providing your customers a clear navigational path to their wanted items. A Collection Page full of high-quality products sure will capture the attention of shoppers & make them trust your store. Additionally, you can optimize your products’ potential with different types of collections such as Shopify smart/automated collections.
Organized & informative
As humans, we love a sense of order & alignment in all aspects of life, and the eCommerce world is no exception. A Collection Page keeps all of your online store’s products list information in check (as we mentioned in the components of the page). With thousands of product lists & all kinds of ads being sent to us via emails or social media every day – it’s crucial that potential customers can quickly read & browse through results.
Powerful product presentation
It takes someone only half a second to decide if they’re going to stay on a website. And visual attention is the main influence during that process. It’s obvious: powerful Collection Pages’ product presentations sure create the right brand intimacy to capture potential buyers!
Support the buying journey
The Collection Page has the upper hand in directing shoppers to the right product detail pages, which then, ultimately, leads to checkout. According to a Baymard Insitute study, merely the design & features of Collection Pages can impact users’ success rate in finding products they wanted to purchase by up to 400%!
Best practices to design a Collection Page
The basics & benefits are all clear. There’s only one thing left to do: explore how to design an effective Collection Page with these top 8 practices:
Use compelling Headers
Headers are great head-starters to captivate & showcase your brand’s product statement to customers. Why? They’re the first thing to catch shoppers’ eyes.
Sinsay has a visually appealing slide header with CTA to its beauty care Collection Page.
So take advantage of the “golden spot” & promote your top featured products, sales discounts, and special offers in the headers section. The better you manage to captivate buyers’ attention & create a good first impression (by which we mean informative & useful) – the sooner conversion happens!
Apply killer CTAs
Call-to-actions serve as direct ways to increase customers’ engagement with your brand via ads. By provoking certain emotions (for example, FOMO) & enthusiasm, you are giving your buyers the exact reason why they should take the desired action – purchase.
Target’s Christmas toys banner with a discount of up to 50% invites shoppers to their Toy Collection Page.
We advise you to diversify different kinds of CTAs for each Collection Page. Aside from banners (as seen in the above Target’s example), you can also make use of popups & get customers ‘hooked’ with all the attractive discount programs your online store offers!
Imagine you’re shopping online & have finally found the product you wanted to buy. Now as you’re about to exit the page to buy a similar product, but cheaper, in a local store, this pops up. Great, the brand just saved you a trip to the store!
Provide a great product overview
When it comes to the product overview, it is best to efficiently utilize all available space without leading to eye fatigue. There are 2 ways: Grid view vs List view.
Usually, grid views are ideal for the optimized visual experience. You can see there’s no need for specific information as buyers mostly rely on full images to compare the products.
Fashion & beauty brands like H&M often choose to showcase the best of their products with the grid view. For optimized UX display, use 2 – 4 images per line.
However, for any industry that needs more detailed specifications such as electronics or food – the one product per line view may be the finest go-to.
Newegg shows their Smart Watches Collection Page in list view with all the information necessary for shoppers to evaluate its products (price, product information, availability).
Keep the best on top
Let’s go back to creating a good first impression. To form a sense of trust & motivate customers to buy, try to present your best-sellers on the top of each Collection Page. To further step up the game, you can grab buyers’ attention with badges like “Best-Sellers”, “New-Arrivals” or “20% Off” & encourage shoppers to navigate your best products.
Make enticing product recommendations on the top of your Collection Pages with Mason’s product badges & stickers.
Highlight pricing & lure customers in with inviting triggers
A good price always wins. And what could be more inviting for a shopper to purchase? An even better price with discounts, flash sales, list ratings, and reward points under the price!
Product labels, clear price ranges & ratings make Sephora’s beauty Collection Page more appealing to customers.
Tips: Do you know that there are many ways to trigger shoppers to buy? You can utilize FOMO, add reviews or build attractive product benefits with visual enhancements! How? Unpack the limitless possibilities of ModeMagic – the one-stop solution for e-commerce automation – powered through badges, animation, and product list cards.
Optimize product thumbnails
Having nice product thumbnails is a must for an effective Collection Page. This holds even greater truth for visually-driven industries like fashion or apparel.
Zara features its new kids ski collection thumbnails with benefit-driven content & professional photography.
All in all, at its best, the Collection Page’s thumbnails should add harmony to the brand’s aesthetics & give customers a quick sense of the products at the same time. Here are some practices you can make use of:
- The 3’s rule: Same size, high quality & mobile responsive
- Hover for product views
- Multi-dimensional experience
- In-action approach
>>> Also, you can further learn how to design enticing product listings that include text, icons & product images with Mason’s #1 Product of the day – ModeMagic 2.0.
Make navigation as easy as a piece of cake
Structure your Collection Page based on the needs & expectations of your buyers. A clear & intuitive navigation path enables shoppers to easily find & obtain the product they love. In other words, navigation shall lead to both sales & customer satisfaction.
The buyer’s endless journey of finding the desired item is now fulfilled via Gap’s filter system.
Gap uses many criteria in their filter system to help shoppers sort & compare products:
- Department
- Size
- Color
- Price
- Rise
- Wash
- Fit
- Length
- Fabric Material
- Sleeve Length
>>> Check out this Shopify guide on how to filter your product list.
Note: In some cases, however, a filter is not necessary if you have a small to average amount of products (for example you’re a small eCommerce business or a one-product store).
Create a shortcut
Keep in mind to always optimize every eCommerce customer touchpoint for conversion. The Collection Page is not an exception. Create a shortcut in case customers decide they want to get the product right away. This simplifies the customers’ buying process & reduces the time taken during checkout.
Aside from providing useful information on their Collection Page, BestBuy has done a great job including a “Add to Cart” button next to each product.
So what’s next?
Voila! We have shown you all there’s to know about Collection Pages & the best practices to design one such effective page:
- Use compelling Headers
- Apply killer CTAs
- Provide a great product overview
- Keep the best on top
- Highlight pricing & lure customers in with inviting triggers
- Optimize product thumbnails
- Make navigation as easy as a piece of cake
- Create a shortcut
Now it’s high time you took the action & upgraded your eCommerce Collection Pages yourself! In case you’re still new to this & feel a bit overwhelmed. No fret, you can either custom Collection Page wonders with Mason’s ModeMagic 2.0
Nonetheless, remember that the Collection Page is an important gateway to lead & convert your website visitors into powerful consumers. And by optimizing your Collection Pages with the above practices, your path to conversion skyrockets!