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.

[Josephus87]

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

[HarryFitz]

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]

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!

[codeturkey]

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]

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

[dayaima]

https://community.shopify.com/c/Shopify-Design/How-to-align-collections-in-grids/m-p/676282/highligh...

[Michael_Doyle2]

---

@MOREchocolate wrote:

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

---

Did you find a solution to this? I'm on the same theme and having the same issue

[jchuynh]

Just throwing it out there, but did you publish the theme? It won't work if you don't publish the theme.

[avogad]

I made a page and then displayed the collections as suggested in this article but I get the following error. Can anyone suggest how I can show my collections in this page ?

Error:

"You do not have a link list with a handle set to agar-and-related-products, or you do and it's empty. Go ahead and create a link list called Agar and Related Products on your Navigation page  and populate that link list with links that point to collections, to see collections listed here. Make sure the link list also has a handle set to agar-and-related-products."

[Andrea_22]

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]

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]

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

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

[Sandpiper]

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]

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]

nobody help us?

[TG-Admin]

Hi all - I've been going through a similar process to a lot of you, trying to get the page to display collections in rows instead of vertically. I tried all of the tips on this page but nothing worked for me. But in the end I solved it, and I wanted to just share my experience in case it's of use to anyone struggling with this issue.

I took a different approach based on the fact that the template code wasn't written specifically for the Minimal theme, so some elements need to be modified to make them work properly. I found the main culprit responsible for the vertical stacking was the line:

<div class="grid-uniform{% if uses_minimal_framework %} row{% endif %} clearfix">

I changed this to:

<div class="grid-uniform grid-link__container">

...and this seemed to do the trick. After that, I spent some time playing around with the formatting and adding breadcrumb navigation to the head of the page, which now looks this:

<div class="grid">

<div class="grid__item post-large--two-thirds push--post-large--one-twelth">

<div class="section-header">
<div class="section-header section-header--breadcrumb">
{% include 'breadcrumb' %}
</div>
<h1 class="section-header--title">{{ page.title }}</h1>
</div>

<div class="rte">
{{ page.content }}
</div>

So after a lot of hours, I finally have the page I wanted and it works brilliantly. I'm not an expert programmer, so don't ask me to explain what's going on here,  but I hope this has been of help. Good luck with your code wrangling!

[Chaosheld]

hey, I use minimal to and used you breadcrumb code and changed div class to <div class="grid-uniform grid-link__container">, but the products are in a vertical row. what do you else changed to put them in a horizontal row? thx

[smarthome-nz]

Hi Chaosheld

I am using the supply theme, so not sure how this differs to minimal.

If it is any help, below is the code that appears above the extract that I provided in the earlier post.  It does have specific code there for minimal.

{% comment %}
Collections are listed here.
{% endcomment %}

{% capture uses_minimal_framework %}{% include 'product-loop' %}{% endcapture %}

{% if uses_minimal_framework contains 'Liquid error' %}
{% assign uses_minimal_framework = false %}
{% assign grid_item_width = 'large--one-quarter large-up--one-quarter medium--one-third medium-up--one-third small--one-half large--col-3 medium--col-4 small--col-6' %}
{% else %}
{% assign uses_minimal_framework = true %}
{% assign grid_item_width = 'span3' %}
{% endif %}

{% assign image_size = 'small' %}

{% if linklists[page.handle].links.size > 0 %}

{% assign number_of_links = 0 %}

<div class="grid-uniform{% if uses_minimal_framework %} row{% endif %} clearfix">

[Lilis]

I've tried everything in this thread, and still, no matter what all I get is one long column, and it won't do multiple columns no matter what. I'm currently using the Parallax theme. Anyone know if it's a bugged theme or something?

[kopperorc3d]

#MainContent .grid-uniform {	
display: flex !important;   
 flex-wrap: wrap !important;
}

This was posted by candiSoft in the this thread:https://community.shopify.com/c/Shopify-Design/How-to-align-collections-in-grids/m-p/676282/highligh...

That got the arrangement wrap set for me.

I'm still having issues with mobile padding/margins for the right side and bottom.

So far, I have discovered if you use the following at the end of theme.scss.liquid:

