Tutorial: Create additional collection templates

If you'd like to use a custom collection sidebar, collection menu (link-list) or collection settings for one or more collections, you can create a second or more collection template. That will allow you to assign the template to a certain collection and then customize that collection differently from other collection pages. 

How to:

For this to work, you'll need to be working with a live/published theme. Draft themes can't show custom templates unless you create the templates on both the live and draft themes. 

Start by opening the Code Editor:

There will be two main steps using the Code Editor when creating a new collection template. One will be creating a new section file and the second is an actual new collection template which links to the section file.

1

Create a new section file

When we create a new section file for the alternate collection template, we will use the same code from your theme's existing collection section file. Let's begin by creating a new section file, and then copy the code from the theme's existing section file into the new file. 

In the Sections folder, choose Add a new section:

Call the section:

collection-1

Example:

Use the Create section button to complete. 

Erase all the default code that generated:

After deleting the default code, we will copy the code from the theme's existing sections/collection.liquid file and paste that code into our new collection-1 file.

(1) From the Sections folder, open collection.liquid:

(2) Copy all the code from the right side. Use Command-A on Mac or Control-A in Windows to select all the code:

Use Command-C on Mac or Control-C in Windows to copy the code 

Next, paste all that code into the new section file you created, collection-1.liquid:

To paste, use Command-V on Mac or Control-V in Windows

(If you were unable to paste any code, return to the theme's collection.liquid file from the sections folder and copy all the code again)

Example after pasting the section code:

After you've pasted the code, save the file. 

One final step for the Section file. (1) Use the Find feature in the code editor, Command-F on Mac or Control-F in Windows and search for:

Collection page

When you find "Collection page", which should be in the schema area of the code (2):

Change from (inside the quotes):

Collection page

Change to:

Collection custom

Example:

Save the file. 

2

Create a new template

Now that we have created a new section file and added code from our original section file, we can create the new alternate template. This file will reference the section file created in Step 1. 

From the Templates folder, choose Add a new template:

Change the type (1) to collection and (2) call it alternate-1:

Use the Create template button to complete. 

Next, we will modify the default code in Line 1:

Change the line from:

{% section 'collection' %}

Change the line to:

{% section 'collection-1' %}

Example after:

Save the file.

3

Assign the new template to your collection

We're finished with the Code Editor. Now let's assign the new template to the collection which will have the custom sidebar and settings.

In your Collections setup, choose the collection and modify the template option to collection.alternate-1:

Change from collection:

Change to: 

Use the Save button at the top to complete. 

4

Browse to the collection in the Theme Editor

Open your Theme Editor:

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

Browse to the collection that has the custom template assigned. This is important, make sure you browse to that collection in order to see and set the new settings.

Once you're at the right collection page, you'll see the sections settings on the left:

You'll know all your steps were completed correctly if you see the Collection custom section option rather than the regular Collection page option here.

Now you can customize the sidebar or any of the collection settings just for this collection. If you want to use this template on another collection as well, that's fine. Just remember it will share the settings for any collection that has collection.alternate-1 assigned. Changing a setting will affect all the collection pages that use this template. 

Custom menus in the sidebar

If you'll be adding custom links in the collection sidebar, then under Custom link list, choose Select menu:

If you've already created the custom menus, select the menu or create a new one:

Creating additional templates

If you need another completely different collection template to hold different settings, then repeat all the steps but choose a different name like. For example, in Step 1, use:

collection-2

You can use the same code from the link in Step 1.

In Step 2 create a new collection template and call that alternate-2

Change the default code to link to the new section file from Step 1:

In Step 3 you would also choose that new template. 

Repeat for additional templates, always use new section and template filenames.