Shopify Collections: A Complete Guide (2022)

WRITTEN BY
Rose
TOPIC
General
PUBLISHED
TIME
10 minutes read
shopify collections complete guide

In 2021, a Top Design Firms survey of 500 consumers found that 38% look at a web page's navigation links when they visit a website for the first time. They also found that 42% of respondents would leave a website because of poor functionality. A similar survey by Komarketing returned similar results with 37% of respondents stating that they would leave a website if they could not find what they were looking for.

Shopify collections - Komarketing survey results

Functionality and usability are the keys to a high-converting website.

Easy navigation is clearly important to consumers and Shopify collection pages are one way of making that a reality.

Shopify collections are an important part of your conversion funnel–the path taken from when a visitor becomes aware of your product(s) to when they finally make a purchase.

Shopify collection pages are essential for creating high-converting online stores. Not only will you be able to showcase to customers an organized catalog of products or services created around their needs, but this will subsequently boost your sales!
So are you all geared-up to get started? Let’s dive in!

What is a Shopify collection page?

A Shopify collection page groups specific products, or all of your products if you are a smaller business with fewer product variations. In simpler terms, the collection page carries all the product information your customers need, organized by certain types or categories. If you’re operating a Shopify fashion store, for example, you might use collection pages to separate clothing into jeans or t-shirts.
Once your customer has set their mind on a specific product category and navigated to it, a collection page shows up with all of that category’s related products. The buyer can then quickly scroll and sort through the results and choose the product(s) they’re interested in. They can then purchase them on the product description pages.
shopify collection example

Alchemy Jewelry used GemPages to create this collection for their jewelry store.

After all, there are two things buyers want to know when shopping at your eCommerce store: what you’re selling and where they can get it. Alchemy Jewelry’s ‘Customers’ Best Pick’ collection of holiday gifts shows just that!

What do you use a Shopify collection for?

Collection pages play an essential role in driving conversions and creating product awareness for your eCommerce store. With Shopify collections, you can create various collection pages that make it easier for shoppers to browse and make purchases.

There are many ways you can feature your collections:
  • Products specialized for different target buyers. For example: men, women, or children.
  • Products for a specific use or function. For example: pet supplies, furniture, and books.
  • Product items that are of a particular specification. For example: size, style, and color.
  • Products that are on sale or are for special occasions/seasonal events. For example: back-to-school supplies or Christmas sweaters.

Also, there are two types of Shopify collection pages: manual collections and automated collections:
  • Manual collections: A manual Shopify collection includes all the individual products you choose to add. This type of collection is harder to maintain and will stay the same if you don’t add in or remove any products. You can use a manual collection for occasions such as flash sales or special discounts.
  • Automated collections: An automated Shopify collection adds products based on the user's specific conditions. Once a product meets the required conditions of the consumer’s selection, it will be automatically added to the collection. Automated collections help save time if you have many products that need to be featured in a collection.
In short, collection pages help customers assess all the goods you have available. For shoppers, these pages provide multiple product choices, easy navigation and a simplified shopping experience. For sellers, this means more sales.

Components of a Shopify collection page

Now that you know about Shopify collection pages and how they benefit your online business. Let’s explore the components that make up this highly effective sales tool.

Category name

The category name is often fixed in the top navigation menu, and shows which categories shoppers can skim through. One category may consist of many collection pages. In this example, the Uniqlo category for ‘Women’ is highlighted in red? This is a design effect to help customers easier identify the category of the collection page they’re currently viewing.
shopify collections category name

Uniqlo’s category for ‘Women’ is highlighted in red for easy navigation.

Breadcrumbs display your collection page’s parent categories or sub-categories. Shoppers can quickly move between separate categories and view different collection pages while they browse your list of products.
shopify collections breadcrumbs

The Gap’s breadcrumbs navigate to various collection pages.

Sort menu

The sort menu has various options for shoppers to quickly skim products based on different criteria such as: 'Best Selling', 'Alphabetical', 'A-Z', 'Price, low to high', and 'Date, new to old.'
shopify collections sort menu

Customers can find and assess products in a distinct order or by a particular specification (e.g. 'Best Selling').

Page name

