Collection pages

Gather your products together to form collections and display links on your storefront to view dedicated pages for these collections.

Overview

Once you have added some individual products to your store, it is likely you will want to categorise these in some way, organising them into groups. 

If you are a clothing store, you may sell many different types of apparel, such as hoodies, socks, jeans, gloves, hats, tees and so on. You could create a collection for each of the above.

Note

The more items you offer, the more important it is that your products remain easy to find, both for your customers and yourself.

Collections can be linked to on your storefront so they display a certain number of products (with product images), from that collection, or you could add a simpler, text link, in your footer, for example.


What is a collection and how do I make one?

Here is a list of the most salient points about collections:

Tip

Here is Shopify’s guide on creating a collection:
help.shopify.com/manual/products/collections


How can I display or link to my collections on my storefront?

Here are two examples of how you can display your collections on your storefront.

The first example is a text link in the footer:

If you need help with setting up footer links, there is a great resource available here:

https://docs.wetheme.com/footer/sections/footer

Here is a more visual representation of your collection, using the “featured collection” section:

More info is available on specific sections and their options here:

https://docs.wetheme.com/flow/sections

Note

If a collection has no products added to it, the Shopify platform will display placeholder images instead, with a price of £19.99, like this:

Once your collection page link is clicked on, regardless of visual format, your customers will be taken through to your products contained within that collection, which you previously grouped together in the admin area.


What control do I have over my collection page layout?

To view your collection page, head here:

  1. Admin
  2. Online store > Themes > Customise
  3. Select 'Collection pages' from the page selector dropdown:
  1. Select 'Collection pages' from the left-hand settings panel:

Collection image

To display the collection's image at the top of the page, check the "Show collection image" option. You can then enable the parallax effect and define the size of the image below. Please note: the parallax effect will only work if the collection image size is not set to "Original". 


Layout

Feature

Sidebar

Grid


Show collection description

When you uncheck this option, the collection description will be hidden. 


Enable filters

If you'd like your collection page to be filterable, check the Enable 'Filter' option. The results can then be narrowed down by tags. 


Enable and manage sort menu

Manage your sort menu by navigating to Collection pages > Collection pages:

Here you can enable or disable the menu first of all: 

But moreover, you will be able to control exactly which sort options you'd like to include in the menu:


Products per row

Desktop: Choose from 2-6

Tablet:  Choose from 2-4

Mobile: Choose from  1-3


Enable tag filtering

Use the toggle in your theme settings to switch between visible and hidden:


Number of products per row

Choose how many products are displayed per row.
Select 3 or 4.


Number of rows

Choose how many rows are displayed per page.
Select from 1 to 10.


Pagination type

You can choose from 3 types of pagination for your collection pages:

Paged navigation
Will allow the customer to navigate the collection by using arrows and a numbered page navigation at the bottom of the page:

Infinite scrolling 
With infinite scrolling, new products will load automatically as the customer scrolls down the page.

Load more button
This option gives the user a bit more control over when the new products are loaded onto the page:


Enable quick view

This displays a “shop now” button on image hover:

When the button is clicked, a drawer with product overview is shown.

Note - this option only affects desktop, as it's not possible to 'hover' over a product on mobile.


Enable hover effect

Shows your products' second image on hover:


Show vendor

Toggle between hidden and visible:


Auto-height images

Toggle whether the auto-height feature is enabled or disabled.

This setting uses advanced CSS to provide enhanced visual consistency and continuity.

Note

Whilst this setting can tidy up your images and attempt the unify the way they are displayed, the only true way of aligning your images is to keep them consistent in aspect ratio by cropping correctly before uploading to the Shopify admin area.


Reviews

Toggle between hidden and visible.

Note

You will need to install Shopify's Product Reviews app before enabling this option:

apps.shopify.com/product-reviews

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.