How to enable advanced group filtering

So you have a lot of products and want to enable sub groups for your users to sort through. Follow the steps below to enable advanced group filtering like the image below:

Shopify filters

In case you already have a store with tags you can rewrite your existing tags to group them using Shopify export feature. Otherwise, if you write one by one tag, using admin area, simply just read the step 3 and step 5 below.

  1. Define your groups. In the image above, the groups are MaterialModel, Ocassions, Price 
  2. Export your products into a CSV file.
    (If you are creating new products, you can skip this step)
    export products from Shopify
  3. Prepend all existing tags with what group you want them to be in, with the format Group_Tag NameBased on our image at the top of this page, we would have tags like Material_WoolModel_Men, and Price_$50-$100.

    The left side of the underscore is the group name, and the right side is the tag for the product. Spaces can be included on either side of the underscore.

  4. Save your .csv file and import the products back into your store.Make sure you check ” Overwrite existing products that have the same handle” when uploading the file to prevent duplicate products from being created.
  5. Enable ‘Filter by groups’ under “Collection Pages’ in Theme Customize
    Shopify filters tutorial

 

HOW TO ORDER TAGS/FILTERS ANY WAY YOU NEED

In case you are using tags to display Price group for filtering, you may want to position the tags in appropriate order (since by default it will list, for example $100-$200 before $50-$100 since it is looking at first number – 1 is before number 5). To set it up right, you should write: Price_1_$50-$99, Price_2_$100-$499, Price_3_$500-$999 etc.

If you want to do the same for any other group (named anything you want) or if your group with prices is not named “Price“, you may want to hide the order numbers for them as well (for group called Price they are already hidden). Please write the names of the groups in ‘Theme Customize’ > ‘Collections Pages’ tab (screenshot below) and they will be hidden.

filters-5filters-2

On how to position main level groups, please scroll to the next chapter below.

 

HOW TO ORDER GROUPS ANY WAY YOU NEED

By default all filtes will be listed alphabetically. To position main level group the way you want, just type them in the field in the order you need and that’s it! You can find this section in Theme Customize under ‘Collection pages’. This gives you option to show, for exampleSize group (shown because you are using tags: Size_XL) before for example Price group (shown because you are using tags: Price_$50-$99). So you would need to type Size, Price in the field (because that is the order you want groups to show).

filters-4filters-3

 

LIMIT FILTER HEIGHT

You can limit the height for filter once they are open, so they do not take much space.

You can use:

  1. See More’ button or
  2. Show ‘ scrollbar’

filters-7

FILTER GROUPS CLOSED BY DEFAULT

By default, all groups and their filters will be displayed in full. You can choose to start with all filter groups closed and then set up to show only some of the open by default. This can save space in the left sidebar and let customers use filters more easier. Please check the settings on this image tutorial:

filters-8

LAYERED NAV

Use Layered Nav in filters sidebar instead of showing all avaliable filter tags always. When used, once customer select one filter, all other will disappear if they do not match the current view (will display only filters that these filtered products actually have).

filters-9