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.

[kopexx]

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

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

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

[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 %}

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

[GertAndCo]

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

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

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

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

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

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?

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

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

[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

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

[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