tetchi blog

Tetchi's blog about life and stuff

Shopify Theme from Scratch Part 3: collection.liquid

Shopify Theme from Scratch Part 3: in this tutorial we’re going to be setting up the collection.liquid template, which is where the products in a collection are displayed.


part03_banner

The collection page is where you see a handful of products in a collection at once. This part is actually going to be a breeze thanks to all the hard work we did in Part 2. :)

Let’s rock and/or roll!

1. Navigate to the Frontpage collection

Navigate to the default “Frontpage” collection in your shop. To do this, you can either plug in your-store-name.myshopify.com/collections/frontpage into the URL bar of your browser, or click the “View in your store” link in the Frontpage collection in the admin (Figure 3.1).

viewing your collection

Figure 3.1: This link will take you to the collection on the storefront.

2. Add the collection description

We’ll start off by outputting the collection’s description, which can be inserted through the admin (see Fig 3.1). Go ahead and enter a nice little description for your Frontpage collection.

collection desc

Fig 3.2: the collection description can be inserted through the collection’s page in the Admin.

Open collection.liquid. Remove the “This is my collection page!” text, and insert the code below:


{{ collection.title }}

{{ collection.description }}

You will now see the collection description being output on your collection template.

collection description output

Why don’t I need to use {% assign %}, like in Part 2?

We do not need an assign here because when you’re on a collection template, you already know which collection you’re viewing. You were taken to the collection template by clicking on a collection link, so the template already knows which collection to load. In our case, the template is loading the Frontpage collection.

3. Output the products in the collection

Let’s go ahead and output the products of the collection. We can simply use the product-loop.liquid snippet that we made in Part 2.

Add the code in red below.


{{ collection.title }}

{{ collection.description }}
{% for product in collection.products %} {% include 'product-loop' %} {% endfor %}

You should now see the products of the Frontpage collection being output :)

4. Paginate the products in the collection

One thing that we need to do with the collection template is to paginate. Pagination is useful for when you only want to show a set amount of products per collection page. It’s also required for when you have more than 50 products, because there is a limit of 50 products that can be output per product page. Pagination lets you get around that limit.

Now in our case we only have 9 products, but let’s go ahead paginate our collection template by 8. Enter the code in red below below.


{% paginate collection.products by 8 %}

{{ collection.title }}

{{ collection.description }}
{% for product in collection.products %} {% include 'product-loop' %} {% endfor %}
{% if paginate.pages > 1 %} {% endif %} {% endpaginate %}

You’ll now see that 8 of the 9 products in the Frontpage collection are shown. You’ll also see a set of links at the bottom to go the different pages.

pagination

Figure 3.3: Pagination at work

If you click on the “2” link, you will be taken to the second page, where you’ll see the ninth product.

forever alone

Figure 3.4: This product is now forever alone, not unlike the author of this tutorial

Let’s add some CSS for the pagination links. Open style.css, and at the bottom of the file add the following CSS:


/**** collection.liquid ****/

.pagination{text-align:center; border-top:1px solid #ccc; padding-top: 30px; margin-top: 30px;}

That’s it for now!

← Back to table of contents

4 Comments

  • Leon
    Leon on May 4th, 2013

    Thanks, all working so far, however, I see that in your theme you have a link called ‘Front Page’ on the home page. I don’t have such link after going through all steps.

    The products are shown under ‘catalog’ in my case but the text that I created is not showing above the products under ‘catalog’.

    I can only find the page with the text above and products below if I navigate manually to:

    myurl.myshopify.com/collections/frontpage

    Thanks!

  • tetchi
    tetchi on May 11th, 2013

    Hey Leon – you can add a link to your frontpage collection through the “Links” tab in your admin :)

  • Ryno
    Ryno on October 25th, 2015

    Awesome tutorial, thanks.

    But the CSS code that I added in the last step seems to have added a line that I guess needs to be just above the “next page” button, the problem is that it is actually located between the product images.

    I have managed to remove the line but I would rather want to know how to move it down?

  • Raniel
    Raniel on July 6th, 2016

    Figure 3.4: This product is now forever alone, not unlike the author of this tutorial….

    yes ur not alone because were here reading ur tuts.
    Heheh LAUGHING OUT LOAD..

Post a comment