How to sort a collection in Shopify using a custom metafield


Shopify allows you to sort a collection of products using one of the following criteria:

  • best-selling
  • title-ascending
  • title-descending
  • price-ascending
  • price-descending
  • created-ascending
  • created-descending

— (source)

A client of mine has a collection of products that are all events. So they have a date attached as to when the event will be happening. And he wanted the events to be sorted by this custom date metafield.

He used metafields2 to add the extra fields.

Our solution was to add a data attribute to every product rendered by liquid. Then use jQuery to sort the DOM elements based on the value of that attribute’s value if the sort_by parameter in the URL was our custom metafield.

https://gist.github.com/magician11/86f2e28d58f4accbd70f


2 responses to “How to sort a collection in Shopify using a custom metafield”

  1. I know this is a really old post, but we’re building something similar to the above, and I just wanted to ask how exactly the metafield was created? Am I correct in thinking the data can only be either a string or an integer in a metafield? How did you manage to get a filterable date in there?

    • Hey Jason. Yeah this was a while ago 🙂 I had to read it again and try and figure it out. I think I understand your questions.

      How was the metafield created? metafields2 app allows us to add extra fields.
      What is the data type for an attribute? A string. Of course you could have my-date=”123123″ which is a number encoded as a string.
      How did I get a filterable date? I guess I stored the metafields values as something that could be added to the constructor of the Date object (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)

Leave a Reply

Your email address will not be published.