Searching for how to implement standard sort_by functionality in Shopify is a mixed bag.  The official support for this functionality does not work well in custom themes.  Simply dropping in the code they provide does not work. 


The HTML provided by the official example is fine.

[code lang=”html” title=”Sort By HTML Code”]
<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>

I’ve modified the Javascript to work with a little less complexity

[code lang=”js” title=”Sort By Javascript to make it work”]
// Collection sort functionality
Shopify.queryParams = {};
// get the url from the window object
var url = window.location.href;
// turn the string into a url object
url = new URL(url);
// if the parameter youre looking for exists grab that parameter. If not, set the default.
param = ( url.searchParams.get(‘sort_by’) )? url.searchParams.get(‘sort_by’) : ‘manual’;

// event handler on change for sort by
$(‘#sort-by’).on(‘change’, function(e){
// get the value of the selection
Shopify.queryParams.sort_by = $(this).val();
// reload the page with the new url param = $.param(Shopify.queryParams).replace(/\+/g, ‘%20’);
// this sets the param on page load to be default
// or the param in the URL youre currently viewing.

Piece of cake.