#MainContent .grid__item{    
margin-bottom:36px !important;
}

 You'll make the spacing on the bottom look better, BUT it affects everything else on the website too, including individual product pages that were fine.

If you do this:

#MainContent .grid__item{    
margin-right:-15px !important;
}

 You'll correct the right side, BUT it again affects everything else on the website. The gutters (I'm assuming the middle spaces is what those are called), are reduced. Likewise, you can obtain a similar result if you use margin-left: -15px as well.

The question for me is how to ONLY affect the collection image grid setup on the collection page, while leaving the products elsewhere alone. There something in the code itself from github that needs adjusted? Or collection specific setting in the theme.scss?

[xoi_iox]

Nothing seems to work for me. If anyone figures this out, please let me know as I'd love the collections to run horizontally. 

[ac_208]

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]

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

[blogan]

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]

@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]

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]

Hi. Any chance of a reply please? Thank you for making the time.

[HarryFitz]

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

[Samad-Memon]

---

@HarryFitz wrote:
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

---

Hi, 

I am having same issue where in mobile site image furthest on the right is clipping with the edge of the screen

My customer base is 80 percent mobile users so I was wondering if you had find a solution for it?

[rendrteam]

Hi there, 

I am trying to make a page of subcategories after a user has clicked on the main collection item.

How do i redirect the main collection button, to go to the new navigation menu i have created?

I am also looking to put a title ontop of the subcategory, which is the same name as the main collection's title.

Thank you

[kopexx]

---

@rendrteam wrote:

Hi there, 

I am trying to make a page of subcategories after a user has clicked on the main collection item.

How do i redirect the main collection button, to go to the new navigation menu i have created?

I am also looking to put a title ontop of the subcategory, which is the same name as the main collection's title.

Thank you

---

If you follow this guide, when you create your new "Collections" or "Shop" page, it will be a sub-menu.  You can create multiple pages/sub-menu's to segregate them further.  As far as the title, this guide automatically titles the collection with the page title used as the sub-menu. If you wanted to change that you would need to modify the code from GitHub that you placed in your "page.lists-collections" at the top in the very beginning at line 3;

<div class="page-width">
  <header class="section-header text-center">
    <h1>{{ page_title }}</h1>
  </header>

Change the h1 page_title command to whichever element you want it to reflect.  I wouldn't suggest hard-coding a menu name there unless you only need the 1 sub-menu as it would cause a myriad of issues trying to replicate additional templates.

If you only need the 1 sub-menu I would consider simply re-visiting how you tag your products.  If you set up your "Collections" page to create tiles by product "type" and then use rules for product "tags" to make filtering easy you make accomplish your goals without modifying your template.

[kopexx]

Wow you just saved me probably 2 days of headache. Thanks, man...

[smarthome-nz]

Great article and very helpful.

I group my products page with filtered tags, so I wanted a way to make my collection subset link to the collection, but use the subcollection name as a filter, so that once on the products page, the filter could be easily changed, effectively switching between collections.

I am new to this language, and there may be a better way of doing this, but the below code seems to work.  I also hide the subcollection if there are no products in it.  

    {% for link in linklists[page.handle].links %}

      {% if link.type == 'collection_link' %}

        {% comment %}

        If we have a collection link.

        {% endcomment %}   

        {% assign collection = link.object %}

        {% assign number_of_links = number_of_links | plus: 1 %}

    {% comment %}

          Determine the link for the sub-collection by using the linkedlist page handle (=collection handle)

                 and appending the subcollection name as a category filter

    {% endcomment %}

    {% assign subcollection_name = link.url | remove: "/collections/" %}

        {% assign subcollection_link = "/collections/" | append: page.handle | append: "/category_" | append: subcollection_name %}

        {% comment %}

        If we have products in the collection.

        {% endcomment %}  

