Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
<div>
<label for="sort-by">Sort by</label>
<select id="sort-by">
<option value="manual">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="best-selling">Best Selling</option>
</select>
</div>
<script>
Shopify.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) {
Shopify.queryParams[decodeURIComponent(aKeyValue[0])] = decodeURIComponent(aKeyValue[1]);
}
}
}
jQuery('#sort-by')
.val('{{ collection.sort_by | default: collection.default_sort_by | escape }}')
.bind('change', function() {
Shopify.queryParams.sort_by = jQuery(this).val();
location.search = jQuery.param(Shopify.queryParams).replace(/\+/g, '%20');
});
</script>
Owner

carolineschnapp commented Jun 1, 2014

Hi @typeofgraphic, sort_by only works with those values:

  • manual
  • price-ascending
  • price-descending
  • title-ascending
  • title-descending
  • created-ascending
  • created-descending
  • best-selling
Owner

carolineschnapp commented Jul 15, 2015

How do I change the default sorting order on the collection page, when the collection is sortable on the storefront? Example: By default, it shows the products A to Z, and I want to sort by publication date.

Answer

The type of ordering selected on the collection page in your admin becomes the default sort order on your storefront for said collection.

For example, if you order from A to Z in the admin, if you visit your collection page on your store front, the sort order will be from A to Z. From there, if you pick 'Featured' in the sort drop-down, you will see the Manual order of products as last set by yourself in your admin.

So, to change the default type of sort on your storefront, go to the admin page of your collection, and select a different type of sort.

If you're interested in changing the default order on your Catalog page, you will need to create a collection with handle “all”, and select a sort order for it.

The above is entirely done on the collection pages in your admin, and not in the theme.

Hi Caroline, thanks for the filtering code above. Do you know how I could set the default display order to be by vendor (as in this thread: https://ecommerce.shopify.com/c/ecommerce-design/t/sort-filter-sorting-by-vendor-and-type-161547) but still allow users the option of reordering?

The easy way to do this is by going to Online Store (The globe) / Navigation / and on the end of the links type ex. ?sort_by=best-selling or ?sort_by=title-ascending

@carolineschnapp What about setting the default sort for a collection based on a type? for example /collections/types?q=shirt

Thank you!

Hello, if we'd like to change the "Best Sellers" sort item to use $$ sold instead of units sold, how would we modify the search variable?

bsehl commented Aug 26, 2016 edited

Hi, @carolineschnapp!

I've done the following so that I could display the items all at once instead of a drop-down:

<!-- /snippets/collection-sorting.liquid -->
<div class="form-horizontal">
  <div class="os_categoryFilterLinks">
    <ul>
      <li><a href="#sort" data-select="manual">{{ 'collections.sorting.featured' | t }}</a></li>
      <li><a href="#sort" data-select="best-selling">{{ 'collections.sorting.best_selling' | t }}</a></li>
      <li><a href="#sort" data-select="created-descending">{{ 'collections.sorting.date_descending' | t }}</a></li>
      <li><a href="#sort" data-select="price-ascending">{{ 'collections.sorting.price_ascending' | t }}</a></li>
      <li><a href="#sort" data-select="price-descending">{{ 'collections.sorting.price_descending' | t }}</a></li>
    </ul>
  </div>
</div>

<script>
  Shopify.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) {
        Shopify.queryParams[decodeURIComponent(aKeyValue[0])] = decodeURIComponent(aKeyValue[1]);
      }
    }
  }

    var $select = $('#SortBy');
    $('a[href="#sort"]').click(function () {
        $select.val( $(this).data('select') );
        event.preventDefault();
        Shopify.queryParams.sort_by = jQuery(this).data('select');
        location.search = jQuery.param(Shopify.queryParams);
    });

  $(function() {
    $('#SortBy')
      .val('{{ collection.sort_by | default: collection.default_sort_by }}')
      .bind('change', function() {
        Shopify.queryParams.sort_by = jQuery(this).val();
        location.search = jQuery.param(Shopify.queryParams);
      }
    );
  });
</script>

Unfortunately, while the URL resolves correctly, my collection isn't sorting! Help?!

marcobiedermann commented Feb 23, 2017 edited

This could be easily implemented with some newer APIs and ES2015 syntax. No need for jQuery:

document.querySelector('#sort-by').addEventListener('change', function() {
  const urlSearchParams = new URLSearchParams(window.location.search);

  urlSearchParams.set(this.name, this.value);

  window.location = `?${urlSearchParams}`;
});

I like to use the latest web techniques and use some build tool like babel to transpile it for older browsers. Also check for URLSearchPrams support. If not, load a shim.

Hi Caroline, I used your first code and it worked perfectly, however, I would like to align right. Right now, it's aligning left. I don't know anything about code or CSS. Please help. Thanks.

What should I need to do, if I want to do it with ajax...
Thanks for any suggestion.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment