What are collection pages?
A collection page displays the products assigned to a particular collection on your store. Grouping products into collections makes it easier for customers to find them, can increase the chances of impulse purchases and may increase overall store 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 collections documentation for more.
How to set up the collection page
Steps
- Open the Theme editor and select Collections from the dropdown at the top then select your chosen template (e.g. Default)
- There are a choice of three heading layouts
Card in grid - the collection title and description will display as the first product card. There is an option to display the collection image by selecting Show collection image in the Card heading settings. As well as being visually appealing, this is a great way to get your products as high up on the page as possible, maximising the screen real estate.
Row - the collection title and description will cover the full width of the screen and will show above the product cards.
No title - the collection title and description will not be shown. This can provide the space to add a different section such as an Image with text overlay section which can be used as a hero banner. - Promotional cards can be added to the product grid, see the article Promotional cards for more information.
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 Filter and sort collections without loading a new page.
- Swatches can be shown. Refer to Swatches for more information.
How to control the product card layout
The collection template settings only affect the layout of a specific template. Product card theme settings 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 go 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.
- 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.
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. Use the setting Show additional images to show other product images.
Product card color
Products can be displayed without a background or they can be shown on cards. When used, the product cards take their background color from one of the three theme color schemes or, by using a special metafield, it's possible to show a different background color for individual products.
Steps
- Open the Theme editor and choose Theme settings > Product cards.
- Select a Color scheme or No card for no background.
- Choose Tint image with card color if you wish to blend images that have light backgrounds into the background color for product card. This simple yet powerful feature removes the need to process your images through time consuming image editing tools and within a few clicks can enhance the look of product images.
Where it's desirable to draw attention to a specific product card, or to show different types of product on different background colors, the theme allows you to use a metafield to choose custom background colors for individual products.
Steps
- To create a metafield for a custom product card background, open the Shopify admin and go to Settings > Custom data.
- Add a product or variant metafield with the namespace and key 'theme.card_bg', and the type 'Color'.
- In the Shopify admin, go to Products, edit a product and find the newly created metafield. Choose your preferred color using the color picker and save the change.
Product card shape
Product cards can have rounded or square corners. It's also possible to control the space between cards. These general layout settings will apply to various components across the store to ensure consistency e.g. announcement bar, collection cards, product cards and labels.
Steps
- Open the Theme editor and choose Theme settings > Layout.
- Choose the Space between cards and a pixel value for the Card rounded corners. For square corners choose zero pixels.
Product labels
In the Mode 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
How to switch on the quick buy
Quick buy, which is referred to as Quick view in the Mode settings, allows customers to purchase products and see product details without leaving the collection page. It can be used on both desktop and mobile devices. Clicking on the Quick view button will open a quick view drawer for products with variants or there is a direct Add to cart button for single variant products.
Steps
- Navigate to Theme Settings > Product cards > Quick view
- Click on the Quick view style dropdown to select whether to show an Add to cart button for single variant products or to use the Quick view button for all products. If no quick buy is required, choose the option Disabled.
- Configure the Quick view visibility for desktop and mobile.
- To change the color of the quick view drawer, go to Theme settings > Colors > Page background. Note that changing this color will also change the background of the store.
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 view.
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 > 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.
How do I control which filters are shown on the collection page?
This is managed using the Shopify Search & Discovery app. Refer to the Search & Discovery guide to filters to learn more.
How do I show the 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.
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