What are collection pages?
A collection page displays the products that are assigned to a particular collection in the store. Grouping products into collections makes it easier for customers to find them by category.
Note
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, can be used to create different layouts for different collections.
Collections of products are created in the Shopify admin area, within Products > Collections > Create collection. Keep in mind that collections are intended to help 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.
How to set up a collection page
Steps
- 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)
- In the Template group, click on Collection Pages to see all the settings that can be customized.
- To create a Collection image, go to the Shopify admin area and select Products > Collections. Select the collection, and under Collection image, click Add image.
- To show a Collection image at the top of the collection page, click on Collection pages > Heading > Show collection image behind title. Additional settings such as the Heading image height, Overlay style and Description position can be adjusted to customize the look further.
Filter and 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 Collection pages > 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. The filters are set up in the Shopify admin area, refer to Shopify's storefront filtering documentation for more.
How to control the product grid layout
The settings to control the product grid layout on the collection page are split between the collection page specific settings and more general settings which affect the appearance of product cards across the store.
The image control settings apply across the store whenever product cards are shown (for example on the collection page, featured collection section or product list section). They can be found under Theme settings > Product grid. It is possible to adjust the Image shape, Image alignment and the cropping of product images to ensure a consistent layout. This is very useful in stores where the original product images are not all the same shape. It's also possible to Show additional images on hover.
The number of Products per row on larger screens has a specific setting for the collection page in the collection page Layout settings. The number per row on mobile devices applies across the store and can be controlled in Theme settings > Product grid > Products per row on mobile.
Showing information under each product in addition to the title and price can be useful to give customers more information at a glance. The theme includes the option to display the subtitle metafield (Theme settings >Product grid > Show subtitle), the product vendor or brand (Collection pages > Layout > Show product vendors), color swatches and discount or inventory labels.
Product labels
In the Symmetry theme, labels can be shown over the image or next to the price to communicate important details such as pre-order, new in, sold out and on sale. Refer to product labels for more.
Swatches
Refer to Swatches
Full-width layout
This powerful layout option allows screen space to be maximised. Select Theme settings > Layout > Use full-width layout on collection pages.
How to switch on quick buy
The Symmetry theme includes a slide down style quick buy on large screens which allows customers to purchase products and see product details without leaving the collection page.
Steps
- Navigate to Theme Settings > Product grid
- Click on the Quick buy link style dropdown and select the style. If no quick buy is required, choose the option disabled.
Certain product page blocks such as the product description can be switched on or off in quick buy using the settings for that block on the product page. App blocks can be shown in quick buy using the setting Theme Settings > Product grid > Show app blocks in quick buy.
The Symmetry theme does not have a quick buy on mobile. Instead, on smaller screens, the customer is taken straight to the product detail page.
How to show links to other collections
In the Symmetry theme, an additional subcollections navigation can be shown at the top of the collection page. Refer to subcollections for more.
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 Shopify review stars on the collection page?
If your store is using the Shopify reviews app, review stars can be shown below products on the collection page. Go to Theme settings > Product grid > Product Reviews > Show rating in product grid
How do I show swatches on the collection page?
Refer to swatches for more information about how to set up your swatches. Go to Theme settings > Swatches > Product Grid > Enable swatches in product grid to show swatches on the collection page.
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
