Filter Shopify Collection by Price (dynamically using symbols)

Hi there - I have a symbol with some price filter buttons that I’d like to insert on each of our Shopify collection pages but I need some help figuring out how to filter the collection dynamically by price. Here is a sample link of a collection page I’m working on however I have not tried binding the symbol yet for the price filters because I’m just not sure where to start (“Create Your Own Gift” will be linked to an external page at some point): Custom & Unique Gifts for Dad l Fathers Day Gifts | Knack

Thanks in advance for any help or guidance on this one!

Hi @holli! This is a really awesome question. I’ve already covered filtering content like this before, so my team asked me to take a look at this forum post. It would be great to answer this question in a way that will let anyone curious about filtering products learn from your question!

Are you comfortable with sharing the related content entry (the link to the collection page when it’s open in the Editor) so I can show you how to work with the specific data? I’d also like to ask what level of comfort you have with coding / JavaScript!

Thank you!
~ Logan from Builder.io

1 Like

Hi Logan! I very much appreciate your help. Yes, here’s the link from the Builder Editor: Builder.io: Drag and drop page builder and CMS . In terms of comfort level with coding / JavaScript, I am a super-novice but have been able to follow along with some of the videos provided on Builder to duplicate things here and there. Thanks again for taking a look!

1 Like

Hey Holli!

Still working on this one. I am working through some things that can go wrong when setting this up and making sure to offer the most reliable path forward. Thank you for your patience on this one!

1 Like

Hi @holli ,

This is somewhat of a longer video, but it covers the entire process of creating the collection filtering that you want to have: Creating custom filters for Shopify collections

Please let me know if you would prefer an abridged written version of this, or if there’s anything else I can do to help!! :grin:

1 Like

Logan, this is a BEEFY video! THANK YOU! It took a while to get through but I genuinely appreciate the detail you went into to explain all of the steps. I learned a lot along the way which I think will help me with other projects as well. The way you approached the filters, I am not heartbroken that it wouldn’t work in a symbol. I’ll be playing with this over the next few days and will provide additional feedback. I highly recommend this video for anyone trying to expand their collection functionality who is unfamiliar with Javascript but open to tinkering :smile:

1 Like

Ok, so I’m still playing with this but something we’ll be looking to do in the nearish future is to add ++ filtering for gifts from our current Shopify product tags (which I can confirm are available in the content state :slight_smile: ). Now that you’ve seen our Dad collection, let’s say you want to buy a gift for your dad who is a foodie and likes to cook but probably wouldn’t be interested in the self care/spa gifts… so we want to + + some filtering options to refine. And maybe you want to return more than one filter from the lower groups (because in the example image below maybe “Gifts for Chefs & Foodies”, “Sweet Treats”, and “Coffee & Tea Gifts” all apply). I’m wondering if the above solution could be expanded in a way to support this type of filtering even though the results become way less predictable with so many possible filter combinations?

Here’s another example from a tea site that we’ve been inspired by:

Thanks for taking a look!

1 Like

Very cool idea~!

I will need to take some time to make sure I have the best approach again, but this is possible! We just now need to expand that filter to not just filter values, but to dynamically generate filter categories and their values and add them to a filtering menu. :thinking:

Will answer this soon!
~Logan from Builder.io

1 Like

Hi again, Logan! We were just chatting about the filtering and it may have been implied but found a really good example on Everlane (go figure) where the filter groups can be filtered as “ORs” and there’s breadcrumbs so that the user can see what filters they’ve selected and remove filters without clearing ALL and starting over. Thought it was cool so wanted to add to our inspirational thread. I hope you have an awesome weekend! :smile: