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 and the page functionality.
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 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
- Open the Theme editor and select Collections > Default collection from the dropdown a the top (or select one of the pre-designed templates to begin editing)
- Within the Collection pages template, you'll find Heading, Layout, Filters and sidebar settings.
- Navigate to either section to edit its settings.
The Canopy theme provides several collection heading layout options for you to choose from, including:
- Text Over Image: Showcase your featured image in full width with the title and description elegantly overlaid.
- Text Next to Image: Display your featured image alongside the title and description on a solid color background.
- No Image: Keep the focus on the title and description without the featured image.
- No Heading: Opt for a more minimal look by removing the header section.
Canopy also offers the option to enable Breadcrumbs, which serve as a helpful navigation tool for your customers. They show the current page's path, starting with 'Home' followed by the collection name. You can choose to display the Breadcrumbs above or below the heading.
Organize your store layout by selecting the number of products to display per page, or opt for infinite scroll for a seamless browsing experience.
Filters and sidebar
The theme has a choice of filter mode — either a Sidebar filter option or a simple filter dropdown. You can also disable the filter altogether.
Canopy allows you to choose between a Sidebar or dropdown filter or turn off filters altogether. Additionally, you can enable the sticky filters on the collection page to keep the filter bar in place as customers scroll. Please note that this will disable the sticky navigation.
Sort your collections as desired by checking the ‘Sort by’ dropdown option. If you've manually sorted your collections in the Admin, you can also choose to include the ‘Featured’ option in the dropdown. If you haven't manually sorted your collections, there's no need to include it.
In the Collection Pages > Layout settings, the number of products that will be shown per page can be selected by adjusting the Number of products per page slider, where a maximum of 50 and a minimum of 12 products can be shown per page. The Mobile products per row setting provides a further option to customise the experience for mobile users.
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.