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.
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 or characteristic. Refer to Shopify's Collections documentation for more.
Tip
How to set up a collection page
Steps
- Open the Theme editor and select Collections from the dropdown at the top then select your chosen template (e.g. Default)
- Click on Collection pages to see the collection page settings.
- The collection image can be shown behind the title by choosing Show collection image behind title. Additional settings such as the Heading image height, and Overlay style can be used to customize the layout.
- Set the collection Description position to Below the collection title or Below products. The Below products position is useful if the description is too lengthy to display at the top of the collection page but desirable for SEO.
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 under the collection title and image. Select the collections and layout in the related collections / subcollections settings. Refer to subcollections for more.
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 collection page settings 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.
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 to see the collection page settings and scroll to the Filters settings.
- Choose Filters > 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 your filters using the settings provided such as Show filter counts, Show filters with zero results and Enable stick on scroll.
- Swatches can be shown by checking the option Theme settings >Product cards > Enable swatches in collection filter. Refer to Swatches for more information.
- Select to Show sorting dropdown and further specify which sorting options are shown or hidden for this template to ensure only the most relevant are shown in the sorting dropdown e.g. Enable order: Price. The collection's default sort order will always be shown.
Filters in a button grid
In version 7.2.0 and above, a new setting called Filters to show as buttons, is available. This is where any existing filter can be converted to a button, instead of being displayed as either a one or two column list.
Steps
- Click on Collection pages and scroll to the Filters settings.
- In the Filters to show as buttons setting, enter the filter names from your existing filters, using a comma to separate each one.
- Select Enable sticky filter column to anchor the filters to the left hand side of the page.
How to control the product card layout
There are collection template Layout settings which only affect the layout of a specific template and Product cards theme settings which affect the appearance of product cards across the store.
Steps
- Open the Theme editor and select Collections from the dropdown at the top then select your chosen template (e.g. Default)
- Click on Collection pages to see the collection page settings and scroll to the Layout settings to choose the Number of products to show per page.
- Select the Products per row for larger screens. The number of products per row on mobile devices can be controlled in Theme settings > Product cards > Products per row on mobile.
- Use the collection page layout setting Show product total to show the current product count at the top of the collection page.
- Choose whether to Show product vendors under the products on the collection page. Showing information such as the brand name under each product in addition to the title and price can be useful to give customers more information at a glance.
- To show color swatches, discount or inventory labels, review stars or product subtitles head over to Theme settings > Product cards. These settings apply across the store.
- Set the Text alignment for any information shown under the product card in Theme settings > Product cards.
Image shape
Image control settings apply across the store whenever product cards are shown. They affect many different areas in your store such as the collection page, featured collection section, product list section, complementary products block etc.
To choose the predominant image shape go to Theme settings > Product cards. 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.
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
Product subtitle
A product subtitle can be shown on the product card under the product title.
Note
Steps
- In the Shopify admin area, add the Shopify Product subtitle metafield using the standard Shopify product subtitle definition. The namespace and key for the product subtitle metafield is descriptors.subtitle.
- In the Shopify admin area, edit products to add a subtitle.
- Open the Theme editor and navigate to Theme settings > Product cards
- Select Show subtitle to show the subtitle on the product card.
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 the 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. 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.
Steps
- Navigate to Theme Settings > Product cards
- Click on the Quick buy link style dropdown and select the style to be Button or Whole product. If no quick buy is required, choose the option disabled.
- Set the color for the Quick buy in Theme settings > Colors > Product quick-buy > Color scheme. If a high contrast color scheme is chosen, use the color scheme setting Use scheme color for sale price, inputs, and product statuses to ensure that all product information and variant names remain legible.
Many product page blocks, such as the product description, can be included in the quick buy using the Show in quick buy setting for that block on the product page. App blocks can be shown in quick buy using the setting Theme Settings > Product cards > Show app blocks in quick buy.
FAQs
How do I control the /collections/all catalog page?
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 and use the default collection template. 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 > Product Reviews > Show rating in product cards.
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 cards > Enable swatches in product cards to show swatches on the collection page under the product cards.
To show swatches in the filter, go to Theme settings > Swatches > Collection filter > Enable swatches in collection filter.
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.
How can I increase the quality of the images?
When the Crop image to shape setting in Theme Settings > Product cards is used, check that the Image shape chosen matches your predominant product image shape.
Versions of the Symmetry theme after 7.1.0 include three different image quality settings in Theme settings > Advanced > Image quality. The Standard option will will ensure that the most compressed version of images are served and should be the best option for speed. If greater clarity is required, the Higher or Highest options can be chosen instead.
What is the product subtitle?
The product subtitle is a standard product metafield definition by Shopify. Standard metafield definitions exist in Shopify for some common use cases. The namespace and key for the product subtitle is descriptors.subtitle. To show this product level metafield on the product card, go to Theme settings > Product cards > Show subtitle.
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