Featuring collections on a page using a menu
We'll learn here how to feature a subset of your store collections on a page.
By using the word "page" here, we mean a page that lives in your Pages section:
Did you know?
Take note that your online store already has a web page at
/collections which lists all of your store collections in alphabetical order. If you wish to remove collections from that specific page, or re-order them, read Changing your collections page.
This solution will not work in the Brooklyn, Kickstand, Lookbook and Simple themes. It will work in New Standard, Minimal, Launchpad and most Timber framework-based themes.
To tell Shopify to feature collections on a page, you will need these two things:
- a menu containing links to the collections you wish to feature on that page
- a page.list-collections template to assign to the page
Create your page
Add a new page under Pages, or use an existing page. Here, we're speaking of the page that will feature a subset of your store collections.
Take note of your page title. You'll need it in the next step.
Create your menu
You create and edit menus on your Navigation page. Every new store comes with two menus called Main Menu and Footer, but you can add more.
From your Shopify admin, click Online Store, and then click Navigation (or press
Click the Add menu button:
Give your menu the same Name as the Title of the page that will feature your collections. For example, if you wish to feature collections on a Living Room page, call your menu Living Room. No mismatch is allowed here! You will need to respect this naming convention for your implementation to work.
Add links to your menu, one at a time, each pointing to a Collection. You can filter the collection with a tag if you like. To rearrange your collections, click and drag the handle icon on the left of the Link Name.
Did you know?
The title of each link inside the menu will become your caption for that collection image on the page. It does not need to be the same as your collection title, especially if you're filtering the collection with a tag. You can rename your links after you've added them.
It is very important that your links point to a Collection — and not a Web Address.
- Click Save menu to save your new menu.
Repeat the procedure to create a linked list for each page that will feature a subset of collections.
Create your page template
You will need to create one alternate page.list-collections.liquid template to assign to all pages that will feature collections.
From your Shopify admin, click Online Store, and then click Themes (or press
Find the theme you want to edit, click the
...button, and then click Edit HTML/CSS.
Under Templates, click the Add a new template link.
Create a new template for page called list-collections:
Copy all of the code from this gist and paste it at the bottom of your new page.list-collections template.
Click Save to save your new page template.
Assigning your page template to your page
In your store's admin, go to the page that will need to feature collections, scroll down to its Template section, and select page.list-collections in the drop-down. Then save the page.
Repeat this step for each page that you want to feature collections.