- What is a Shopify collection page?
- What do you use a Shopify collection for?
- Components of a Shopify collection page
- How do you add a collection to a Shopify page?
- Using GemPages to customize collection pages
- Using GemPages to add collections to any page
- Tips and tricks for creating effective Shopify collection pages
- Examples of Shopify Collection pages
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.
Functionality and usability are the keys to a high-converting website.
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!
What is a Shopify collection page?
Alchemy Jewelry used GemPages to create this collection for their jewelry store.
What do you use a Shopify collection for?
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.
Components of a Shopify collection page
Uniqlo’s category for ‘Women’ is highlighted in red for easy navigation.
BreadcrumbsBreadcrumbs 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.
The Gap’s breadcrumbs navigate to various collection pages.
Sort menuThe 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.'
Customers can find and assess products in a distinct order or by a particular specification (e.g. 'Best Selling').
Page nameAs 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’.
Macy’s has at least six collection pages in each category of their eCommerce store.
PagesTo 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.
Increase interactions and ease customers into purchasing by enhancing their browsing experience.
Browse byA 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.
Apparel sub-category under the Styles For Men collection page of COACH.
Filter menuAfter 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.
Product detailsProduct 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.
Branelo Store attaches tags to their products to notify customers about their special offers.
How do you add a collection to a Shopify page?
#1. Create a new collection
Step 3: Navigate to the Products section and locate your product. Add the collection for the product.
>>Read this article to learn more about creating a new Shopify collection with GemPages.
#2. Add collections to your Shopify pageNow 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.
#2.1. Add featured collection(s)Step 1: On your Shopify Dashboard, go to Online store > Themes and choose to ‘Customize’ your Live theme.
#2.2. Add collection list(s) to your Shopify pageStep 1: On your Shopify Dashboard, go to Online store > Themes and choose 'Customize'.
Using GemPages to customize collection pages
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.
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.
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
Step 1: Drag and drop the Product List element to any place you want to show your collection on a page.
>> 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
Apply killer CTAsA 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.
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!
A killer CTA that pops up on your collection page can trigger customers to buy more
Use compelling HeadersHeaders are great for captivating and showcasing your brand's product statement. Why? They're the first thing that your website visitors see.
de Négoce used GemPages to create a visually appealing slide header with a CTA that links to its wine collection page.
Provide an excellent product layoutWith 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.
H&M has done a great job luring buyers to click on their products with a chic and stylish product overview.
However, for any industry that needs more detailed specifications, such as electronics or food, the one product per line view may be the best.
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 topLet'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.
Make enticing product recommendations on the top of your collection pages with product badges and stickers
Highlight pricing and lure customers in with inviting triggersA reasonable price is always a plus. Reasonably price products with discounts, flash sales, list ratings, and reward points!
Product labels, precise price ranges and ratings make Sephora's beauty collection page more appealing to customers.
Optimize product thumbnail
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 .
Make navigation a piece of cakeStructure 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.
The buyer's endless journey of finding what they want is now fulfilled via Gap's filter system.
- Fabric Material
- Sleeve Length
Create a shortcutUse 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.
Examples of Shopify Collection pages
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.
Taylor & Black feature multiple collections on their homepage with style and just enough flair.
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 is another fashion brand that has nailed their collection page for their niche.
Big Bag Lecco shows how to wear their bags with style.
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!
This is a perfect way to call pet lovers to action: collection pages with ratings, reviews, and product options/variations!
Now it's time you took action and upgraded your eCommerce collection pages!