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.

Onwards!

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.

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

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:

    {% if collections.size > 0 %}
        
Collections
        {% for collection in collections %}
            

              

                
                    {% if collection.image %}
                        {{ collection.image.src | collection_img_url: 'medium' | img_tag: collection_title }}
                    {% else %}
                        {{ collection.products.first.featured_image | product_img_url: 'medium' | img_tag: collection_title }}
                    {% endif %}              
                
              
              

                
                    {{ collection.title }}
                  
              
            
        {% endfor %}
    {% else %}
        You have no collections!
    {% endif %}

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

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 collections.size > 0 %}
        
Collections
        {% for collection in collections %}
            

              

                
                    {% if collection.image %}
                        {{ collection.image.src | collection_img_url: 'medium' | img_tag: collection_title }}
                    {% else %}
                        {{ collection.products.first.featured_image | product_img_url: 'medium' | img_tag: collection_title }}
                    {% endif %}              
                
              
              

                
                    {{ collection.title }}
                  
              
            
        {% endfor %}
    {% else %}
        You have no collections!
    {% endif %}


{% if paginate.pages > 1 %}

  {{ paginate | default_pagination }}

{% 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).

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