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.