Liquid Collection Navigation

A product is an independent entity and may belong to many different collections.

Since a collection is just a list of products, when you view a collection and then view a product from within that collection, the product is displayed, but there are no indications as to the collection from which the product was selected.

Many web designers wish to create a way of navigating within a collection.

This tutorial explains how to add this feature to a theme which doesn't already support it.

A product is always referred to by a URL such as

/products/blue-tshirt

A collection is always referred to by a URL such as

/collections/sale

What we need to do is to tell the software about the collection we are currently using while viewing at a product. We can achieve this by using the new nested URL scheme

/collections/sale/products/blue-tshirt

Change the Product Links

Edit collection.liquid and change the links to your products from

{{product.url}}

to

{{product.url | within: collection }}

In this example, collection is the collection that the product belongs to.

Modify product.liquid

In product liquid you now have access to the Collection object. This object is only present if the URL of the product contains the collection.

The most common use for this feature is to create prev/next navigation. For this the Collection object contains two new methods, next_product and previous_product.

Here is an example which adds navigation to the product.liquid file:

{% if collection %}
  {% if collection.previous_product %}
    {{ 'Previous Product' | link_to: collection.previous_product }} |
  {% endif %}
  {% if collection.next_product %}
    {{ 'Next Product' | link_to: collection.next_product }}
  {% endif %}
{% endif %}

Notice that the whole block is contained in a {%if collection %} block. This ensures that nothing of this will be shown should the user be viewing a product outside of a collection scope.