{% if collection.products_count > 0 %}

    <div class="grid__item grid-item product-grid-item {{ grid_item_width }} text-center">

            <div class="grid__image product-grid-image">

                <a href="{{ subcollection_link }}" class="grid-image--centered">

                {% comment %}

                  Bring in the featured image of the first product in the collection if no collection

                  image has been uploaded for it.

              {% endcomment %}

                {% if collection.image %}

                  <img src="{{ collection | img_url: image_size }}" alt="{{ link.title | escape }}">

                {% else %}

                  {% assign product = collection.products.first %}

                  <img src="{{ product | img_url: image_size }}" alt="{{ link.title | escape }}">

                {% endif %}

                </a>

              </div>

              <p class="collection-grid__item-title">

                <a href="{{ subcollection_link }}" class="collection-item__title">{{ link.title }}</a> 

              </p>

            </div>

    {% endif %}

[GertAndCo]

This all worked but my collection images are blurry on the new landing page - how do I fix that?

[Samad-Memon]

Okay so I wanted to create subset of collections on a page which I successfully did by following this guide.

---

@TyW wrote:

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.

---

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/collection 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.

---

Hi, It worked great but I am experiencing an issue visible on mobile site where the collection image furthest on the right is clipping with the edge of the screen.

I have tried using some other phone to see if the issue persist but it does.

It can be only visible if viewed on the mobile phones, Pictures attached below.

You can visit my store with a mobile phone & look at the issue first hand url is https://www.mythicallab.in/pages/batteries-by-brand

Any help with be greatly appreciated, Thank you.

P.S. I am using debut theme.

the collection image furthest on the right is clipping with the edge of the screen.

[jchuynh]

Thank you so much for this! A problem that happened was that my collection images are now showing up. It shows this instead. Is there a way I can correct it?

[ARiioNz]

Hey,

I used this template and it works fine!
But how can I set an image for a "page link". If its not a collection it will use the first image of the first collection on this linked page...

I tried to set an image url when the title is right but my programming skills are too weak for this...

[TG-Admin]

What I did was to create a collection list using the standard theme template and added it to my top page as normal. Then I viewed the page in Chrome, and using the Inspect feature (right click on the collection you just created and select Inspect) I copied the HTML for that complete section. I then added that HTML as an HTML element on the page, so I now have two collections which look identical, except one is now editable. Once you've done that, you just need to edit the <a> tag in the HTML to point to your collection list page, and then remove the standard collection section and you're done!

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

[baracuda]

very cool tutorial, thank you! 🙂

Any Idea how to adjust code to make it work for 4 levels? 

1) X

    2) Y

         3) Z

               4) A

There will be no image if i'm going for 4 levels.

Brgs,

Martin

[kopperorc3d]

What I did to get this to work is you have to create pages for each level above the last (also make sure to do the navigation as described in the tutorial.)

1) Page

2) Page

3) Page

4) Collection

For each page that will lead to another page, insert a picture. If you leave this as is, you'll see this photo at the top of the page which really looks out of place, you don't want it. So what I did is I simply hid it. Maybe there is a way to make it show as a banner, I didn't explore this. If you show html in the content editor box, it should show something like this below. The important bit you need is the display:none part.

<p><img src="https://cdn.shopify.com/s/files/1/0177/0356/7414/files/pyramid_1_480x480.jpg?v=1586898407" alt="" style="display: none; margin-left: auto; margin-right: auto;" width="480x480" height="480x480" /> </p>

[mosh]

Hi,

Thanks for the post.

I followed the post and am getting a double on the bottom of the page.

Any fixes will be greatly appreciated.

Thanks

[mosh]

---

@mosh wrote:

Hi,

Thanks for the post.

I followed the post and am getting a double on the bottom of the page.

Any fixes will be greatly appreciated.

Thanks

---

It seems like that with the supply theme adding the code was making the issue. I removed the code and followed the rest of the steps. Now it's all good

[KalebSpellman]

Hey, I have implemented this tutorial on my website. But I would like to make the collections appear the same as they do on the homepage with the text over-top of the images and the same layout, spacing, etc. My website is www.spellman-designs.myshopify.com Would anyone know how to go about this?

[JanitorTT]

I think I've finally worked out how to do this. 

You need to add the following to you css file as well:

.collection-grid-item__overlay img {
object-fit: cover;

}

Page code is this: 

<div class="page-width">
<div class="grid">
<div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
<div class="section-header text-center">
<h1>{{ page.title }}</h1>
</div>

<div class="rte">
{{ page.content }}
</div>
</div>
</div>

{% comment %}
Collections are listed here.
{% endcomment %}

