Chapter 6

Collection.liquid

What are collections?

Collections.liquid is used for organizing your products. Think of collections like categories for your products.

To get to your collection page in Vision click on "Catalog" in your navigation

Generating a collection

Below is my collection.liquid code

<h1>{{ collection.title }}</h1>

{{ collection.description }}

<table class = "products">
  {% tablerow product in collection.products cols: 3 %}
  
    <div class = "image">
      <a href="{{ product.url | within: collection }}"
       title="{{ product.title }}">
       <img src="{{ product.images.first | product_img_url: 'small' }}"
       alt="{{ product.title }}" /></a>
    </div>
    
    <div class = "details">
      <a href= "{{ product.url | within: collection }}">
      {{ product.title | truncate: 30 }}</a><br />
      <small>{{ product.price | money }}</small>
    </div>
    
  {% endtablerow %}
  </table>

The first 2 parts of liquid are easy.

  1. {{ collection.title }} generates the collection's title
  2. {{ collection.description }} generates the collection's description

To generate the actual table of all our products we are going to use another logic tag: {% tablerow %}. {% tablerow %} will create a new <tr> and the appropriate <td> for every "thing". In this case the "thing" is our products. So it is creating a new <tr> for every product in this collection. {% tablerow %} syntax looks like this:

  {% tablerow something in something %}
    output something here
  {% endtablerow %}

We now need to tell Shopify what we want a table rows for. In this case we want a table row for every product in collection.products. Let's dissect this line of code: {% tablerow product in collection.products cols: 3 %}

  1. collection.products tells Shopify where to look
  2. product tells Shopify what each tablerow should contain
  3. cols: 3 tells Shopify how many columns there should be

Now we need to tell Shopify what to output. In a collection we are going to want to show the users the products of that collection.

...<div class = "image">
  <a href="{{ product.url | within: collection }}"
   title="{{ product.title }}">
   <img src="{{ product.images.first | product_img_url: 'small' }}"
   alt="{{ product.title }}" /></a>
</div>

<div class = "details">
  <a href= "{{ product.url | within: collection }}">
  {{ product.title | truncate: 30 }}</a><br />
  <small>{{ product.price | money }}</small>
</div>...

The highlighted bits in the above code are just objects, but some of them have filters applied to them. Remember objects are pieces of data from your store and filters manipulate objects to get them to display certain ways. Let's go through all the objects/filters:

  1. {{ product.url | within: collection }} product.url returns that product's url. The filter within: collection will add the collection in the url. For example, if I don't use the filter I will get.....

Ask Daniel to demonstrate within: collection

Pagination

Sometimes our collections will have too many products in them and to spread these products out on to multiple pages we are going to use pagination. Instead of having a single page with 50 products, we can paginate that page into 5 pages each with 10 products each.

Below is my pagination code appended to my collection.liquid

{% paginate collection.products by 12 %}


<h1>{{ collection.title }}</h1>

{{ collection.description }}

<table class = "products">
  {% tablerow product in collection.products cols: 3 %}
  
    <div class = "image">
      <a href="{{ product.url | within: collection }}"
       title="{{ product.title }}">
       <img src="{{ product.images.first | product_img_url: 'small' }}"
       alt="{{ product.title }}" /></a>
    </div>
    
    <div class = "details">
      <a href= "{{ product.url | within: collection }}">
      {{ product.title | truncate: 30 }}</a><br />
      <small>{{ product.price | money }}</small>
    </div>
    
  {% endtablerow %}
  </table>

  
{% if paginate.pages > 1 %}
  <div id="paginate">
    {{ paginate | default_pagination }}
  </div>
{% endif %}
{% endpaginate %}
  1. {% paginate collection.products by 12 %} every paginate begins with {% paginate %}, but we still need to tell Shopify what and when to paginate. We use the collection.products object to tell Shopify what to paginate and use by 12 to tell Shopify when to paginate. In english we are saying "paginate all the products within this collection by 12"
  2. {% if paginate.pages > 1 %} here we are using the paginate.pages object to tell Shopify: "If the number of paginated pages is greater than 1 do this".
  3. {{ paginate | default_pagination }} we are using the default_pagination filter to get Shopify to automatically generate pagination in html
  4. {% endif %} ends our if statement
  5. {% endpaginate %} ends our pagination
Don't forget to prepare for nothing

What happens if our collection has no products in it? Our collection.liquid will simply be blank!

  
{% paginate collection.products by 12 %}

{% if collection.products.size == 0 %}
<strong>No products found in this collection.</strong>
{% else %}

<h1>{{ collection.title }}</h1>

{{ collection.description }}

<table class = "products">
  {% tablerow product in collection.products cols: 3 %}
  
    <div class = "image">
      <a href="{{ product.url | within: collection }}"
       title="{{ product.title }}">
       <img src="{{ product.images.first | product_img_url: 'small' }}"
       alt="{{ product.title }}" /></a>
    </div>
    
    <div class = "details">
      <a href= "{{ product.url | within: collection }}">
      {{ product.title | truncate: 30 }}</a><br />
      <small>{{ product.price | money }}</small>
    </div>
    
  {% endtablerow %}
  </table>

{% if paginate.pages > 1 %}
  <div id="paginate">
    {{ paginate | default_pagination }}
  </div>
{% endif %}

{% endif %}

{% endpaginate %}

This is just a simple if statement asking Shopify: "if a in this collection of products is empty (0) then do this". If we have any empty collection in our shop then the text "No products found in this collection will appear" will appear