Checkout Toolbox

Flex Theme Sections

Linear Shopping Experiences

Create a List of Collections Page in Your Shopify Store

Here's a page template that I commonly make for stores.  I call it List of Collections and it's very useful when building out the main navigation.  It's also very easy to make.

When to Use

When I'm creating a navigation for a store, I frequently use fly-out menus like in this example.

On this site, the 'Select Your Vehicle' element has a fly-out with 23 choices.  Each one of the choices takes the user to a collection page.  But what page does clicking 'Select Your Vehicle' take the user to?  If the user would go to a collection page, their would be too many products there for them to sort through.  So, this is where I insert the List of Collections page.  It looks like this:

Each of the items on this page links to a collection.  And this list is the same as the list from the flyout menus.

So, in a navigation where the appropriate collection would have too many products to be useful for the user, I instead bring the user to a List of Collections page where the can choose from the options shown.

How to Make

To make a List of Collections page template, go to 'Edit HTML/CSS' in your CSS.  You'll want to 'Add a new template'.  Create a new Page called list-collections.

Now, the next part will vary depending on how your theme is using sections.  Your theme already has a template named 'list-collections.liquid'.  This template is used to render the page https://your-store.myshopify.com/collections.  You are going to merge the content of that liquid file into your newly created page.list-collections.liquid.  You'll want to place the list-collections.liquid code onto the page where you want its content to fall.  And this could be a little complex depending on if the Page template is using sections and how its using sections.  But when you are done, you'll have a page that looks like the collections page, but you'll also be able to add your own content to through the admin under Online Store / Pages.

The next step is to change one line of code, so that you can control which collections get shown on this page.  So find this line in your template:

And replace it with these two lines:

Your new page template is now complete.

Making it Work

Here's to put your new template into action.  First, you'll need to create a page that uses the page.list-collections template.  And you need to make (or use an existing) linklist that contains the collections that you want to show.  Linklists are managed in the Shopify Admin under Online Store / Navigation.  You'll need to have each item in your linklist point to a Collection like so:

Now to make this work, your page must have the same handle as the linklist. Once the handles are the same, you'll see the collections specified in the linklist show up on the page.

There you go.  You now have a handy new template in your theme that helps in navigating large product catalogs.


JadePuma is a certified Shopify Expert. If you need any help with your Shopify store, we can help.


Search