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.
https://mixitup-webflow-tutorial.webflow.io/multi-dimensional-filtering-for-cms-content

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 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.

4 Likes

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!

1 Like

Doh!!!

2 Likes

Very nice and beautiful site and many interesting segments.
Makes me want to buy some LED lamps :smiley:

1 Like

Thanks Jan, much appreciated.

@AmandaR Did you manage to do that for Products in an ecommerce site? Or just a collection?
If so could you go more in details of what needs to be done to make this work?

I’m also looking to have a way to make this happen without using external plugins.

Thank you!

Hey @John_T - I managed to do this for products on an Ecommerce site, yes.

In a sense, I categorized the categories … here is what I did:

  1. I added “Tags” as a field for all of my categories. (Under “Settings” of eCommerce categories.)

  2. I then tagged my categories with the appropriate tags. So, in my case, I only had two tags - artist or item.

  3. When you setup a link on your page that you want to filter the items, you use the link settings and setup a condition.

I hope this helps! Let me know if you have any questions or get stuck.

Thank you so much for your response and for taking the time to explain!
That sounds simple but I can’t seem to quite make it work.

• So I have 3 categories: Soft/Medium/Strong
• For each I created a plain text field called “tag”
• Named each tag field after the category name

Not sure what to do next? Isn’t there supposed to be some code somewhere to filter? Or is this opening a new page?

Hey John, so you got those steps right. Sorry, I think I skipped a step … I made this page a while ago.

Step 2.5. On the page you would like the list - add a collection list wrapper, and you can source the collection list & items from your Ecommerce shop.
Screen Shot 2020-03-21 at 7.48.43 AM

Next, you would add the list and the links by creating a collection list. This is where you would follow step 3 from my last post and add the link conditions for the links.

This is my page framework if that helps:
Screen Shot 2020-03-21 at 7.47.14 AM