collection.liquid

The collection.liquid template provides list of all products in your store with custom filter by collections.

collection

collection.title

Returns the title of the collection. Use it for the page heading.

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

collection.products

Returns an array of the products in the collection. Loop through it to render a product card for each item. More info ›

{% for product in collection.products %}
  <a href="{{ product.url }}">
    <img src="{{ product.featured_image }}" alt="{{ product.title | escape }}">
    {{ product.title }} - {{ product.price | money }}
  </a>
{% endfor %}
			

Sorting products

Use collection.sort_by to read the sort order currently applied to the collection, and collection.default_sort_by to read the default order configured for it. Combine them to build a sort dropdown that submits to the collection URL.

{% assign sort_by = collection.sort_by | default: collection.default_sort_by %}
<select name="sort_by">
  <option value="manual" {% if sort_by == 'manual' %}selected{% endif %}>Featured</option>
  <option value="price-ascending" {% if sort_by == 'price-ascending' %}selected{% endif %}>Price, low to high</option>
</select>
			

collection.filters

Returns the list of filters available for the collection, based on the shop's product filter settings. Loop through it to let visitors narrow down the products. When collection.filters is blank, no filters are configured.

{% if collection.filters != blank %}
  {% for filter in collection.filters %}
    {{ filter.label }}
    {% for value in filter.values %}
      {{ value.label }} ({{ value.count }})
    {% endfor %}
  {% endfor %}
{% endif %}
			

Pagination

Collections can hold many products, so wrap the loop in a paginate tag and output navigation links when there is more than one page. More info ›

{% if paginate.pages > 1 %}
  {% include 'pagination' %}
{% endif %}
			

The collection object exposes many more attributes. More info ›

icon-accounticon-add-newicon-add-storeicon-appicon-appleicon-archiveicon-arrowdownicon-ascicon-bookicon-cancelicon-cart-addonicon-checkouticon-cherryicon-collectionicon-comfirmicon-confirmicon-couponicon-creditsicon-currencyicon-dashboardicon-discounticon-disintegrateicon-domainicon-dscicon-duplicateicon-editicon-emailicon-exclamation-triangleicon-exporticon-eyeicon-eye-slashicon-fullscreenicon-fullscreen-closeicon-generalicon-gifticon-gridicon-hddicon-helpicon-importicon-infoicon-integrationicon-invoiceicon-likeicon-listicon-locationicon-logouticon-new-tabicon-not-secureicon-optionicon-ordericon-outline-arrowdownicon-pageicon-paymenticon-plusicon-posicon-pricingicon-printericon-producticon-product-sumicon-product-sum-xicon-redirecticon-reporticon-reseticon-searchicon-secureicon-settingicon-shippingicon-staricon-storeicon-switch-storeicon-tagicon-taxesicon-templateicon-themeicon-tickicon-trashicon-unarchiveicon-uploadicon-user-tagicon-usersicon-weighticon-wholesale