Collections list

If you are looking to display every one of your collections in a central place, as opposed to, or as well as on your storefront’s homepage sections, then the collections list is for you.

Many customers arrive at a site and after a few minutes decide they really like a few products. It’s after this that they often like to dig deeper and see everything offered on the store, so they can go on to add multiple items to their cart and assemble a selection of goodies which suit their needs.

Having this dedicated page in place gives your customers the chance to be exposed to many more choices and options that may have been the case if they had seen a single “featured collection” section on your storefront for example.

The collections list shows the broadest view possible of your store’s offerings and is a very solid component to any successful online shop.

Getting Started

To get started, head to:

  1. Admin

  2. Online store → Themes → Customise

  3. From the dropdown page selector, choose “Collections list”

  4. From the left-hand-side settings panel, choose the option “All collections”

Tip

Here is Shopify’s guide on creating a collection:

Settings

Use the control here to add an image to the top of the page:

Image Size

Change between 'Small', 'Medium' and 'Large' to display a reduce cut-out of the image.

If the 'Original' option is selected, the image will be displayed in full instead, in its original image dimension.

Enable parallax effect

This adds a visual effect to the image, which your customers will notice as they scroll up and down the page.

This is only applicable for the cut-out Images Sizes, and won't be applied to 'Original' Image Size images.

Layout options

Show page title:

This displays your page title below your main navigation menu:

Enable Hover effect:

Shows your products' second image on hover.

Layout style

Preview:

This shows a number of products from each Collection, with each Collection assigned as a separate horizontal row.

Grid:

This displays each Collection via its assigned Collection Image (or a placeholder image, if none has been assigned) separated in horizontal rows.

Items per row

This slider affects the above ‘Layout style’ options, varying how many images or collections are shown on each row.

Choose between the values 2, 3, 4 and 5.

Choose Collections

Select collections to show:

All:

All of your collections are listed by default.

Selected:

Customize your list, by choosing and adding collections manually.

Content

Add collection:

Scroll to 'choose Collections' and then check 'selected'.

Click “add collection” at the of the editor options and then choose which collection to use.

To remove, select the collection and then “remove content”.

Further reading

If desired, you can create a new Alternative template for your Collection Page template and assign certain collections, to mimic the Collection List template on a more specialised basis:

Please note that this would need very heavy code customisation, please see the guide below for further information regarding this: