Power Tools Filter Menu gives you an easy way to create and manage a filtering type of menu, whereby users can select multiple criteria on which to filter your store's products.

By default Shopify does not include an advanced filtering mechanism, even though it is used by many of the top e-commerce sites worldwide. Shopify does however support filtering by collections and tags, which is the basis for how the Power Tools Filter Menu works.

Because Shopify does not natively support such a menu some changes may be required in the way you structure your collections and product tags to make it compatible with the filter menu.

Please note: the Filter Menu is capable of updating/changing your product tags, and in some cases the app will remove tags from your products, read why the app removes tag here. We recommend exporting a backup of your product list before making any changes in the app, just in case the changes need to be reverted. Here is a guide from Shopify on how to export your product list.

Technical Overview

There are a small number of rules should be understood before continuing:

  • Each tag that you plan to filter on must have a corresponding collection, which only contains products with the same tag as the collection handle.
  • Tags used for filtering need to be in a 'handle' format, as seen in the address bar. e.g. 'Snowboard Boots' is not correct, 'snowboard-boots' is.
  • The title of each filter option is the title of the corresponding collection.
  • The menu can only filter using AND style rules, you cannot select multiple items such that it increases the number of products (OR style)

Luckily Power Tools will guide you through the process of ensuring everything is correct, and will even update tags and create collections as needed.

For details on how to set up your filters, please see the following guide:

Updating your site

In order to see the menu you will need to update your theme.

You can find our guide for how to install the app here, we have automated installers for many Shopify themes. If your theme is not supported we can help to install the app for you.

If you would like us to assist in the installation, an expert from Shopify Power Tools can do this for you, simply contact support@powertoolsapp.com - or get in touch through the live chat in the app.

Click here go to the installer

Manual installation instructions

You may wish to install the Filter Menu manually, and full step by step instructions for each theme are available in the installer.

Working with variants

Variants, such as color or size, are not able to be filtered correctly with Shopify collections, hence you will see sold out variants in the menu.

There are two possbile fixes:

  • Use the Variant Tagger app. Click here for more info. This is the recommended solution, and the Variant Wizard is available to set up filtering by variants easily using this option.
  • Delete sold out variants. This can be automated with the Smart Delete app or the Power Tools Suite. Click here for more info.

Hiding and Deleting

When setting up filters using the automated options, often the app may create filters that you do not want to show to customers. In this situation if you delete the filter it will come back after some time, this is because the filters are being created based on your product data.

In this situation it is best to 'Hide' the filter, by clicking on the 'eye' icon next to each filter. The filter will then be greyed out and will not be shown to your customers. Make sure you press 'Save and Update' after.

If you accidentally add the wrong type of filters to a group, you will also need to unlink the automated feature from that group before removing the filters, for Product type or Vendor filters, you'll need to disable the options in the 'Easy Collections' app, for variant filters, like size or color, you'll need to disable the options in the 'Variant Tagger' app.

Conditional Filters

The Filter Menu supports only showing a group once a certain filter or one of a number of filters has been selected.

To use this feature click on the 'Visibility' button of the group you wish to hide/show, you can then select the filters/collections to use as 'parent' filters that must be selected before that group will show.

For more information on the Visibility settings, and a guide on how to set up nested filtering, click here.

Tag Aliases

The Filter Menu has a feature that allows you to group together specified tags for use in a single filter. You can set this up by clicking the (+) plus icon next to each filter handle/tag.

This can be used in a number of ways, but the two most common are:

  1. Grouping colors or sizes that are similar. For example lets say you have a number of variations of colors that should all map to a single 'Blue' filter, such as 'Navy', 'Sky Blue', 'Baby Blue' and so on. You can associate each one of these alternative tags to the 'Blue' filter, so when a user clicks on 'Blue' all the blue variations show up.When setting this up you will want to check 'Hide the matching filters', this will hide any of the alias filters, such as 'Navy', so it won't show as a filter. This feature works with the Variant Tagger, allowing you to see all of your color, size and other variant options and then map them to a single filter.
  2. Creating 'parent' filters. You can create a new parent filter that is an aggregation or sum of all of the alias or child filters.This is an easy way to create top level set of filters that contain a number of sub-filters that map directly to each other.When used in combination with the Conditional Filters system it allows you to create a set of sub-filters that only show when when you select the top level filter, and where the top level filter contains all of the sub-filter products exactly.

Note that for each tag alias you should expect a matching product to be tagged with both tags - the alias tag and the parent filter handle/tag. So in the example above for colors, a Navy product would be tagged with both 'navy' and 'blue', or if using tag prefixes 'color-navy' and 'color-blue'.

For more information on merging filters, and the alias feature, click here.

Theme Settings

You can adjust the look and behaviour of the filter menu without editing any code or CSS. These options can be found in your theme editor, under Theme Settings -> Filter Menu.

Click here for more information

Issues with other apps

It has been noticed that certain apps can interfere with the filter menu. In some cases this can result in your products being un-tagged and removed from their collections.

Current list of apps include

  • Make Model Year Search - this app adds tags for each of your makes and models, so if you have over 1000 models it can cause issues with filtering.
  • Genius Collections
  • Some inventory management apps overwrite the tags (this can usually be fixed in settings however)

Advanced code

A number of additional helpers are available in the installer, here are some other common examples.

Showing tags in a friendly way

One potential downside of the filter menu is that you need to convert your tags to their 'handle' format, which may not look as nice in a tag cloud.

There is a nice fix for this, as you can use that handle to get the collection and then display the title to the customer.

{% for tag in collection.tags %}
    {% assign tag_collection = collections[tag] %}
    {% if tag_collection.title == '' %}
        {{ tag | link_to_tag: tag }}
    {% else %}
        {{ tag_collection.title | link_to: tag_collection.url }}
    {% endif %}
{% endfor %}

Did this answer your question?