View source for Liquid Collection Sorting

You can pass a sort parameter using the ''sort_by'' query string appended to the URL on a collection page.

<pre>
http://my-store.spiffystores.com/collections/t-shirts?sort_by=price-descending
</pre>

The ''sort_by'' parameter will override the default sorting order for the collection and can be selected by the customer using an HTML select drop-down.

Your theme may have this functionality already built into it. but if it doesn't, then you can follow these instructions to add a sorting option to your collection pages.

Firstly, you will need to go to your Toolbox Theme editing page and edit the '''collection.liquid''' file.

You will need to insert the following code into the file at an appropriate position to display a select drop-down box.

<pre>
{% if collection.id > 0 %}
  <label for="sort-by">Sort by</label>
    <select id="sort-by">
      <option value="featured">Featured</option>
      <option value="price-ascending">Price: Low to High</option>
      <option value="price-descending">Price: High to Low</option>
      <option value="title-ascending">A-Z</option>
      <option value="title-descending">Z-A</option>
      <option value="created-ascending">Oldest to Newest</option>
      <option value="created-descending">Newest to Oldest</option>
      <option value="updated-ascending">Most recent update last</option>
      <option value="updated-descending">Most recent update first</option>
      <option value="random">Random</option>
      <option value="default">Default</option>
    </select>
  
  <script type="text/javascript">
    Spiffy.queryParams = {};
    if (location.search.length) {
      for (var aKeyValue, i = 0, aCouples = location.search.substr(1).split('&'); i < aCouples.length; i++) {
        aKeyValue = aCouples[i].split('=');
        if (aKeyValue.length > 1) {
          Spiffy.queryParams[decodeURIComponent(aKeyValue[0])] = decodeURIComponent(aKeyValue[1]);
        }
      }
    }

    /* jQuery Specific Code */

    jQuery('#sort-by')
      .val('{{ collection.sort_by | default: collection.default_sort_by | escape }}')
      .on('change', function() {
        Spiffy.queryParams.sort_by = jQuery(this).val();
        location.search = jQuery.param(Spiffy.queryParams).replace(/\+/g, '%20');
      });
  </script>
{% endif %}
</pre>

This sample code is written using the jQuery Javascript framework. You will need to make the appropriate adjustments to the code to support other frameworks.

The following Javascript fragment can be used with MooTools.

<pre>
  <script type="text/javascript">
    Spiffy.queryParams = {};
    if (location.search.length) {
      for (var aKeyValue, i = 0, aCouples = location.search.substr(1).split('&'); i < aCouples.length; i++) {
        aKeyValue = aCouples[i].split('=');
        if (aKeyValue.length > 1) {
          Spiffy.queryParams[decodeURIComponent(aKeyValue[0])] = decodeURIComponent(aKeyValue[1]);
        }
      }
    }

    /* MooTools Specific Code */

    var select_element = $('sort-by');
    select_element.value = '{{ collection.sort_by | default: collection.default_sort_by | escape }}';
    select_element.addEvent('change', function() {
      Spiffy.queryParams.sort_by = this.value;
      location.search = Object.toQueryString(Spiffy.queryParams).replace(/\+/g, '%20');
    });
  </script>
</pre>

You can find a list of the valid sorting options in the [[Liquid Template Variables - collection|Liquid Collection variable]] documentation.

The collection sorting option can only be used to sort Standard and Super collections. It does not apply to any system generated collections such as Related Collections, Product Type collections, Vendor collections or the collection of all products.