{% capture uses_minimal_framework %}{% include 'product-loop' %}{% endcapture %}

{% if uses_minimal_framework contains 'Liquid error' %}
{% assign uses_minimal_framework = false %}
{% assign grid_item_width = 'grid__item small--one-half medium-up--one-third' %}
{% else %}
{% assign uses_minimal_framework = true %}
{% assign grid_item_width = 'span3' %}
{% endif %}

{% assign image_size = 'large' %}

{% if linklists[page.handle].links.size > 0 %}

{% assign number_of_links = 0 %}

<div class="grid grid--uniform">

{% for link in linklists[page.handle].links %}

{% if link.type == 'collection_link' %}

{% comment %}
If we have a collection link.
{% endcomment %}

{% assign collection = link.object %}
{% assign number_of_links = number_of_links | plus: 1 %}

<div class="grid__item small--one-half medium-up--one-third">
<div class="collection-grid-item">
<div class="grid__image product-grid-image">
<a href="{{ link.url }}" class="collection-grid-item__link">
<div class="collection-grid-item__overlay box ratio-container js lazyloaded">
{% comment %}
Bring in the featured image of the first product in the collection if no collection
image has been uploaded for it.
{% endcomment %}
{% if collection.image %}
<img src="{{ collection | img_url: image_size }}" alt="{{ link.title | escape }}">
{% else %}
{% assign product = collection.products.first %}
<img src="{{ product | img_url: image_size }}" alt="{{ link.title | escape }}">
{% endif %}
</div>
<div class="collection-grid-item__title-wrapper">
<div class="collection-grid-item__title h3">
{% if collection.title == blank %}
{{ 'homepage.onboarding.collection_title' | t }}
{% else %}
{{ collection.title }}
{% endif %}
</div>
</div>
</a>

</div>
</div>

</div>

{% if uses_minimal_framework %}
{% cycle 'clear-item': '', '', '', '<div style="clear:both"></div>' %}
{% endif %}

{% elsif link.type == 'page_link' %}

{% comment %}
If we have a page link.
{% endcomment %}

{% assign number_of_links = number_of_links | plus: 1 %}

{% assign linked_page = link.object %}
{% assign have_image = false %}

{% comment %}
Does the page contain an image? If so, let's use it.
{% endcomment %}

{% if linked_page.content contains '<img' %}

{% assign have_image = true %}
{% assign src=linked_page.content | split: 'src="' %}
{% assign src=src[1] | split: '"' | first %}
{% capture image_suffix %}_{{ image_size }}.{% endcapture %}
{% assign src=src | replace: '_small.', image_suffix | replace: '_compact.', image_suffix | replace: '_medium.', image_suffix | replace: '_large.', image_suffix | replace: '_grande.', image_suffix %}

{% comment %}
If the page contains no image, and that page features collections, let's grab the image of the first
collection on it.
{% endcomment %}

{% elsif linklists[linked_page.handle].links.size > 0 and linklists[linked_page.handle].links.first.type == 'collection_link' %}

{% assign have_image = true %}
{% assign collection = linklists[linked_page.handle].links.first.object %}

{% if collection.image %}
{% assign src=collection | img_url: image_size %}
{% else %}
{% assign src=collection.products.first | img_url: image_size %}
{% endif %}

{% endif %}

<div class="grid__item grid-item product-grid-item {{ grid_item_width }} text-center">
<div class="grid-image product-grid-image">
<a href="{{ link.url }}" class="grid-image--centered">
{% if have_image %}
<img src="{{ src }}" alt="{{ link.title | escape }}" />
{% else %}
<img src="{{ link.title | handle | append: '_' | append: image_size | append: '.png' | file_url }}" alt="{{ link.title | escape }}" />
{% endif %}
</a>
</div>
<p class="collection-grid__item-title">
<a href="{{ link.url }}" class="collection-item__title">{{ link.title }}</a>
</p>
</div>

{% if uses_minimal_framework %}
{% cycle 'clear-item': '', '', '', '<div style="clear:both"></div>' %}
{% endif %}

{% endif %}

{% endfor %}

</div>

{% if number_of_links == 0 %}

