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 %}

Requirements for the Theme Store

If you're looking to submit your theme to the Theme Store, the collection.liquid template of your theme must meet the following conditions:

  • Attributes of the collection variable are output properly, including:
    • collection.title (not truncated)
    • collection.description
    • collection.image
  • Products are listed in a grid or list, with the following attributes of the product variable output:
    • product.title (not truncated and links to product.url)
    • product.price
    • product.image
  • Product grid must not break even with product images of varying aspect ratios
  • Sale badge or product.compare_at_price_max is shown when appropriate
  • Drop down or links for filtering a collection by product tags (tutorial)
  • Drop down to sort the products inside the collection (tutorial)
  • Display a proper message if a collection has no products in it
  • If a product has variants with different prices, use product.price_varies to show price variation
    • Ex: from product.price_min to product.price_max
  • Use proper pagination
Return to top

Ready to put what you've learned into action?

Build an online store with Shopify. Try it free.

Experience the future of retail now.

Shopify Point of Sale. Try it free.