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
By default, the Collection banner will use the Image assigned to the collection in the Shopify admin area. To change this, or if no image has been assigned to the collection, consider enabling the setting Use the first product image as the collection image.
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), other sections could be used as the introductory banner for alternative collection templates.
Note
It is recommended to use the original collection banner section on the default collection template. Any automatically created collection templates (such as /collections/all or a vendor or type filtered collection page) will use the default template.
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
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.
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.
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 #
VotraLee 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
Highlighted product cards are a more complex feature that requires a base level understanding of how metafields work. For support on metafields, refer to Shopify Metafields guide.
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.
