Story: Webflow eCommerce website
I am creating a Webflow eCommerce website for client. A client chose a template and informed it. So, I can just focus on development.
I got some requests. One of them is the filter. I assume that this is a quite standard function on an eCommerce website. I should respond to the client’s request, but I could not find the function on Webflow. No-code tools, but Webflow sometimes requires to use JS. I know that.
When I faced a problem, someone already searched for a solution and wrote a blog, or YouTube. I don’t worry about what I cannot do.
What is Webflow?
🌎 Webflow: The Web Development Platform Of The Future
Webflow is created for a designer who is not good at programming. Once you master Webflow, you can develop an interactive website yourself.
How to add dynamic filtering and sorting to your Webflow websites by Webflow Blog
©Webflow
As I said, what I think is already someone searched. I found a blog on Webflow. I could find a JS on the blog. If it is static content, no one faces issues. Because I can control each element and class easily. If it is dynamic content, I cannot control easy elements. It generated a CMS collection. That’s why it is not a simple.
MixItUp by KUNKA LABS
©KunkaLabs Ltd
I like interaction. MixItUp does not load items each time when I click the button, only items react. This is the baseline.
If you want to use MixItUp for the client’s project, you need to pay for a license. It is not expensive, but I may look for an alternative.
©Webflow blog: MixitUp on the CMS-powered blog by Anna Sabatini
CMS Filter by Finsweet
©Finsweet
I know Finsweet provides Client-First. This filter requires to use Client-First, Upworker said. I have to use a template for this client project. If upwoker is true, this method does not work for a Webflow template project.
Native Webflow Filtering (No Code)
©Timothy Ricks
Timothy Ricks is the master of Webflow. He knows JS as well. This method is okay, but I don’t prefer loading each time. Do you agree with it? You can see the same filter usage on Webflow website above. I am sure that he knows the other filtering methods. This video is just for everyone.
Live filtering with multi-reference fields — Jetboost Tutorial
©pixelgeek
Pixelgeek is working at Webflow and in charge of YouTube engagement with a Webflow community. He also knows code well. I did not know Jetboost. The interaction looks okay. I don’t need mulch filtering for the current project. The implementation is maybe simpler that this video.
I checked the pricing and charging monthly does not work. Jetboost.io is free of charge for webflow.io domain. It means personal use, basically. Anyway, The monthly charge method does not work. A very successful eCommerce website may be possible to use Jetboost for user experience, but I don’t know their target audience clearly.
Conclusion: So many options
I was sure that there is a solution, but I did not know how many choices the No-code designer has. For static filtering, please follow the Webflow blog. It is simple. For dynamic CMS filtering, Please try the no-code method even if you don’t mind loading. If you don’t want to, You can go MixItUp. I don’t have a choice of Jetboost. The monthly payment for filtering does not work. If I need custom filtering, I will hire someone.
