Collection - Feature a subset of collections on a page

[TyW]

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!

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of HTML, CSS, JavaScript, and Liquid is required. Consider hiring a Shopify Expert if you aren't comfortable doing the steps in the tutorial.

---

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.

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:
   
   
   
   
4. Create a new template for page called list-collections:
   
   
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:
   
   
   
   
5. Click Save.
   
   Note: Even 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:
   
   
   
   
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:
   
   
   
   
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:
   
   
   
   
5. Click Save menu.

[ensenterprises]

Hi, Have you tried to write the page content, that should reflect.

[Smeelah]

Yes I did, but it won't display. I will go over it again tomorrow with fresh eyes. Perhaps I missed something. 

[ensenterprises]

Can you please provide your shop url so that I can request for the access to check.

[Smeelah]

@ensenterprises 

Thanks for helping me talk it through. I compared page.liquid to my custom collection page and saw that there was no {{ page.content }} in the latter. Adding that fixed the issue:)

[ChrisChris5800]

Hello Sir, was there a solution found about selecting custom images for the collections instead of importing the 1st product image by default? 

I found the specific code that requires an image url but there is only one section and i have 8 different images that i would like to upload. 

Thanks in advance.

[ensenterprises]

I think you just need to add image block for that different collections, hope that will work for you.

[adogslife]

Cab you send a screenshot of the line 9 change? I can't make it work so think i'm doing it wrong. Line 15 worked a treat, thanks mate. 

[Anonymous]

I have been trying for hours and I finally found a way how to show more collections in a row. I adjusted the collection_item_width. See below. Hope it's helps you.

I do have a problem myself since the 'breadcrumb' is not showing on my collection page. Does someone have a solution? It is showing on all other pages.

[tyrone3]

Does this subset work with venture. I can’t seem to get it right

---

@TyW wrote:
Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of HTML, CSS, JavaScript, and Liquid is required. Consider hiring a Shopify Expert if you aren't comfortable doing the steps in the tutorial.

---

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.

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:
   
   
   
   
4. Create a new template for page called list-collections:
   
   
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:
   
   
   
   
5. Click Save.
   
   Note: Even 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:
   
   
   
   
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:
   
   
   
   
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:
   
   
   
   
5. Click Save menu.

---

[dimitris755]

This requires some trial and error and knowing a little bit of html is handy but what a brilliant solution! it allows you to do anything your need! 10 stars!

[Corbett]

hey thanks for this content ,i am a novice shopify ecommerce enterpreneur .i have followed all the steps but i now have two seperate collections of the same page .

[Anonymous]

Sorry further I wouldn't know since I really can't read any HTML and I just tried some changes on the codes. For me it is still not working perfectly but at least a little better. I hope someone helped you out with this topic:)

[Topmitch]

Hi

Thanks for the tutorial

I think I miss something despite the fact I read the tutorial dozens of times ....

How do I link the newly created page that I have managed to create - and appears on "pages"with indeed the suffix list-collections = to the navigation menu you ask me to create. Just giving the same name to the menu and the page does not link both....

I am missing some information here or I don't understand the principle

Looking forward to your feedback

Kind regards

[Englyst]

HI @Smeelah 

Glad it helped 😉

I was able to add text when in the main menu. I think you should choose webshop - then choose pages - then click on the page that you created. And then you should be able to add content.

[SharonKeilthy]

We've been using this code for a year and it's super! Until we installed - and then removed, with their technical support - Bold Commerce. It introduced gaps into the grid of collection-images and they say they've removed all their code and it's not their problem to fix it. Anyone help please? Thanks in advance!

[Smeelah]

Interesting @SharonKeilthy 

I wasn't able to get this to work. I used the tutorial on link supplied by Englyst. I had also previously uninstalled Bold Commerce. 

This may not be related but might be a clue. Lately I had similar gaps on collections pages and before completely tearing my hair out I realized it was because some of the variants were creating using non-standard options such as colour instead of color. 

[SteveGlass]

Hello,

The theme we are using is "Supply" (one of the free ones). I have followed the steps but when I try to create the new page, the new template doesn't appear in the Template suffix dropdown menu. Can anyone tell me why?

[TyW · 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. 

• Shopify Developers: Feature a subset of collections on a page

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!!!!