We had a Shopify client who wanted their products to be sorted by a certain tag before loading the rest of the products. It definitely makes sense to have a sorting by “Award Winning” products.

 

BUT THE THING IS, THERE IS NO API TO CREATE CUSTOM SORTING IN SHOPIFY.

Nevertheless, we figured out how to sort a collection of products by a certain tag without any third party Shopify app. The products with the tag will show first, followed by rest of the products without the tag.

 

So here’s how we did it… after lots of coffee, brainstorming, pizza and hair loss. Sharing it here so you can save your hair.

Sorting the products by a certain tag without a Shopify app is done through a few components

1) Add an identifier to the product template
2) Add new sorting method to collection sorting template
3) Get the HTML of a page collection through jQuery AJAX and use jQuery to sort products

1) Add an identifier to the product template

This step is about adding an identifier to your collection > product template. This identifier will be used by jQuery later to identify whether product has the tag we want to sort by.
In this example, we add a span with class ‘tag-award-winning’ as the identifier.
The code below shows how to run through this product’s tags and add the span with our identifying class if product has tag called ‘Award Winning’. We add this class within our product div container.
Note that the identifier has to be within your product div container or it can also be a class of your product div container.

 

2) Add new sorting type to collection sorting template

We are talking about the template where you list out all the sorting types.
Basically we need to add in the new sort by.
In our scenario, we added Award Winning with href as ‘award-winning’.

 

3) Get the HTML of a page collection through jQuery AJAX and use jQuery to sort products

Based on the sort type we added in step 2, we want to capture the click on Award Winning and use it to get the full HTML page response through AJAX.

 

DONE!

It took us so much time to get creative and figure it out since there wasn’t any easy way to do it with Shopify. And since we already put in the hard work, I guess we just had to give back to the development community, in a way.

Hope this comes across useful!

Need help with your Shopify store? Feel free to drop us an email at hello@smmile.com or call our hotline +65 8687 8143 on Monday to Friday, 9am to 6pm.

Hope this helps and if you have any questions, feel free to leave a quick comment below.

I’ll be around to reply to comments and answer questions.

Bryan

 

 

Singapore Web Design Company - Smmile

 

Smmile is a Shopify Agency in Singapore with over 10 years of experience in the web design and web development.

We do amazing web design, eCommerce, WordPress and the latest innovation in technology with compelling narrative to ensure our clients’ success. We design websites, get your website to the top of Google. Basically everything related to the web and online world.

At Smmile, we believe in designing for trust. Because we agree with the greatest brands in the world that design builds trust. And from trust, relationships are built and all businesses, are built on relationships.