Collection Pages

Overview

A Collection page is where your products are categorized into a collection, allowing your customers to find what they are looking for easily.

Collections are a group of individual products - a single product can be featured in multiple collections across your site, and therefore multiple versions of this product are not required in your admin.

Collections are not controlled by the theme, and can be created either manually or automatically with your Shopify admin space - click here to read Shopify's help pages.

Example of a Collection page.

Example: A clothing store sells tops, jeans, hats, footwear, and underwear - the merchant therefore creates a collection for each of these types of apparel.

Steps

  1. Within your Shopify admin, go to Sales Channels > Online Store > Themes.

  2. Click your theme, and select Customize.

  3. Go to the drop-down menu at the top of the page.

  4. Scroll down to select Collection pages.

Collection pages.

Adding Collections

Creating Collections

In order to view your collections, they must already exist within your Shopify admin.

Steps

  1. Within your Shopify admin, go to Products.

  2. In the drop-down menu underneath, select Collections.

  3. To add a new collection, select Create collection.

Shopify admin > Products > Collections

To learn more about Collections, click here to read Shopify's help pages.

Accessing Collections Through Sections

Depending on how you set up your store's navigation, your customers can access your collection pages in various ways. However, the most common entry point to your collection pages is often through collection sections.

Your Featured collection section is where you display your products from one particular collection.

Example of a featured collection section.

To learn more about featured collections sections, please read our guide:

Collections List Section

Your Collection list section is where you can advertise collections of your choice on your homepage.

An example of a collection list advertising three collections.

To learn more about collection list sections, please read our guide:

Content

Enabling Sidebar Content

If you would like a sidebar to be displayed on your collections page, scroll down to Sidebar and select Enable sidebar content.

Sidebar > Enable sidebar content

Adding a Content Block

Under Collection pages > Content, you will be able to see content blocks on the left-hand menu.

By selecting Add content, you can feature the following content blocks within your sidebar:

Adding sidebar content blocks.

Moving Content Blocks

You can drag and drop these content blocks to change the order that these images appear within your gallery.

Moving content blocks to change the order your sidebar contents appears in.

Text

By selecting Add content > Text, you can add a Heading and a block of Text to the sidebar on the left-hand side of your collection page.

The Heading can only feature plain text, and therefore can't include any bold or italic text. The Text can be formatted as bold, italic, or linked text.

Adding a text content block to the sidebar.

Vendors

By selecting Add content > Vendor, a list of your store's vendors will appear on the sidebar on the left-hand side of your collection page when this content block has been added - use the Heading entry field to choose a title for this list.

Adding a vendors list to the sidebar.

Menu

By selecting Add content > Menu, you can choose a menu to add to the sidebar on the left-hand side of your collection page when this content block has been added.

In order to add a menu to your theme, this menu first needs to exist within your Shopify admin settings.

Steps

  1. Within your Shopify admin, go to Sales Channels > Online Store > Navigation.

  2. Select the menu you wish to add.

To learn more about menus and links, click here to read Shopify's help pages.

Click Select menu to choose your menu from the drop-down list, and use the Heading entry field to choose a title for this menu.

Selecting a menu for your collection lists sidebar.

Image

By selecting Add content > Image, you can add an image to the sidebar on the left-hand side of your collection page by clicking Select image.

Upload a new image, or select a pre-existing image from your Library or Shopify's Free Images.

🌟 We recommend using an image which is 300 x 150 pixels.

Uploading an image to the sidebar of your collection page.

Products Per Row

You can control how many products appear on each row of your collection page, with a minimum of 2 and a maximum of 6.

To select a number, simply use the Products per row slider.

Changing the products per row.

Rows Per Page

You can also control how many rows of products your collection page displays, with a minimum of 3 and a maximum of 8.

To select a number, simply use the Rows per page slider.

Changing the rows per page.

Enable Sorting

By selecting Enable sorting, a Sort drop-down menu will appear allowing you to choose the order that products appear on your collection pages.

The Sort drop-down options: Feature Alphabetically, Z-A Price, low to high Date, old to new Price, high to low Date, new to old Alphabetically, A-Z Best Selling

Enabling product sorting.

Enable Tag Filtering

By selecting Enable tag filtering, a Filter drop-down menu will appear allowing your customers to sort through your products according to their tags.

Enabling tag filtering.

To learn more about creating and using tags, click here to read Shopify's help pages.

Pagination Type

Under the Pagination type drop-down menu, you can choose how your customers proceed in viewing the next set of products once the end of the page has been reached.

Paged Navigation

By selecting Paged navigation, your customers can select which page number they wish to go to.

Page navigation.

Additionally, customers can also use the Previous and Next buttons to navigate through the page numbers.

Previous and Next options when there are more products to be displayed.

Infinite Scrolling

By selecting Infinite scrolling, the next set of products will load once your customers scroll to the bottom of the page.

Infinite scrolling enabled.

Load More Button

By selecting Load more button, your customers will have the option to click Load more once they reach the bottom of the page.

Load more button enabled.

By selecting Load more, your customers will simply be able to continue scrolling down the same page, rather than being taken to a new one.

Example of the Load more button.