What are collection pages?
Collection pages are an essential part of most online stores, and are the ideal way to organize and present collections of products in a gallery-style format. Grouping and showcasing products in this way can aid product discovery, assist with upselling and potentially increase conversion rates.
How to create a collection
There are two main elements that make up a collection page; the first is the collection of products itself, and the second is the collection page template which, when assigned to a collection, controls the layout of the products as well as the page functionality.
Collections of products are created in the Shopify admin area, within Products > Collections > Create collection. Keep in mind that collections are intended to help your customers find products by category, and are most effective when containing products of a certain type, size, color or category.
Refer to Shopify's collections documentation for more.
Tip
Two types of collections can be created; an automated collection which uses selection conditions to automatically manage products, or a manual collection which only includes the products that you choose individually.
How to set up the collection page
Steps
- Open the Theme editor and select Collections from the dropdown at the top then select your preferred template (e.g. Default)
- Click on the Collection pages section on the left hand side. This section represents the entire collection page.
- In the Header settings, the Show collection title/description and Show collection image can both be selected. These are set up in the Collections section of the Shopify admin area.
- In the GRID > Layout settings, Collage or Grid can be selected:
Grid: Product cards will show as a uniform grid with equal spacing.
Collage: Product cards will be displayed with their original image dimensions. For a collage layout, the image shape must be set to Natural in Theme settings > Products > Product cards > Image shape. - Select the Desktop products per row, Mobile products per row and Products per page. Choose whether to Enable infinite scroll.
Filter & sort
One of the most powerful features of a collection page is allowing customers the ability to filter and sort products within a collection. There are a number of settings under FILTERS which can be used to customize the appearance and functionality of these features, allowing customers to get to the products they want as quickly as possible.
In Showcase, there are three different filter modes that can be selected: None, Simple and Sidebar.
Simple
The filters show at the top of the collection page underneath the header.
Sidebar
The filters show on the left hand side of the collection page next to the product cards.
Steps
- Open the Theme editor and select Collections from the dropdown at the top then select your preferred template (e.g. Default)
- Click on Collection pages and scroll to the FILTERS settings. The filters shown are set up in the Shopify Search & Discovery app, refer to Shopify's storefront filtering documentation for more.
- Adjust the layout of the filters using the settings provided such as Show filter counts and Show filters with zero results.
- Choose a Filter mode. If Sidebar has been selected, consider enabling Stick the sidebar on scroll in the Sidebar settings. If this is enabled, the filters will remain visible on the screen when customers scroll past them.
- In the Sorting settings, select Enable sorting. Sort by will show as the last option in the filters in both the Simple and Sidebar filter modes.
- Swatches can be shown in the collection filters. Refer to the Swatches guide for more information.
How to control the product card layout
In Theme Settings > Products > Product cards there are many settings that can enhance the look and feel of a product card. These settings are relevant to any page or section throughout the store that displays a product card.
The Image shape, Crop image to shape and Image alignment settings can all be adjusted to ensure that images in the product cards are displayed in the best way possible.
Where a product has several images, the images can be shown in three different ways:
No hover effect - The first product image is displayed and does not change.
Show second image - When a customer hovers over the product card image, the second image shows.
Start image slideshow - When a customer hovers over the product card, the images show as a mini slideshow.
If a product has an mp4 video as one of the product images, select Show preview video to play the first mp4 video. The mp4 product video will be shown on the product card instead of other images.
Note
Product labels
In the Showcase theme, product labels are displayed on the product card. For more information, refer to the Product labels guide.
Swatches
Refer to Swatches
How to switch on the quick-buy
The Showcase theme ships with a convenient quick-buy button that pops up when you hover over product images on a collection page. Clicking on the quick-buy button shows a condensed version of the full product page, enabling customers to purchase the product directly without navigating to the complete product page. The Showcase theme does not have a quick buy on mobile. Instead, on smaller screens, the customer is taken straight to the product page.
Steps
- Navigate to Theme Settings > Products > Product cards.
- Scroll down and select Enable quick-buy.
FAQs
How do I change the order of products on the /collections/all catalog page?
All Shopify stores have a page at the URL your-store.com/collections/all that lists all of the visible products in the store. This is the store's catalog page. By default, products on the catalog page are shown in alphabetical order. To control what is shown or change the collection heading, go to the Shopify admin area and create a new automated collection of all products and give this new collection the handle all. Refer to the Shopify's Catalog page guide for more details.
How do I show review stars on the collection page?
If your store is using a reviews app which links to Shopify's standard rating metafield, review stars can be shown below products on the collection page. Go to Theme settings > Products > Product cards > Show reviews on product cards.
How do I show swatches on the collection page?
Refer to swatches for more information.
How do I control which filters are shown?
This is managed using the Shopify Search & Discovery app. Refer to the Search & Discovery guide to filters to learn more.
Can I use infinite scroll?
Yes, the Showcase theme supports infinite-scroll on the collection page. Go to Collection pages > GRID > Enable infinite scroll.
Can't find what you're looking for?
Our support staff are here to answer your queries, so don't hesitate to write to us!
Contact us