What's your biggest current challenge? Have your say in Community Polls along the right column.

How can I create a food allergen filter for a collection page?

How can I create a food allergen filter for a collection page?

sancuscommerce
Shopify Partner
17 1 3

I am looking to add a filter for food allergens to a collection page. The allergens are currently configured as metafields on the product (such as "contains peanuts" or "contains shellfish"). how can i create a filter on the collection to allow the customer to select the allergens they want to exclude (the boolean for that metafield being false). i have other metafields i want to exclude from the list too. do i need to loop over all the metafields and hardcode which ones to display? looking for the best approach.

Replies 8 (8)

Uhrick
Shopify Partner
433 68 102

Hi, Sancuscommerce. 

Shopify has launched this app a while back https://apps.shopify.com/search-and-discovery?locale=pt-BR

It allows to create filters from metafields and other types of fields. Does it cover your needs?

Shopify Developer
Hire me for theme customizations at ricardomsilvestre@outlook.com or Upwork
Was my answer helpful to you? Please like or mark as solution
sancuscommerce
Shopify Partner
17 1 3

Thanks, I have this installed, but I do not see how I can use mulitple metafield values. I can do one metafield (ie, contains milk, but I want the user to be able to select multiple metafield values). I also tried using tags, but it doesnt allow me to limit the list of filter values by specific tags. It appears to be an all-or-none tag list.

Uhrick
Shopify Partner
433 68 102

Oh, right. I see the issue with what I said. There wouldn't be a metafield 'allergie' with the value, there would be several boolean metafields, with the types of alergies as the field titles. I assume this probably would need a somewhat complex development work. But I didn't understand very well what you tried with the tags. You were trying to somehow filter from the filtered results using tags? Is that it?

Shopify Developer
Hire me for theme customizations at ricardomsilvestre@outlook.com or Upwork
Was my answer helpful to you? Please like or mark as solution
sancuscommerce
Shopify Partner
17 1 3

Thanks for all of your suggestions. I fear you might be right that this requires a deal of custom development. 

 

This is what I trying to duplicate from the current site - a customer can select which allergens to exclude from the displayed meals:

Screenshot 2023-10-22 at 4.33.05 PM.png

This is what I created as metafield product values. I want to change the above checkboxes to a filter that they can select the checkboxes of meals to exclude... so if they select eggs, it would NOT display products with "Contains Eggs" = true (or put another way.. it would display products with Contains Eggs = false). Same would hold true to all of the allergens checked in the filter. so if i checked eggs and fish, i would only show products with contains eggs = false AND contains fish = false.

 

Screenshot 2023-10-22 at 4.36.12 PM.png

 

When I setup a filter just based on the contains coconut metafield, this is what I get.. but that is not what I want.. I want one filter with many options and only that filters on false. so instead of "Contains Coconut" I want it to say "Allergens" and then have coconut as a checkbox under it.

Screenshot 2023-10-22 at 4.40.18 PM.png

I also applied tags to the product.. but there are also non-allergen tags in there as well. for example, this product contains eggs and fish.. so it would be excluded if the customer selected the fish or egg allergen filter.

Screenshot 2023-10-22 at 4.39.10 PM.png

When applying the tags filter from the app you suggested, this is what i get, i want the counts (but the opposite... where it not in the tags.. this is showing the count of products with it as a tag). also, it is exposing tags that are not allergens.

Screenshot 2023-10-22 at 4.40.06 PM.png

Uhrick
Shopify Partner
433 68 102

Ok, I found a solution, create a metafield such as 'allergenics' for the products, set it as being of the single line text, and mark it to be a list of values

Uhrick_1-1698012497681.png

 

then, you can just add the appropriate allergenics of the products to them.

Uhrick_0-1698012450369.png

 

Shopify Developer
Hire me for theme customizations at ricardomsilvestre@outlook.com or Upwork
Was my answer helpful to you? Please like or mark as solution
sancuscommerce
Shopify Partner
17 1 3

Perhaps I am doing this wrong, but following your instructions, I can only assign 1 allergen to each product. But some meals contain multiple allergens (such as egg and shellfish). But the customer should be able to select either egg or shellfish or both and then have those products containing them removed from the product listing.

Uhrick
Shopify Partner
433 68 102

Uhrick_0-1698056118435.png

Did you create the metafield as a list of values? Are you clicking on add more items?

Shopify Developer
Hire me for theme customizations at ricardomsilvestre@outlook.com or Upwork
Was my answer helpful to you? Please like or mark as solution
Local1
Tourist
6 0 4

Hey, just wanted to say thank you! This solution worked for me for a similar use-case