_layouts/product-category.html

---
layout: default
show_sidebar: false
---

<div class="columns is-multiline">

  <div class="column is-12">
    {{ page.content }}
  </div>

  {% assign sorted_products = site.products | sort:page.sort %}

  {% for product in sorted_products %}
  <div class="column is-4-desktop is-6-tablet">

    <a href="{{ product.url | prepend: site.baseurl }}">

      <div class="card">

        {% if product.image %}
        <div class="card-image">
          <figure class="image is-4by3">
            <img src="{{ product.image }}" alt="{{ product.title }}" />
          </figure>
        </div>
        {% endif %}
        <div class="card-content">

          <p class="title is-4">{{ product.title }}</h2>
          <p class="subtitle is-4">{{ product.subtitle }}</p>  
          <p class="title is-5 has-text-right">{{ product.price }}</p>

        </div>
      </div>

    </a>

  </div>
{% endfor %}
</div>