Collapsible filters on collection pages / Prestige

Highlighted
New Member
3 0 1

Hi there!

 

We're using the Prestige theme on our website but I'm having an issue.

 

Whenever you are on a collection page (for example https://naturalcompany.com/collections/beauty), you can see the filters on the left side, which is great. Now the issue that I have is that I would like to make them collapsible, but I can't figure out how to do this!

 

I've attached a screenshot of an example of what I'd like.

 

Thanks! Screenshot 2020-01-22 at 16.20.02.png

0 Likes
Highlighted
Explorer
78 4 5

HI @Naturalcompany,

 

It's great that you implement product filtering on your site so that visitors can easily navigate and find what they are looking for faster. However there are some advice you should consider:

 

1. Allow users to select multiple filter values

When it comes to effective product filtering, filter values should not be mutually exclusive, meaning customers must be able to apply as many filtering values as possible within the same filter type and yield refined and more relevant results. Your current product filtering forced users to select only one filter value at a time and have to go back and forth to apply different filtering values individual. 

 

2. Display applied filters

By using Breadcrumb trail, all selected product attributes are displayed in a dedicated location. As the user keeps choosing, the selection continues to being added to this trail. The selections usually have an 'x' icon so that users can deselect any of their previously applied options during a product search. With the default collapsed filter on the horizontal toolbar, it's easier for customers to keep track of their selection and make sense of the results presented.

 

3. Include search box in the filter options

As you have so many values for the Brand filter, the sidebar could become too lengthy. Include a search box the the filter option allows customers to quickly select the brands they prefer.

 

4. Set filters options collapsed 

By collapsing filter menus, you can ensure customers can all the types of filters available to them so that they can decide on the most relevant filter type to dive in.

 

5. Display product count for each filter value

You can enhance the user experience for classification product filters by including the number of matching items in each value. By displaying product count by attribute, you can inform your customers how many products each filter contains so that they can adjust their filtering for more results. The count should be updated each time a new filter is applied.

 

If you want to use an advanced out-of-the-box product search and filter, you could consider Ultimate Search and Filter (Autocomplete, Product Filtering, Merchandising, Analytics). See the demo store (with Collapsible filter option) at https://usf-vertical.myshopify.com/

0 Likes
Highlighted
Tourist
3 0 0

Hi @Naturalcompany 

I'm having the same issue here, did you ever find a way to enable collapsible filters? 

0 Likes
Highlighted
Tourist
11 1 1

Hello @avecamour You still need this?

Shopify Development & Support
Problem Solved? Accept ✔️ and Like ? the solution.
Need Code Changes? Send me a direct message.
0 Likes
Highlighted
Tourist
3 0 0
Yes I do, any recommendations?
0 Likes
Highlighted
Tourist
11 1 1

Yeah... I have accomplished something similar for a client an year ago and I think it should be possible to add filters on your store too. However, allow me sometime to check Prestige theme which is running on your store and get back to you!

Shopify Development & Support
Problem Solved? Accept ✔️ and Like ? the solution.
Need Code Changes? Send me a direct message.
1 Like
Highlighted
Tourist
11 1 1

Hello @avecamour 

Thanks for your patience! Unfortunately I have lost access to the code backup which had the custom work done for the filters. But, I looked in Shopify Documentation for you and here are a few urls which can help you:

https://shopify.dev/tutorials/customize-theme-filter-collections-with-product-tags
https://shopify.dev/tutorials/customize-theme-add-sort-order-menu


Though, a paid app like https://demo-pfs.boostcommerce.net/ will be easy to setup. Check this demo: https://boost-pfs-vertical.myshopify.com/collections/dresses

Shopify Development & Support
Problem Solved? Accept ✔️ and Like ? the solution.
Need Code Changes? Send me a direct message.
0 Likes