As previously mentioned, one category can have many collection pages and they are all distinct. In the below example, the ‘Makeup’ category contains different collection pages such as ‘All Makeup’, ‘Face Makeup’, or ‘Lip Makeup’.
shopify collections page name

Macy’s has at least six collection pages in each category of their eCommerce store.

Pages

To be able to navigate and window-shop the numerous products that each collection page contains, users have to browse through pages. Often, a number of 10, 50, or 100+ products per page is good.
shopify collections pages

Increase interactions and ease customers into purchasing by enhancing their browsing experience.

Browse by

A browse-by menu allows customers to navigate to a more specific subcategory page of your Collection Page. See it for yourself in the following example from COACH.
shopify collections browse by

Apparel sub-category under the Styles For Men collection page of COACH.

Filter menu

After the customer has performed their search and landed on a specific collection page, they can use the filter menu to narrow down product options by attributes like color, price, size, brand, in-store availability and more.
shopify collections filter menu
There are Various filtering options for Zappo’s customers to further refine their requirements.

Product details

Product details help inform buyers about each product. The information includes the name of the item, its price, available colors, customer ratings, promotional offers and much more.
shopify collections product details

Branelo Store attaches tags to their products to notify customers about their special offers.

For example, besides the basic product information, Branelo Store attaches a Cyber Monday offer tag to each product on their collection page.

How do you add a collection to a Shopify page?

To add a collection to a specific Shopify page you will need to create a collection first. Then, you can choose to add and showcase it on your desired Shopify page as a featured collection or as a collection list.
Here's how to do it, step-by-step.

#1. Create a new collection

Step 1: From your Shopify Admin, go to Products > Collections. Click on 'Create collection'.
add collection shopify page create new collection
Step 2: Input a title and description for the collection. In the Collection type section, select the type of collection you would like to build.
add collection shopify page input title description collection type
Hit 'Save' when finished.

Step 3: Navigate to the Products section and locate your product. Add the collection for the product.
add collection shopify page assign product
Hit 'Save' when finished.

>>Read this article to learn more about creating a new Shopify collection with GemPages.

#2. Add collections to your Shopify page

Now that your collections are all set up, it's time to feature your favorite collections. Let's say you want to shine the spotlight on your store's catalog on the homepage. There are two ways you can do this:

  • Showcase a featured collection to present your desired products or even all of them on any Shopify page, or
  • Display a collection list that links back to the collection pages of your store.
Step 1: On your Shopify Dashboard, go to Online store > Themes and choose to ‘Customize’ your Live theme.
add collection shopify page customize current name
Step 2: In your theme editor, select the Home page. Next, click on 'Add selection' and pick ‘Featured collection’.
add collection shopify page select featured collection editor
Note: A single featured collection has a product limit based on the theme you are using. This means your product number should be less than 25, 30, or 50, to meet the product limit for Shopify's Debut, Simple, and Brooklyn themes, respectively. If you need more than that, you need to add another featured collection. You can add as many featured collections as you need to reach the exact number of products you want to list.
add collection shopify page add multiple featured collections
Step 3: Click on the Featured collection section in your theme customization editor and choose 'Select collection' in the menu bar on the left.
add collection shopify page select collection
Step 4: Pick any of the collections you have created and hit 'Select' when you're done.
add collection shopify page select collection multiple collections
Step 5: Don't forget to add a heading, description, and customize the grid layout for your new featured collection!
add collection shopify page customize featured collection

#2.2. Add collection list(s) to your Shopify page

Step 1: On your Shopify Dashboard, go to Online store > Themes and choose 'Customize'.
add collection to shopify page customie current theme to add collection list
Step 2: In your theme editor, select the Home page. Next, click on 'Add selection' and pick ‘Collection list’.
add collection to shopify page select collection list section in theme editor to add collection list
Step 3: You can click on a collection block and then select 'Select collection' on the left menu bar to add your product collection.
add collection shopify page click collection block add collection list
add collection shopify page select collection
Step 4: Choose any collection you have created to feature as a collection list and hit 'Select' when done.
add collection shopify page select collection feature as collection list
Step 5: Repeat the same process to fill the rest of your collection list blocks.
add collection shopify page fill in all collection list blocks
Step 6: Add in a heading, description, and customize the grid layout for your new collection list.
add collection shopify page customize collection list

