Best practice for applying filters for products

a-ok
Shopify Partner
11 0 0

I'm trying to work out the best way to structure my data (for filtering on the front end) for an upcoming wine shop.

The filters required on the front end are dropdowns with selectable options and as products are narrowed down (filters are applied) the available options should reduce i.e. if someone selects 'France' then the grapes shown should only be those which appear for products tagged from 'France'. I think this is called 'faceted search' but I'm not sure.

An example of how the filters would look is returned below.

The thing I'm struggling with is how best to add these 'attributes' to the product in order to have this type of filtering and if it's possible within Shopify. The filters for the front end would need to be navigation 'Menus' as there's no way to return this otherwise but it's how I apply the data to the products.

My original thinking was to have a collection for each main filter 'group' (Style, Type, Grape, Price, Producer, Region, Country) then these collections would include products based on either tags or price. Ideally the products would have a 'filterables' object (which contained all the tags and price) so each time the user clicked on a filter it would search those filterables and return the products that matched and then cross reference the products returned with the main filters and grey out any filters that didn't exist in the returned products. Is this the best/most efficient way of doing it?

Products also have 'metafields' that contain certain attributes such as 'Country' and 'Region' so would it be possible to include these attributes in the 'filterables'. As you can't manipulate data from Shopify my only way to see this working would be to create a data tag for each product that returns all the keywords for searching and simply 'show/hide' the products that match but wasn't sure if there was a smarter way to do this?

Anyway. Any advice would be much appreciated.

Style

  • White
  • Orange
  • Rose
  • Red...

Type

  • Light-bodied
  • Full-bodied...

Grape

  • Pinot Noir
  • Shiraz...

Price

  • £20–£50
  • £50–£100...

Producer

  • X
  • Y
  • Z...

Region

  • Beaujolais
  • Champagne...

Country

  • France
  • Italy
  • Germany...
0 Likes
Leysam
Shopify Partner
24 1 13

I would recommend tagging the products by filter categories. Themes such as Prestige uses this kind of technique for filtering

example: 

Style_White

Type_Light-bodied

Grape_Pinot Noir 

etc...

 

And to make it easier for the admin/client to add these pieces of information you can use Accentuate auto-tagging option. 

 

Here is the working example from Prestige Theme 

Leysam | The Shopify Guy  

 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - Email me at edwardwindtalker@gmail.com or add me on Skype: samypogs
a-ok
Shopify Partner
11 0 0

Thanks for the reply @Leysam 

This makes sense.  Can I ask, for price, how would you list it? On some themes, included Prestige, they seem to write '-350-to-500' and I'm curious to know why they prepend it with the dash?

0 Likes
Leysam
Shopify Partner
24 1 13

For the price, its the same as other filters you just write it as:

Price_£20–£50 this will display "£20–£50" in the filter. Really depends on how you want to display the filter name on the frontend

You can write Price_£20 to £50 and it will show "£20 to £50" on the frontend. As for dynamically filtering the product by price range, there are no ways(in my head) for now to achieve this, I can only think of tagging and using collections for this. 

 

Thanks

Leysam

 

 

 

Leysam | The Shopify Guy  

 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - Email me at edwardwindtalker@gmail.com or add me on Skype: samypogs
Nancy_Drake
Trailblazer
137 8 14

Hello @a-ok 


If you want to try the advanced faceted search (by product option or metafield), you can try Ultimate Filter & Search app. https://docs.sobooster.com/search/product-filtering-guide/filter-collections-using-metafields

0 Likes