Manual Installation Instructions for Sort Selector

You will need to open your collection.liquid in the template editor, under templates.

Finding the primary collection

The first change you need to make is to find the primary collection. Place the following code near the top of the file.

{% assign primary_sort_collection = collection %}
{% if collection.metafields.sort_primary.collection_handle %}
    {% assign primary_sort_collection = collections[collection.metafields.sort_primary.collection_handle] %}
{% endif %}

Adding the selector

After you have found the primary collection you can now add the selector. This should be placed where you want the selector to appear on the page.

{% if primary_sort_collection and primary_sort_collection.metafields.sort_alternates.first %}
<div class="pt-sort-selector">
<label>Sort By: </label>
<select onchange="window.location.href = '/collections/' + this.options[this.selectedIndex].value + '{% if current_tags %}/{{ current_tags | join: '+' }}{% endif %}'">
  <option value='{{primary_sort_collection.metafields.sort_canonical.first.first}}'
  {% if primary_sort_collection.metafields.sort_canonical.first.first == collection.handle %}selected='selected'{% endif %}>
  {{primary_sort_collection.metafields.sort_canonical.first.last}}
  </option>
  {% for sort in primary_sort_collection.metafields.sort_alternates %}
  <option value='{{sort.first}}' {% if sort.first == collection.handle %}selected='selected'{% endif %}>{{sort.last}}</option>
  {% endfor %}
</select>
</div>
{% endif %}

It looks a little complicated, but all it is doing is listing each available sort order.

Using Alternative HTML

You may wish to use an alternative markup for allowing users to change the sort order, such as a list of links.

{% if primary_sort_collection and primary_sort_collection.metafields.sort_alternates.first %}
<label>Sort By: </label>
<ul>
  <li>
    <a href='{{primary_sort_collection.metafields.sort_canonical.first.first}}'
    {% if primary_sort_collection.metafields.sort_canonical.first.first == collection.handle %}class='active'{% endif %}>
    {{primary_sort_collection.metafields.sort_canonical.first.last}}</a>
  </li>
  {% for sort in primary_sort_collection.metafields.sort_alternates %}
  <li>
    <a href="/collections/{{sort.first}}{% if current_tags %}/{{ current_tags | join: '+' }}{% endif %}" {% if sort.first == collection.handle %}class='active'{% endif %}>{{sort.last}}</a>
  </li>
  {% endfor %}
</ul>
{% endif %}

Styling

You may wish to style the menu using CSS, the following CSS classes are a start:

.pt-sort-selector {
    float: right;
}

.pt-sort-selector select {
    display: inline;
    margin-left: 5px;
}

.pt-sort-selector label {
    display: inline;
    margin-left: 10px;
    position: relative;
    top: 2px;
}