Using GemPages to customize collection pages

Do you know you can do much more with your collection pages using GemPages? Once you have a Shopify collection set up, a bunch of customization options are waiting for you in the GemPages editor.

Step 1: From the GemPages dashboard, click on 'Collection pages' from the list on the left sidebar. You will see the option 'Create New Template' in the top right corner.
add collection shopify page create new collection with gempages
Step 2: In minutes, you should see various pre-built templates you can use to create your collection page. Select your preferred template and hit 'Start editing'.
add collection shopify page chooose template for collection
Otherwise, if you already have a design in mind, you can start editing from a blank page by selecting 'Create New Page'.

Note: After creating a collection page, you must assign one or multiple collections to that template for it to go live. Click here for a detailed tutorial.

Step 3: Inside the editor, click on the Product List element to configure it, then select 'Pick a Collection' to assign a collection to the collection page you created.
add collection shopify page assign product to collection gempages
Step 4: Customize your collection page with GemPages elements in the editor. Just drag and drop any elements that you want!
add collection shopify page customize collection with gempages elements
Note: The Collection Module contains various child elements to display collection properties. Defined by the (C) prefix, these child elements must be placed inside the Collection Page to work properly.

If you are still confused about using the GemPages Collection elements to optimize your collection page, we have a checklist here to help you.

Using GemPages to add collections to any page

With GemPages, you are free to add collections to any page of your store by using the Product List element in the editor.

Step 1: Drag and drop the Product List element to any place you want to show your collection on a page.
add collection shopify page use gempages add collection to any page
Step 2: Hit 'Pick a Collection' to choose and assign a collection for your page. Also, remember that you can customize and edit the number of products, the number of products in each row, and the spacing of your collection section.

>> Read this article to learn more about the Product List element and how to use them to best display your store offerings.

Tips and tricks for creating effective Shopify collection pages

We have walked you through all the steps to creating an effective collection page, now it’s time to explore how to create an effective Shopify collection page. Here’s a list of eight best practices:

Apply killer CTAs

A call-to-action is what you ask (or tell) your customers to do next. This is a direct way to increase a customer’s engagement with your brand. By provoking certain emotions, for example, FOMO or enthusiasm, you give your buyers a reason to take the action stated in your CTA.
add collection shopify page apply killer ctas

Target's Christmas toys banner with a discount of up to 50% off 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 example), you can also make use of popups and get customers ‘hooked' with all the attractive discount programs your online store offers!

add collection shopify page cta popup collection page

A killer CTA that pops up on your collection page can trigger customers to buy more

Imagine you're shopping online and have finally found the product you want to buy. Now, as you're about to exit the page to buy a similar, cheaper product in a local store, a discount pops up. Great! That brand just saved you a trip to the store AND you saved some money!

Use compelling Headers

Headers are great for captivating and showcasing your brand's product statement. Why? They're the first thing that your website visitors see.
add collection shopify page use compelling headers

de Négoce used GemPages to create a visually appealing slide header with a CTA that links to its wine collection page.

So take advantage of this prime location and promote your top featured products, sales discounts, and special offers in the header section. The better you manage to captivate a buyer’s attention and create an excellent first impression (by which we mean informative and valuable) - the more likely conversions will happen!

Provide an excellent product layout

With your product layout, it is best to utilize all available space. There are two ways to do this either a grid view or a list view.

Usually, grid views are best for an optimized visual experience. You can see there's no need for specific information as buyers mostly rely on full images to compare the products.
add colleciton shopify page grid collection view

H&M has done a great job luring buyers to click on their products with a chic and stylish product overview.

Fashion and beauty brands like H&M often showcase their best products with a grid view. For an optimized user experience, use two to four 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 best.
add collection shopify page list collection view

Newegg shows its Smart Watches collection page in the list view with all the information necessary for shoppers to evaluate its products (price, product information, availability etc.).

Keep the best on top

Let's go back to creating a good first impression. To form a sense of trust and motivate customers to buy, try to present your best-sellers at the top of each collection page. To further step up your game, you can grab a buyer's attention with badges like 'Best Sellers', 'New Arrivals', or '20% Off', and encourage shoppers to navigate through your best selling products.
add collection shopify page add pages to grab buyers attention

