Featuring collections on a page using a menu

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, Javascript and Liquid is required. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial.

We'll learn here how to feature a subset of your store collections on a page.

Collection listing using link list

By using the word "page" here, we mean a page that lives in your Pages section:

Pages overview in admin

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.

Caution

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.

  1. From your Shopify admin, click Online Store, and then click Navigation (or press G W N).

  2. Click the Add menu button:

    Add link list btn

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

  4. 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.

Creating link list for page

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.

Use collection link not web address

  1. 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.

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  3. Under Templates, click the Add a new template link.

    Add a new template

  4. Create a new template for page called list-collections:

    Create page list collections template

  5. Copy all of the code from this gist and paste it at the bottom of your new page.list-collections template.

  6. 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.

Template section on page in admin

Repeat this step for each page that you want to feature collections.

Changing your collections page

Want to discuss this page?

Visit the Shopify Community