Story theme - How to create an alternate Collection template

Story theme includes the ability display a custom navigation menu on collection pages to help customers navigate to additional collections or links:

When activated, all collections will display the same menu. 

If you have the need to show a different menu on another collection page, you can create an alternate collection template. This tutorial will walk you through the steps needed to create an alternate collection template. You can build as many as needed, each will need unique filenames for the section and template file. 

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 3:

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:

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. 

Collection Navigation

You'll now be able to assign a different menu for the collection that has collection.alternate-1 as the template:

Important: All collection settings will be reset for this new template (collection.alternate-1). Adjust all collection settings and tag filter content etc. to make this collection page look similar to the rest of the collections using the standard collection template. 

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.