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 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.
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 a the top (or select one of the pre-designed templates to begin editing)
- Click on the Collection banner or Collection products to edit the settings.
How to set up the collection banner section
The Collection banner section, which is often placed at the top of the page as a way of introducing a collection to customers, contains a number of settings that can be used to customize its appearance and functionality.
The visibility of the collection heading, product count and collection description can be set here, along with the Text alignment and Text Position. The Collection image shape and a the Colour scheme can also be selected.
Collection banner image
There are a number of settings that can be used to change the size and aspect ratio of a collection image.
The dropdown under Collection banner > Collection image shape offers a range of options to customize the aspect ratio of the Collection image. Natural will display the image in exactly the same aspect ratio as it was uploaded, whereas Landscape (4:3), Landscape (16:9), Square and Portrait will change the aspect ratio as indicated.
If Fill is selected, the aspect ratio will automatically adjust to fit the height of the banner, which itself is determined by the collection title and collection description (if shown) as entered in Admin > Products > Collections.
Note
If the aspect ratio chosen here does not match that of the source image, some cropping will occur.
Tip
Alternatives to the collection banner
It should be noted that the Collection banner section doesn't have to be used as the main banner for all collection templates. By using dynamic sources (metafields), many sections could be used as the introductory banner for alternative collection templates.
The screenshot below is using the Image banner section, with the collection title, description and image being referenced as a dynamic source.
Note
How to set up the collection products section
The Collection products section is where products from collections assigned to the template will be displayed on the page.
Under Layout the number of Products per page, Product per row on mobile and the Product card size on large screens (does not affect the list view) can be set to best suit the collection(s) using the template.
All collection pages utilize a toolbar above the product grid to further extend functionality. Under Toolbar use the setting Show grid/list layout buttons to allow customers personal control of whether products are displayed in a grid or list view.
Note
Filter & 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 Filtering and Sorting which can be used to customize the appearance and functionality of these features, allowing your customers to get to the products they want as quickly as possible.
The filters are set up in the Shopify admin area, refer to Collection filtering for more.
Promotions
Promotions are a great way to highlight certain products, collections, or special sales. They can be added to the grid or list layout, in any position.
Steps
- Open the Theme editor and select Collections > Default collection from the dropdown a the top.
- With the Collection products section selected, click on Add block and choose from a selection of blocks to display.
Wide promotion
The Wide promotion block inserts a full-width banner promotion into the page results. Use the settings under Layout to control its Position in results, as well as its Visibility in grid and list views, whether or not it should be set to Hide when results are filtered and the Minimum height of the promotion.
The Content and Style settings can be used to customize the appearance of the block. Under Content either an Image or Video upload can be selected as the promotion background.
Media promotion
The Media promotion is ideal for inserting a media-rich promotion into the page results. It can be useful for leveraging pre-designed promotional graphics, or full-width images and videos where text content is likely bold and eye-catching rather than lengthy.
Use the settings under Layout to control its Position in results, as well as its Visibility in grid and list views, whether or not it should be set to Hide when results are filtered and the Minimum height of the promotion in List view. Under Content either an Image or Video upload can be selected as the promotion background.
Card promotion
The Card promotion is useful for inserting a graphical promotion into the page results which matches the size of the product cards around it. Longer passages of text can be combined with images and a button to provide a greater amount of information to your customers.
Use the settings under Layout to control its Position in results, as well as its Visibility in grid and list views, and whether or not it should be set to Hide when results are filtered.
Under Content the Colour scheme can be selected from one of those set-up in Theme Settings, and the Image source and Image aspect ratio also selected.
Product cards
Customize product card content and layout using the settings in Theme settings > Product cards. These theme settings control many aspects of the product card layout across the store, including in the Featured Collection section.
Go to Theme settings > Product cards to set the Image aspect ratio, Image fit and Image alignment and choose whether to Show a second image on hover. Set the text and price alignment and choose additional content to show such as the product vendor, weight, inventory level, review rating and subtitle. The handling of sold out product cards is also controlled in the product card theme settings with the option to Fade out unavailable products.
Quick buy and quick quantity
Choose whether to Enable Quick buy to show a quick buy button at the bottom of the product card. The Canopy theme includes a Quick Quantity method to enable customers to view and adjust cart quantities with a single click using the quick quantity button. Select this by choosing Theme settings > Product cards > Enable Quick Quantity for single variant products.
Contained cards
Canopy offers the ability to show cards within a border and with a coloured background. This is controlled using Theme Settings > Product cards > Contained card.
Select the option Remove gap between contained cards to show the maximum number of product cards on the collection page. This option to make the layout more compact applies to all product cards except those on the search results page.
FAQs
Why is my promotion not showing?
If you have added any of the three promotion blocks (Wide, Media and Card) to the Collection products section, firstly check that the block is not hidden by using the eye icon to the right of the block name. Set the promotion block to show if it is not already.
It could also be that the promotion(s) Visibility is not set correctly, and it has been hidden in a particular page view. Under Layout > Visibility use the settings to choose whether the promotion shows in Grid view, List view or Grid and List view. Check these settings against the relevant collection, and the chosen view, and adjust accordingly so the promotion displays as intended.
Another reason a promotion might not be obvious could be the Layout > Position in results setting. Promotion blocks are only shown on the first page of results.
Lastly, it could be that you are viewing a collection page that has had filters applied to it, and that the setting Layout > Hide when results are filtered has been activated. Enabling this setting will hide the selected promotion(s) from filtered search results. Make sure this has not been checked if you wish for the promotions to show even when filters have been applied.
Refer to Promotions for more.
Can I make the list view always show?
No. The Show grid/list layout buttons setting allows customers to control the layout of the product grid. The grid view is always shown by default.
Can I use infinite scroll?
Yes, Infinite scroll and pagination styles are managed under Theme settings > Design > Pagination.
What collection page templates does Canopy come with?
Canopy 6.0.0 comes with some additional collection templates. To locate them, select Collections from the main drop down in the theme editor.
How do I add a 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 product subtitle to show the subtitle on the product card.
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.
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