Faceted search in Shopify with Power Tools

I like Shopify. I like it a lot. But now and then I run into something of which i can’t believe it isn’t a native function. Filtered navigation is one of them.

Building your navigation in Shopify is pretty easy but for dropdown menu’s you already have to use a workaround. If you want a dropdown menu, you have to create a new link list and give it the exact same name as an item in your navigation. You can find a detailed explanation on dropdown menu’s in the Shopify Resources.

If you want a faceted search or filtered navigation, you’re on your own.
One of my favorite apps to fix this issue is Power Tools. It’s pretty easy to install. You’ll have to apply some Liquid magic if you want the filters only to appear on certain collections, but basic knowledge of HTML and CSS will get you pretty far.

Power Tools lets you create create filters, based on tags or collections, and organise them in handy groups.

If you want to let your users select multiple filters in a group, you’ll have to use a workaround because Power Tools lets you only select one filter in each group.

My workaround:

For each filter you create a different group.

When naming the filters, add something you can use to hide these headers. I just use “hide” to keep it simple :)

In your filter-menu.liquid, add a little piece of cssĀ to hide the extra headers.

<h4 {% if shop.metafields.pt_filter_header[menu_header.first] contains "hide" %}style="display:none;"{% endif %} >{{ shop.metafields.pt_filter_header[menu_header.first] }}</h4>

This way, it looks like you have 1 group with different filters, but actually they’re all different groups with just 1 filter so your users can select multiple filters at the same time.

If you need any help with your filtered navigation, leave a comment.

Shopify Ecommerce - Start your FREE trial now!