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.
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
- 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)
- The Default collection template comes pre-loaded with the Collection banner and Collection products section.
- Click on either section to edit its 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 title, product count and collection description can be set here, along with the Content alignment, the Collection image aspect ratio and source, the Content width and the Colour scheme used.
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 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 as entered in Admin > Products > Collections.
None can also be selected if you wish to hide the image completely.
If the aspect ratio chosen here does not match that of the source image, some cropping will occur.
Further to this, the size of the image relative to the rest of the banner content can be adjusted using the setting Content width > Standard or Content width > wide. This will increase or decrease the width of the text area, and in turn the size of the image, depending on the desired appearance.
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 the collection. By using dynamic sources (metafields), many sections could be used as the introductory banner for the collection.
The screenshot below is using the Image banner section, with the collection title, description and image being referenced as a dynamic source.
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 and the Product card size (grid view only) 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.
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 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.
- 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 THEME BLOCKS to display.
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.
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.
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.
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, versions of the Enterprise theme after 1.3.0 support this. Infinite scroll and pagination styles are managed under Theme settings > Design > Pagination.