Tutorial: List two or more collections on one page

In this tutorial, we will display products from two or more collections on one page.

Example result with banner images:

Example without image banners:

Steps involved:
1. Create two or more section files.
2. Create a template file and call those section files.
3. Create a page and assign the custom template.
4. Add your page in your navigation.
5. Setup which collections to show in the Theme Editor. 

1

Create section files for each collection that will be displayed

Open your Code Editor:

In the Sections folder, choose Add a new section:

Call the new file:

page-collection-1

Example:

Use the Create section button to complete.

Erase the default code that's generated:

Replace the code with this code from this gist file (click link to view code):

OPTION 1

Pipeline 5.0 and higher:
Click to view mobile code

OPTION 2

Earlier versions of Pipeline:
Click to view mobile code

Save the file.

Repeat

Repeat for as many collections you'd like to list on your custom page.

For example, create a second section file called:

page-collection-2

Use the same code from the gist file in each file you create. 

For this tutorial example, you'll need at least two section files. Complete creating page-collection-2 before proceeding to Step 2. 

2

Create a template file

Once you've created at least two section files, the next step is to call those files in a new template file.

In the Templates folder, choose Add a new template:

Choose page as the type of template in the first drop-down:

Call the file:

multiple-collections

Example:

Use the Create template button to complete.

Option 1 - No main heading for collection page

Erase all the default code that's generated:

Option 2 - Use a main heading for the collection page

If you'd like to have a title for the page, keep this line of code:

Each collection on the page will have a title for that collection. The main heading is a page heading and is optional. 

Part 2

Call the sections files from Step 1 into the template:

After choosing an option, add the following code:

{% section 'page-collection-1' %}
{% section 'page-collection-2' %}

Example for Option 1:

Example for Option 2:

If you created more than two sections files, add the additional references as well. 

Example:

Code example:

{% section 'page-collection-1' %}
{% section 'page-collection-2' %}
{% section 'page-collection-3' %}
{% section 'page-collection-4' %}

Save your file.

3

Create the page that will show your collection items

We can now create a new page that will show our two or more collection items. Create a new page in the Page Editor:

https://shopify.com/admin/pages

(1) Add a title for your page (required). This title will be shown if you used Option 2 from the previous step. If you used Option 1, the title is still needed but won't be shown on the page.

(2) Choose your new page template:

Be sure you've selected the page template:

Save the page. The content area can be left blank. 

4

Choose the collections to display on your page

Open the Theme Editor:

https://shopify.com/admin/themes/current/editor

In the Theme Editor, navigate to the custom page you created. If you use the top drop-down menu, you can scroll down to list of pages and select your new page. The other option is to add your page into your main navigation and then browse to that page in the Theme Editor using your navigation.

Once you've navigated to the page, your left sidebar section options will appear:

You can now start configuring these sections. It's similar to the homepage Featured collection module. 

Some of the key settings are:

(1) The heading for the Collection (not to be confused with the title if you used Option 2 in Step 2). This is the heading shown above the collection grid listing. Typically, this would be the name of your collection. 

(2) Choose your collection

(3) How many products per row and how many rows to show on this page and a View all button option after the last row. 

(4) An optional image to display before the grid of products.

(5) If you use an image, you can display the full image height or a smaller cropped version. 

Each section you created can have different settings. Example more rows shown or even more items per row. 

Save your changes and view your page. 

Remove collection title underline

If you use the collection heading and would like to remove the underline below the title, you can use this modification:

Example:

Code:

/* -- code remove H4 heading underline -- */
.template-page h4.home__subtitle::after  { display:none;  }
.template-page h4.home__subtitle {
    margin-bottom: $gutter / 3;
}
/* - end - */