<div class="grid">
<div class="grid__item grid-item rte text-center">
<p>
There are no links of type <i>Collection</i> in your <b>{{ page.title }}</b> link list.
Go ahead and <a href="/admin/link_lists/{{ linklists[page.handle].id }}" target="_blank">edit your link list</a> to use links that point to collections.
</p>
</div>
</div>

{% endif %}

{% else %}

<div class="grid">
<div class="grid__item grid-item rte text-center">
<p>
You do not have a link list with a handle set to <kbd>{{ page.handle }}</kbd>, or you do and it's empty.
Go ahead and create a link list called <b>{{ page.title }}</b> on your <a href="/admin/links" target="_blank">Navigation page</a> and populate that link list with links that point to collections, to see collections listed here.
Make sure the link list also has a handle set to <kbd>{{ page.handle }}</kbd>.
</p>
</div>
</div>
</div>

{% endif %}

<style>
kbd {
background-color: #FBFBE4;
padding: 1px 4px;
border-radius: 3px;
}
</style>

[WonkiWear]

---

@KalebSpellman wrote:
Hey, I have implemented this tutorial on my website. But I would like to make the collections appear the same as they do on the homepage with the text over-top of the images and the same layout, spacing, etc. My website is www.spellman-designs.myshopify.com Would anyone know how to go about this?

---

Hi I was wondering if you managed to do this as I would love to do the same?

[JTMADSEN91]

Why is such a seemingly basic functionality so difficult to implement? This makes no sense. 

[xoi_iox]

It's funny that the image with this shows the collections horizontally, but the actual outcome is vertical rows. 😄 

[RoyalBisonFair]

This is amazing, and we've got this in our site but we now need the grid on the subset page to look exactly like the grid on the Collections/All page. Is there some way to make the look of the two pages to be equal and for this new list-collection page to draw its look from the collections page?

[LucasLink]

Fantastic tutorial. This is a lot more useful than hard-coding it in directly to  the templates as it allows non code-savvy users to easily alter the content of the collection navigation. I was looking for something like this for the front page of our shopify store. 

I altered the code a bit to get it to work on the front page. Since the front page doesn't have a page handle, it will spit back the error "You do not have a link list with a handle set to  " if you simply copy and paste the code as-is.

Instead, alter the following 2 lines of code 

Line 17 

{% if linklists[page.handle].links.size > 0 %}

change this to 

{% if linklists.yourmenu-handle.links.size > 0 %}

where yourmenu-handle is the handle of the menu you created.

Line 23

{% for link in linklists[page.handle].links %}

change this to

{% for link in linklists.yourmenu-handle.links %}

Voila. 

[cjohnks]

I'm having trouble trying to get the collections to show more than 1 per row. I've tried everything everyone put here. Any advice would be greatly appreciated!

Here's a link to the page:

https://ifixyouri.myshopify.com/pages/iphone-repair-services

Any advice would be greatly appreciated!

[Englyst]

Fantastic guide, which helped me a lot. I can make it work, but the collections shows on a page in rows of 3 with large images.

I would like to have 5 collections on each row. Anyone who can help with that?

I am using the supply theme.

[Englyst]

I found a solution taht worked. https://pinehurstwebsites.com/blogs/pinehurst-websites-e-commerce-and-seo/add-page-of-collections-sh...

[Smeelah]

Thanks for that @Englyst . I found the video for my theme and the collection is displaying well.

However, I would like to be able to add more content to the custom collections page. I don't see that option in the Customize Theme section. I added text directly to the page but it did not show up.

[ensenterprises]

Hi, May be you need to add some option for that using schema.

[Smeelah]

@EN Thanks. I don't know what schema is but if someone can point me in the right direction I can give it a try:)

[ensenterprises]

Hi, Can you please provide me more detail what you want to add accordingly I can suggest.

[Smeelah]

@EN Just text in paragraph form and perhaps an image. But text is most vital. Thanks!

[ensenterprises]

If you just want para then you can add the content in collection description and add image in collection featured image.

[Smeelah]

Oh, I am using the method that @Englyst mentioned where the subset of collections is a page, not a collection, if I have that right. I tried adding text to the page form and it didn't show up. 

When I use the 'collection of collections" method the formatting(?) is messy on some devices.

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