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.
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).
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.
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.
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 %}
{{ paginate | default_pagination }}
{% 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.
If you click on the “2” link, you will be taken to the second page, where you’ll see the ninth product.
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!
4 Comments
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!
Hey Leon – you can add a link to your frontpage collection through the “Links” tab in your admin :)
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?
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..