To add at the bottom of page.list-collections.liquid. In the New Standard theme, use the content of page.full-width.liquid and copy the code at the bottom of that content. This won't work in the Lookbook, Brooklyn, Simple and Kickstand themes.

page.list-collections.liquid

{% 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 medium--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 = 'large' %}

{% if linklists[page.handle].links.size > 0 %}
    
  {% assign number_of_links = 0 %}
    
  <div class="grid-uniform{% if uses_minimal_framework %} row{% endif %} clearfix">

    {% 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 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">
            {% 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="{{ link.url }}" class="collection-item__title">{{ link.title }}</a>
          </p>
        </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>

{% endif %}

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

so I have a link list created, where does the handle code go? Thank you for your help!

Are one of the earlier versions a grid instead of single list? How could this be made into a three-wide grid?

Yes, I would also like to know how to display in a grid instead of single. Thank you.

Did anyone figure out how to get this into a grid? It's one column of images....

Certainly doesn't resemble the example used in the article. Like the others I'd prefer a 2 column grid. Is this code coming?

Yes, can you please explain how to arrange this page so that the collection images are not centered vertically.

Has anyone figured out how to reformat the page so collections display in a grid?

Hi there

Does anyone know how to ensure that the collections on the page are only those in the relevant menu?

When I follow this it only links to all of them?

Thanks
Mike

Hi I have installed this gist and set up the pages as outlined
however I only end up with a drop down menu linking to each collection where I was expecting the page to show the pictures/descriptions of the collections
what have I done wrong
my web site is www.bandsforhire.co.nz
see bands/music, other entertainment, event type, wedding entertainment menus across top of page
see how they only show a list of drop down links
any advise appreciated
Pete

The grid configuration is controlled in Line 9. Simply replace that with the grid configuration in your theme. If you don't know what it is, you can get it from the front end page source of a gridded collection. For example, by viewing the page source of a collection on my site formatted at 5 columns per row, I find the div class of each grid item to be:
div class="grid__item wide--one-fifth large--one-quarter medium-down--one-half"
so I just copy:
'grid__item wide--one-fifth large--one-quarter medium-down--one-half'
and paste that into the page.list-collections.liquid template on line 9 in place of:
'large--one-quarter medium--one-third small--one-half large--col-3 medium--col-4 small--col-6'

I'm using the Minimal theme. This may not work on other themes. Some other themes may need to change the span class on line 12 instead.

This code works a treat. I had been manually coding similar pages, but using menus via a template makes it much more efficient.

I couldnt achieve this; can someone help me? maybe I am at totaly wrong place. I am doing an online shop for products, I have "collection" page on header and I have tshirts, bottoms and sweatshirts at drop-down menu. I want any customer to use the arrow at side of collection to choose the product at drop down menu. this part is ok I have done. But I also want someone to press on "collection" ; this will open 1 page shows "tshirts" "sweatshirts" and "bottoms" in grid with a picture; and then when they press on "t-shirts" they will see all tshirt options. I couldnt achieve to create this page so far. Can someone help me?
After I achieve this I can add a button on header like "shop by brand" and make same list for different brands. thanks.

Has anyone figured this out??? It's driving me nuts!!! Please help!!!

@prolificjinx23 The answer is simple: hire a professional developer. They are nice enough to give you a list of qualified experts to get custom stuff done: https://experts.shopify.com/

By the way, they even specified in their docs (https://help.shopify.com/themes/customization/collections/featuring-collections-using-link-lists) that this is an advanced feature that is NOT supported by Shopify. It requires programming knowledge. If you need to implement a different layout than what is giving is this code sample, you should hire a professional developer.

Thanks to Caroline for providing this sample. I am currently working on a theme and it was easy to implement. I wish it was part of Timber out of the box tho.

Hey guys wtf happened? The first page worked but the second all the collections I choose show as a drop down???? The first page with multiple collections did not

Hi guys. This seemed to work exactly as described for me. (At least so far!)

I am an absolute beginner at anything not drag and drop, but copying this code and creating the liquid template for the collections page was easy. My question is, how do I control the appearance of the text appearing on this page, i.e. the collection titles?

Basically I would like the titles to be in bold and of a larger size. It appears that the page is using the font size set for regular text in my theme, but larger would be nice.

Thanks much!

Well I've tinkered to death with this and can still not get it to display my collections as a grid on the page. I have asked the company that I bought my theme to look at it hopefully I will make progress there.

I know they are using the backbone framework maybe that is part of the issue?

Either way I know the suggestion that line 9 was supporting this function is not accurate within my theme..

So the search continues

I'll post my solution when/if I find it.

Replace:
{% assign grid_item_width = 'large--one-quarter medium--one-third small--one-half large--col-3 medium--col-4 small--col-6' %}
grid_item_width assignment to:
'small--one-half medium-up--one-third'

Is there a way to use this to display a single product? I have a few use cases which would benefit SEO if the page/blog post showed a single product instead of a collection (it seems silly to link to a collection that only contains one item!)

great code though, I will be using this for collections

I know this is old but in case anyone comes across the same problem like I've been trying to fix for hours:

I replaced the line (Line 9):
{% assign grid_item_width = 'large--one-quarter medium--one-third small--one-half large--col-3 medium--col-4 small--col-6' %}

With:
{% assign grid_item_width = 'col-xs-12 col-sm-4' %}

And it went perfectly into 3 columns rather then one single column.

@kurtmeister99 it worked for me but seems to go down ways, how do you change span