Streaming live at 10am (PST)

Ecommerce Shop: Sort/Filter Function

Hi, I am wondering if anyone has been able to create multi-dimensional shopping filters for customers?
I.e. Generate a drop down list that allows the customer to View products by Brand, By Price, OR By Item Category.

Here is an example from Macy’s:

If there is a tutorial, I would appreciate a link! The tutorials I have found are not specifically for Ecommerce.

Or … any workaround ideas?

Much appreciated :slight_smile:
Amanda


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

That is faceted search. Not something you can accomplish in webflow without a third party product integration. I built an integration with https://www.algolia.com/ on a client site (not webflow) that does just that.

@sabanna You have a tutorial on setting something like this up with collections don’t you?

Yep. MixitUp can do it.

1 Like

This is great!
I definitely give MixitUp a try when I’m ready.

Thank you @sabanna @AlexN and @webdev

1 Like

This doesn’t work with pagination though does it?

Not with Webflow pagination. But MixitUp has it’s own pagination setup http://mixitup-webflow-tutorial.webflow.io/pagination

1 Like

Hey @parkerwest - Although MixitUp is great, I was able to accomplish what I was looking for without MixitUp by using categories and sorting the collection list with conditions.

I added the category field “Tags” to each category, which enabled me to sort my shop by either artist or category.

Result on site:

I realize you may be handling a larger amount of categories, but I wanted to mention this in case you are looking for a workaround on a smaller project.

Thank you so much for this. I have looked into this method is well which is a great way to sort content but I was looking for multi dimensionality similar to this. I appreciate this though, I will keep in mind for future projects!

@parkerwest - What you are looking for is not a current feature. So the only way to pull that off is with a third party solution and custom code. Algolia.com comes to mind.

1 Like

I’m actually looking into that right now funny enough. Thanks for the direction. I saw that https://swiftype.com has something similar that can be embedded, but I’m looking now to see if you can choose what they index on the site to create the filters and facets for.

Here’s a MixItUp multi-dimensional filter I created using a Webflow collection with sabanna’s brilliant tutorial.

I think you may have forgotten to include the link!

Doh!!!