collection.liquid

The collection.liquid template is used to render the collection page. The primary purpose of this page is to list the products within a collection, often presented as a grid of images with product titles and prices.

Template Considerations

Filtering by tags

You can use product tags to filter a collection into smaller subsets of products. For example, if you are in a collection and want to only show products with the tag "summer", you can do so by appending the tag's handle to the end of the collection's URL.

http://my-store.myshopify.com/collections/frontpage/summer

Tags are typically listed inside an HTML <select>, and Javascript is used to append the tag to the URL and refresh the page.

For more details and examples, see Filtering a Collection using Product Tags.

Sorting products in a collection

You can pass parameters to the sort_by query string to the URL to change the order of products displayed on the collection page.

http://my-store.myshopify.com/collections/all?sort_by=price-descending

Similar to product tags, the parameters for sorting are typically listed inside an HTML <select>, and Javascript is used to append the tag to the URL and refresh the page.

For more details and examples, see Enable visitors to change the display order when viewing collections.

Paginating

Shopify limits the number of products that can be output per page to 50. For this reason, collections with more than 50 products, must use the paginate tag to split the collection into multiple pages.

{% paginate collection.products by 25 %}
  {% for product in collection.products %}
    <!--show product details here -->
    {{ paginate | default_pagination }}
  {% endfor %}
{% endpaginate %}