Collection - Feature a subset of collections on a page

Solved
TyW
Community Manager
Community Manager
404 39 1176

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)

Accepted Solutions
TyW
Community Manager
Community Manager
404 39 1176

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)
Josephus87
Excursionist
22 1 27

Hi, how to show 2 or 4 collections on a row and not 1 in a column as per code.

Sandpiper
New Member
1 0 11

Thanks TyW for the great tutorial! It was really simple to implement, however, it would be far more effective if there were a way in which the collections could be placed in rows of say 4 icons across the page (horizontally) rather than having them stacked vertically one by one down the page? Any possibility of an upgrade to the code or a tutorial on how to alter the layout?

Josephus87
Excursionist
22 1 27

is exactly what I would like too, surely there is something to modify in the code, if you know something let me know, thanks.

Josephus87
Excursionist
22 1 27
ac_208
New Member
1 0 1

Hi! I went through and did everything suggested and I was able to make sub collections. Worked great! Now I need to figure out how to make that landing page look better. Anyone know how to add a title to this page and clean boxes to organize the pictures of the collections?

Lichna
New Member
1 0 0

Thank  you for this great tip. It helped me a lot. 

blogan
Tourist
5 0 1

I followed these steps and successfully created a page with links to two collection pages. However, when I edited the page to include additional content (text), it deleted the links to the two collections and also didn't display the new content. How can we create such a page AND have the ability to include additional content (text and images) on the page?

 

Smeelah
Navigator
289 1 78

@TyW 

 

Why are the collections displayed in one stacked column?

 

It displayed fine when I first created the page but a few hours later and it's got this weird layout...and I'm not the only one. Please help!

claudio4
Tourist
8 0 4

Thank you very much for taking the time to write this. I followed the tutorial and everything worked EXCEPT that i now have my collections showing 2x. Everything works perfect except this. Any idea what the issue could be?

claudio4
Tourist
8 0 4
Hi. Any chance of a reply please? Thank you for making the time.
HarryFitz
Tourist
3 0 12
Hi completely new to Shopify and to HTML coding, but I've been playing around with this for one of my pages and you can change how big/small the collection images are and also how many in a row.

To change size look at line 15, where it says large this can be change to small, compact, medium, large & grande

To change how many collections per row look to line 9. Where it says third on each ID you can change it to the following, half for 2, third for 3, quarter for 4, fifth for 5, sixth for 6 and so on though I have not tested it above 6.

In doing this I was able to create 3 separate page templates with 2 collections in a row, 4 and also 6. Although I am experiencing an issue mainly visible on mobile site where the image furthest on the right is clipping with the edge of the screen will update if I fix it.

Hope I've helped
HarryFitz
Tourist
3 0 12
Hi completely new to Shopify and to HTML coding, but I've been playing around with this for one of my pages and you can change how big/small the collection images are and also how many in a row.

To change size look at line 15, where it says large this can be change to small, compact, medium, large & grande

To change how many collections per row look to line 9. Where it says third on each ID you can change it to the following, half for 2, third for 3, quarter for 4, fifth for 5, sixth for 6 and so on though I have not tested it above 6.

In doing this I was able to create 3 separate page templates with 2 collections in a row, 4 and also 6. Although I am experiencing an issue mainly visible on mobile site where the image furthest on the right is clipping with the edge of the screen will update if I fix it.

Hope I've helped
MOREchocolate
Tourist
8 0 4

This doesn't work for my site unfortunately. Have tried playing around with the code but so succes yet. Hope a different solution comes along!

Andrea_22
Tourist
5 1 4

Hi Harry,

Do you know whether this would also work to create collections within collections? Meaning, if we created a new theme page with a masonry grid of thumbnails, representing different collections and then, clicking one of the collections (i.e. Dishware) would open another page with sub-collections (Cups, Saucers, Plates, etc.) ?

Thanks for the info on how many collections per row.

HarryFitz
Tourist
3 0 12
Hi Andrea, I'm sure you could work this out somehow in the code however my
knowledge of website scripting is very rudimentary and I would not really
be able to help. Although i would say a main concern would be that the
script originally provided automatically populates each individual
collection based on what is in your navigation section for that page and
you would need to mayble look at this from a different angle bearing in
mind what you actually would want is for a page that shows pages then when
you click a picture that links a page that would then bring you to this
type of collection grid page.

Hope I've helped in some way 🙂
Andrea_22
Tourist
5 1 4

Thanks, Harry. I think we just need to figure out how to set up a grid of images on a page so that it looks the way we want...

codeturkey
New Member
1 0 1

Hello,

 

After trying many things I noticed that the variable uses_minimal_framework on line 5 includes a snippet product-loop. Checking my snippets folder, product-loop.liquid does not exist. I simply deleted the code: {% include 'product-loop' %}

 

This worked and my collections list is now displaying max per row rather than just 1 stacked on top of each other.

 

Note I did use @HarryFitz  's suggestion to change the size on line 15. This will dictate how many collections are shown per row.

 

Hope this helps!

MOREchocolate
Tourist
8 0 4

Tried it too, but no luck. Which theme do you use? I have Prestige.