Create a gist now

Instantly share code, notes, and snippets.

<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>
@carolineschnapp
Owner

Hi @typeofgraphic, sort_by only works with those values:

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

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.

@customstudio

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?

@kristianbangsoe

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

@luiscielak

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

@bradmadiuk

Thank you!

@gabebrown-freestyle

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
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
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.

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