CODEWITHSUNDEEP
shopify
MiGz
MiGz

Reputation: 592

Can a user-sorting system for a collection be done in Shopify?

In Shopify, a collection can have a default sorting order, which is great. But is there a way to change the default sorting order prior to rendering the collection's list of products? What I'm trying to accomplish is to put a "sort by" dropdown menu on the page, allowing the customer to sort the current list by price, by brand, by best selling items, alphabetically, etc. like so many modern shopping carts out there.

Upvotes: 1

Views: 3691

Answers (4)

typeofgraphic
typeofgraphic

Reputation: 322

If you want to avoid paying for the app - which may or may not duplicate each collection by the number of selections required - use / adapt the code below:

  <script>
    // jquery is already running on the site, so we use it to check the document is ready
    $(document).ready(function() {
        // Identify a Select Option from the value in the URL query text
        // Where this exists as an Option Value, add the 'selected' attribute to the Option
        // This ensures that when the page reloads the current option will be showing
        $("#selectSort option[value='{{collection.sort_by}}']").attr('selected', true);
    });
  </script>

  <div>
    <!-- 
    The Select Tag watches for a change, then pushes a new window.location using the value
    of the Option selected by the user
    -->
    <select id="selectSort" onchange='window.location="{{ collection.url }}?sort_by=" + this.value'>
      <option value="price-ascending">Price (lowest first)</option>
      <option value="price-descending">Price (Highest first)</option>
      <option value="title-ascending">A-Z</option>
      <option value="title-descending">Z-A</option>
      <option value="created-descending">Latest Addition</option>
      <option value="best-selling">Most Popular</option>
    </select>
  </div>

Upvotes: 0

markdunkley
markdunkley

Reputation: 1

We've recently added the ability to sort your collection dynamically on the storefront (before you could only sort a collection by one order in the backend.

docs: http://docs.shopify.com/manual/configuration/store-customization/advanced-navigation/add-a-reorder-drop-down-menu-to-a-collection-page

ex code: https://gist.github.com/carolineschnapp/11352987

Upvotes: 0

Brad R
Brad R

Reputation: 485

There is an app for this now: https://apps.shopify.com/power-tools-sort-selector

*disclaimer - I'm the developer :)

Upvotes: 0

Dylan Smith
Dylan Smith

Reputation: 1522

Collections are sorted ahead of time rather than sorted dynamically so that pages can load faster.

You can create multiple collections with the same products, but with different sorting. Then you can navigate to relevant collection based on user input.

Upvotes: 0

Related Questions