Skip to content

Instantly share code, notes, and snippets.

@cshold
Created May 15, 2014 13:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save cshold/7ff6ec0cd01429701aea to your computer and use it in GitHub Desktop.
Save cshold/7ff6ec0cd01429701aea to your computer and use it in GitHub Desktop.
Shopify Collection Sorting
<div class="form-horizontal">
<label for="sortBy">Sort by</label>
<select name="sortBy" id="sortBy">
<option value="manual">Featured</option>
<option value="best-selling">Best Selling</option>
<option value="title-ascending">Alphabetically, A-Z</option>
<option value="title-descending">Alphabetically, Z-A</option>
<option value="price-ascending">Price, low to high</option>
<option value="price-descending">Price, high to low</option>
<option value="created-descending">Date, new to old</option>
<option value="created-ascending">Date, old to new</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]);
}
}
}
$(function() {
$('#sortBy')
// select the current sort order
.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>
@bryan-snyder
Copy link

how do i change the default option?

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