Make enticing product recommendations on the top of your collection pages with product badges and stickers

Highlight pricing and lure customers in with inviting triggers

A reasonable price is always a plus. Reasonably price products with discounts, flash sales, list ratings, and reward points!
add collection shopify page highlight pricing with inviting triggers

Product labels, precise price ranges and 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 LAI AliExpress Reviews - the one-stop eCommerce automation solution for customer reviews, ratings and testimonials with various layout options. It also fully integrates with GemPages.

Optimize product thumbnail

Having nice product thumbnails is a must for a compelling collection page. This holds even greater truth for visually-driven industries like fashion or apparel.
add collection shopify page optimize product thumnails

Zara features its new kids ski collection thumbnails with benefit-driven content and professional photography.


At its best, the collection page's thumbnails should add harmony to the brand's aesthetics and give customers an immediate sense of the products, simultaneously. Here are some best practices you can use:
  • The rule of three: make sure your thumbnails are all the same size, high quality and mobile responsive.
  • Add a hover effect so customers can zoom in.
  • Use 3D product images where you can.
  • Show the product being used. For example, in a video.

You can also further learn how to design enticing product listings that include text, icons and product images with our Shopify Product Images: A 10-minute Guide for Beginners [2022].

Make navigation a piece of cake

Structure your collection page based on the needs and expectations of your buyers. A clear and intuitive navigation path enables shoppers to find and obtain the product they love quickly. In other words, navigation shall lead to both sales and customer satisfaction.
add collection shopify page add navigation via filter system

The buyer's endless journey of finding what they want is now fulfilled via Gap's filter system.

Gap uses many criteria in their filter system to help shoppers sort and compare products:
  • Size
  • Color
  • Price
  • Rise
  • Wash
  • Fit
  • Length
  • Fabric Material
  • Sleeve Length 
Note: In some cases, however, a filter is unnecessary 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

Use add to cart buttons on your collection pages so that customers can make a purchase without leaving your collection page. This simplifies the buying process and reduces the time taken during checkout. Keep in mind that you should continuously optimize every eCommerce customer touchpoint for conversions. The collection page is no exception.
add collection shopify page create shortcut
Besides providing helpful information on their collection page, Endlessly Collection has done a great job using GemPages to include an 'Add to Cart' button next to each product.

Examples of Shopify Collection pages

We have some great examples of how our customers have been able to create awesome collection pages and showcase them on their online stores. Take a look at these original designs.

Taylor & Black

Taylor & Black hit two targets with one arrow with this luxurious and elegant collection page for men’s suits. It’s a static, minimalist design, with large product thumbnails. They used it as both a standalone collection page and as their homepage.
Add collection to Shopify page - Example of GemPages collection page

Taylor & Black feature multiple collections on their homepage with style and just enough flair.

We think this one is great because they know how to showcase their collections. This neat and clean overview will satisfy any gentleman that visits this online boutique!'
add collection shopify page example gempages collection suit

The brand's collection page is a tailored-fit boutique that offers customers all the variations and options they need to fulfill their suit requirements!

Big Bag Lecco

Big Bag Lecco is another fashion brand that has nailed their collection page for their niche.
add collection shopify page example gempages collection page bag

Big Bag Lecco shows how to wear their bags with style.

This Italian leather brand makes a visual statement with their photography. There are no words at all but it’s still chic and classy. The New Autumn Winter 2022/23 collection has a range of bags that are perfect for all bag lovers!

Dog Nation

Dog Nation is just one of GemPages friendly pet supply vendors! They have shown us that customer interactions play a vital role in building customer trust and loyalty, especially when it comes to our dear four-pawed friends.

Aside from bright and clear product hero images, the brand provides size, color, collar type options, and even ratings and reviews from customers, for each product in their collection.

Dog Nation demonstrates their lively and warm spirit in all of their product collections!
add collection shopify page example gempages collection page pet

This is a perfect way to call pet lovers to action: collection pages with ratings, reviews, and product options/variations!

Conclusion

Voila! We have shown you all there is to know about Shopify collection pages–from best practices for creating an effective collection page, to tips and tricks (and examples!), to how to design a high-converting collection.

Now it's time you took action and upgraded your eCommerce collection pages!