Finsweet

Finsweet Attributes adds functionality to the Webflow CMS using data attributes: filtering, sorting, searching, load-more on scroll, combining lists, and displaying more than one hundred items in a single list. No custom code required, directly in the Designer. We use it for product finders, portfolios, and blogs, and we know the pitfalls.

What Finsweet Attributes is

A set of scripts from Finsweet, a Webflow agency, that you add to a page. You then apply attributes to elements: this is the list, this is a filter, this is the search field. The scripts do the rest. It is free, widely used, and well-documented.

What we use it for

Product finders with multiple filters, such as the engine finder for Mitsubishi Turbochargers & Engines. Portfolio overviews with category filters. Blogs with search and load-on-scroll functionality. Lists that exceed the Webflow limit of one hundred items. Anywhere a CMS list needs to do more than just display content.

Things to watch out for

Different versions of Finsweet can conflict with each other, and such conflicts sometimes only appear on the live site rather than in the Designer. They can be tricky to find, but are quick to fix if you know where to look. Furthermore, everything happens in the browser, so it becomes slow with thousands of items. In those cases, we move the filtering to the server using Xano or Next.js.

How it fits into our stack

On Webflowsites, alongside GSAP for animation. With page transitions using Barba.js , we re-initialize Finsweet for every new page.

When not to use it

For projects with more than a few hundred items, filters requiring data from external sources, or portals with a login, we choose Wized or Next.js.