Collection - Feature a subset of collections on a page

Solved
TyW
Community Manager
Community Manager
429 46 1157

Update 7/9/20: This tutorial has been added to the Shopify Developer documentation website as a supported tutorial > Shopify Developers: Feature a subset of collections on a page. This topic will be locked as a result - if you have questions about the supported tutorial please make a new topic. Thanks!


You can feature a subset of collections on a custom page by editing your theme code. This tutorial shows you how to create a new page template and assign collections to show by using a menu.

collection-01.jpg

All Shopify stores have a collections list page at the URL www.<<yourdomain>>.com/collections  that shows all of the collections in the store. As an alternative to this tutorial, you can edit your collections list page to show only a selection of your collections.

 

Note: Because every theme is different, when you make these changes, the styling might not appear as expected.

 

 

Create your new page template

 

 

You will need to create a new page template to assign to pages on which you will feature collections.

 

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, and then click Actions > Edit code.
  3. In the Templates directory, click Add a new template:

    collection-02.jpg

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

    collection-03.jpg
  5. Paste this code hosted on GitHub at the very bottom of your new page.list-collections file.
  6. Click Save.

 

Create a page on which to feature your collections

 

 

To create a new page:

 

  1. From your Shopify admin, go to Online Store > Pages.
  2. Click Add page.
  3. In the page editor, enter a Title in the text box provided. Note that you must use the same title for the menu that you'll create in the upcoming steps.
  4. Assign your new template to the page by selecting page.list-collections from the Template suffix drop-down menu in the Template section:

    collection-04.jpg

  5. Click Save.

    NoteEven if your new page is visible, it won't appear in your online store navigation automatically. You'll need to add a link to it in a menu.

 

Create the menu that controls which collections are shown

 

 

In this step you will create a menu that controls which collections are shown on your new page.

 

  1. From your Shopify admin, go to Online Store > Navigation.
  2. Click the Add menu button:

    collection-05.jpg

  3. Give your menu the same Title as the title that you gave the page that will feature your collections. For example, if the page you created has the title Living Room, then you will give your menu the title Living Room:

    collection-06.jpg

  4. Add links to your menu for each collection that you want to feature by clicking Add menu item. Choose collections from your store by clicking on Collections in the drop-down menu for the Link text box. It is important to link to your collections in this way, instead of adding a URL to the text box:

    collection-07.jpg

  5. Click Save menu.

 

TyW | Online Community Manager @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Accepted Solution (1)
TyW
Community Manager
Community Manager
429 46 1157

This is an accepted solution.

Hi all! 

I wanted to let you know that tutorial has been added to the Shopify Developer documentation website so I will be locking this topic since a supported tutorial has been published. 

If you have questions about the new tutorial please create a new topic providing as much detail as possible. 

I am going to mark this reply as the solution for everyone's awareness as well. 

Thanks and have a great day!!!! 

TyW | Online Community Manager @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

View solution in original post

Replies 77 (77)