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 products into collections makes it easier for customers to find them, and can also aid product discovery and assist with upselling which may help to 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 collection guide 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 > Default collection from the dropdown at the top (or select one of the pre-designed templates to begin editing)
- Set up your Hero banner choosing whether to show Color or an Image behind the collection page title and whether to use a Content boundary effect. Within the Content settings, choose whether to Show collection description or Show breadcrumbs.
- Click on the Collection section on the left hand side. This section represents the entire collection page.
- In the Layout settings, the number of Products per page and the Product card size can be selected. All collections using the Default collection template will follow the settings selected here.
Filtering and Sorting
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 Filtering and Sorting 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 Alchemy, the Filter button is anchored to the right hand side of the collection page and once the button is selected, the filter side drawer is visible.
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 to see the collection page settings and scroll to the Filtering settings.
- Choose Filtering > Enable filtering. 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 product counts, Filters open by default (desktop) and Visible options per filter.
- Theme swatches can be shown in the collection filters. Refer to the Swatches guide for more information.
- Select Enable sorting and choose which of the Enable order settings that should be shown. The collection's default sort order will always show.
How to control the product card layout
In Theme Settings > Products 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 product cards can be customized further by choosing what to show on the card such as the product vendor, product rating and inventory.
The Products per row on mobile, Image shape (aspect ratio), Image fit 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 more than one image, the Show second image on hover setting can be selected. If this setting is not selected, then the main product image will be displayed.
Product labels
In the Alchemy 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 Alchemy theme includes a side drawer quick buy on large screens which allows customers to purchase products and see product information without leaving the collection page. The Alchemy 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 > 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 > Product cards > Show product rating.
How do I show swatches on the collection page?
Refer to swatches for more information about how to set up your swatches.
To use Shopify swatches in your product cards, navigate to Theme settings > Swatches > Shopify swatches > Show in product cards
To use Theme swatches in your product cards, go to Theme settings > Swatches > Theme swatches > Swatch style in product cards
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'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