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
Two main elements make up a collection page; the first is the collection of products itself, and the second is the collection page template which can be used to create different layouts with additional sections.
Collections of products are created in the Shopify admin area, within Products > Collections > Create collection. Remember 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.
Two types of collections can be created; an automated collection that uses selection conditions to automatically manage products or a manual collection that only includes the products you choose individually.
How to set up the collection page
- Open the Theme editor and select Collections > Default collection from the top dropdown or navigate to a collection page.
- In the Collection pages settings select the number of Products per page or Enable infinite-scroll.
- In the FEATURED IMAGE settings choose whether to show the collection's featured image.
The collection featured image (the image assigned to a collection in the Shopify admin area) can be shown at the top of the collection page and can be cropped if desired using the Image height and Image alignment settings.
It should be noted that the collection featured image doesn't have to be used as the main banner for the collection. By using dynamic sources (metafields), other sections could be used as the introductory banner for the collection.
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. Several settings under FILTERING and SORTING can be used to customize the appearance and functionality of these features, allowing your customers to get to the products they want as quickly as possible. The filters are set up in the Shopify admin area; refer to Collection filtering for more.
In the Collection Pages settings, the number of products that will be shown per page can be selected by adjusting the Products per page slider, where a maximum of 48 and a minimum of 24 products can be shown per page. Alternatively, the Enable infinite scroll setting can be used which will automatically load in products as the customer scrolls through the page. When infinite scroll is on, the number of products selected per page in the slider dictates the point at which the page loads.
How to control the layout of the product tiles
Product tiles can be displayed in two distinct layout styles:
- A masonry layout where the products are arranged in columns based on the best fit. Product blocks move to fill the space available, so the order of the products on the page may change based on the screen width.
- A fixed size layout where product tiles are a fixed size, which may be beneficial for stores that require a more uniform look.
These layout choices apply across the entire store wherever product tiles are shown e.g. in the featured collection section or product recommendations section.
- Open the theme editor and go to Theme settings > PRODUCT GRID > Layout.
- To achieve the masonry layout, adjust the Tile size and Margin between tiles to control the size of the product images.
- To achieve the fixed look, in the Specific product thumbnail ratio settings, select Enable fixed sizes and select the optimum Thumbnail image ratio.
Product labels can be shown over the product images on the collection page for items that are on Sale and Sold out. The inventory quantity can also be shown for products with only a single variant.
The product labels and label position can be controlled in Theme settings > Layout > Overlay label location, and the label colors are managed in Theme settings > Colors.
Why aren't the product images aligned in rows?
For a row-based layout where all the products are aligned, choose the fixed sizes layout. Go to Theme settings > Product grid > Layout > Specific product thumbnail ratio > Enable fixed sizes. This layout is most effective when your product images are of a similar shape.
How to switch on the quick view?
Show a quick buy button on the collection page by choosing Show quick view in Theme settings > Product grid > Layout. This only applies on larger screens, and there is no quick buy option on mobile.