Skip to content

Instantly share code, notes, and snippets.

@carolineschnapp
Last active December 5, 2025 08:54
Show Gist options
  • Select an option

  • Save carolineschnapp/11352987 to your computer and use it in GitHub Desktop.

Select an option

Save carolineschnapp/11352987 to your computer and use it in GitHub Desktop.
<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>
@beckjh95
Copy link

beckjh95 commented Jun 8, 2021

Thank you all for the codes! It worked for me on the Debut theme. I was just wondering if anyone knew how to add space below the sort by drop down menu as it is currently touching the product image below it. Thanks

@Munazzahafeez
Copy link

Thank you soo much. Its working perfectly fine for me. Huge Thanks.

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