I'm designing an e-commerce mobile app where the products can be filtered by multiple categories. The problem is, the categories can be up to three layers.
The hierarchy example
- Clothes (1993)
All Clothes []
- Dress (376)
All Dress []
Mini Dress (86) []
Maxi Dress (34) []
Midi Dress (12) []
+ Shirts (185)
+ Shoes (32)
Glasses (21) []
+ Books (573)
+ Electronics (21)
For now it displayed into collapsible list, where the select button added to lowest (most specific) categories. As you can see it looks very cluttered and complex for mobile display and user can easily get lost of what categories they already selected.
My first idea is to show not-empty lowest (most specific) categories just like tags like this one but with counters. But then I realized that user also must be able to choose the 'all [categories]'.
Do you know any best practice to achieve this? Thank you!