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)
- 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.
Note
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.
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 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.
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 Theme 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.
Filter promotion
The Filter promotion provides another opportunity for key marketing messages to be shared and it is available in versions 1.6.0 and above. It shows on large screens only and is anchored to the bottom of the collection filters.
Use the settings to add an Image or Video upload, Text, Link URL and a Button. Use the Style settings to choose the Text color, Tint color and Tint opacity.
How to customise Product cards
In Theme Settings > Products cards there are many settings that can enhance the look and feel of a product card. These settings are relevant to any page or section throughout the store that displays a product card. The product cards can be customized further by choosing what to show on the card such as the product vendor, subtitle, rating and inventory.
The Image aspect ratio, Image fit and Image alignment settings can all be adjusted to ensure that images in the product cards are displayed in the best way possible.
Where a product has several images, the images can be shown in three different ways:
None - The first product image is displayed, and does not change.
Second image on hover - When a customer hovers over the product card image, the second image shows.
Slideshow - The images feature as a mini carousel and this is available in versions 6.1.0 and above.
In the Style settings, product cards can Show as a box, and the Box background color, Box text color and Box border color can be adjusted. This can assist in making product cards stand out more from the page background.
How to create a highlighted product card
Enterprise has the functionality to highlight selected product cards in version 1.6.0 and above. This is particularly useful when specific product cards need to stand out for a special promotion for example, or just to catch customers' eyes and encourage a purchase.
Note
Steps
- In the Shopify admin area, create a 'True or false' product metafield with the namespace and key 'theme.highlight'
- In the Shopify admin area, go to Products and open the product that you wish to display as a highlighted product card.
- Scroll down to the Product metafields section and select 'True' in the Highlighted Product metafield.
- Open the Theme Editor and go to Theme Settings > Product cards.
- Scroll to the bottom and see the Highlighted cards settings.
- Select colors for the three settings Highlight background color, Highlight text color and Highlight border color.
- Go to a Collection page or a section that displays product cards, such as a Featured collection section that includes the product above, and view the product card.
FAQs
Why is my promotion not showing?
If you have added any of the four promotion blocks (Wide, Media, Card and Filter) 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.
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