tetchi blog

Tetchi's blog about life and stuff

Shopify Theme from Scratch Part 10: list-collections.liquid

Shopify Theme from Scratch Part 10: in this tutorial we’re going to be building the list-collections.liquid template, where all of the collections in a shop are output.


Alright! Now that the list-collections.liquid bug if fixed, let’s get the show on the road! The list-collections.liquid template is loaded when you go to your-store.myshopify.com/collections. The purpose of this template is to list the collections that are available in your shop.


1. Add some collections to your shop

The first thing we’re going to do is create some collections. In your admin, click the Collections tab in the sidebar. Click the green “Add collection” button in the top right corner and start adding some collections! Let’s go ahead and add four more collections to our shop for a total of five collections.

Collection List

Figure 10.1: Collections being listed in the admin

Don’t forget to add a collection image for each of your collections!

2. Add the list-collections.liquid

The first thing we need to do is add the list-collections.liquid template to our theme.

To do this, go to the Template Editor and click the “Add a new template” link. Select the “list-collections” option in the dropdown and click the “Create template” button (Figure 10.2).

adding list-collection

Figure 10.2: Adding the list-collections.liquid template to your theme

3. Do a for-loop to output the collections

Open list-collections.liquid. Remove everything that’s in there now, and add the following code:

Here we’re checking to see if the shop has any collections or not. If there are collections, we will do a for-loop to output the collections. If there are no collections, we’re going to output a message stating that there is nothing to output. We’re also doing a check to see if a collection has a collection image; if it doesn’t it will load the featured image of the first product in the collection (this is a nice little backup in case you don’t want to upload collection images for each collection).

You should now see your collections and their respective collection images displayed nicely in a grid (Figure 10.3).


Figure 10.3: Collections output in grid format on list-collections.liquid

Notice that we’re re-using the CSS classes from the collection.liquid template here. I did this because the collections here are to be displayed pretty much the same way as the products in collection.liquid, and I didn’t want to re-write another set of CSS rules just for the list-collections.liquid template. Recycling ftw!

4. Paginate the collections

Like with the products on the collection.liquid template, we’re going to paginate the template. Still inside list-collections.liquid, add the code in red below:

{% paginate collections by 4 %}

{% if paginate.pages > 1 %}

{% endif %}

{% endpaginate %}

Just for demonstration purposes I set the paginate by value to 4, but you can set this to anything you’d like. Your collections should now be paginated (Figure 10.4).

list-collections paginated

Figure 10.4: The collections are now paginated

What if I want to handpick which collections are displayed here? Or re-order my collections?

If you’re looking to fully control which collections appear on list-collections.liquid, you can use this technique where you load your collections through a link list. What you do is add collection links in a custom link list, and load that in list-collections.liquid. The advantage of using a link list is that you can handpick which collection to display, and also re-order them in any way you like.

Caro has an excellent code snippet to get this done, but for the purpose of this basic theme we’re going to keep it as is.

That’s it for this week!

← Back to table of contents


  • Adi
    Adi on July 25th, 2013

    From where i see my collection, means what is the url to see this collection page?

  • tetchi
    tetchi on July 25th, 2013

    Hey Adi, check out the first part of this post – you can get to this page by going to your-shop-url-here.myshopify.com/collections

  • Stephanie
    Stephanie on August 16th, 2013

    I used the code snippet you suggested to load collections using a link list, and it works fine except it breaks the pagination. Is there any way to get pagination working with the link list approach?

  • tetchi
    tetchi on August 16th, 2013

    Hey Stephanie, it’s a little hard to troubleshoot without being able to see your work, but if you can post a link to your shop I can take a look.

  • Stephanie
    Stephanie on August 17th, 2013

    Hi Tetchi. No problems, here’s some more info.

    My theme so far (collections page): https://mortar-and-pestle.myshopify.com/collections
    list-collections.liquid file: https://github.com/stephsharp/shopify-tutorial-tetchi/blob/broken-pagination/templates/list-collections.liquid

    The way it is currently, there are 2 pages of collections that both display the same 4 collections. I am fairly sure this is because I am using

    {% paginate collections by 4 %}

    which returns 5 collections (the 4 displayed + frontpage), so there are 2 pages.

    What I really want is something like this:

    {% assign collection_links = linklists.featured-collections.links %}
    {% paginate collection_links by 4 %}

    But that gives me the error:

    Liquid error: Array ‘collection_links’ is not paginateable.

    Is it possible to paginate a link list, and if so, how?

    Thanks for your help :)

  • Gwen
    Gwen on October 5th, 2013


    Do you have a tutorial on sorting the collection based on newest to oldest? Currently shopify sort them based on created date. Is it possible to sort them based on published date instead?


Post a comment