AttRibutes
How it works?
What is this page about?

Attributes, by Finsweet, offers a free series of Solutions that provide essential features to improve your Webflow websites.

How Finsweet Attributes works

By using Finsweet Attributes, Webflow users can significantly extend the functionality of their websites, in a way that scales and that is easily maintainable. All without dealing with coding.

How to use Finsweet Attributes?

Finsweet Attributes is a no-code way to enhances Webflow websites by allowing users to add advanced functionalities—called Solutions—through custom HTML attributes. By simply adding specific attributes to HTML elements within the Webflow Designer, users can implement features like filtering, sorting, sliders, and more without writing custom JavaScript.

How it works

  1. Include the Finsweet Attributes Script: Add the Finsweet Attributes script to your Webflow site. This script enables the functionality of the attributes you will add. To do this, copy the script at the top of the documentation of each Solution, and paste it into your project's <head> custom code area.
  2. Apply Attributes to Elements: In the Webflow Designer, assign the appropriate fs- prefixed attributes to your HTML elements. For example, to enable filtering on a list, you might add fs-list-element="list" to the Collection List element and fs-list-field="category" to filter buttons. To do this, follow the instructions on each Solution documentation page.
  3. Publish Your Site: Finsweet Attributes operate on the live, published site. They do not function within Webflow’s Designer Preview mode yet, so it’s essential to publish your site to see the attributes in action.

Key Features

  • No-Code Implementation: Enhance your Webflow site without writing custom code.
  • Freedom of styling: using Attributes lets you benefit from everything Webflow has to offer. It's never in the way of your styling and ambitions.
  • Modular Design: Apply only the attributes you need for specific functionalities, keeping your site lightweight.
  • Wide Range of Solutions: Implement features like CMS filtering, sorting, sliders, tabs, and more.
  • Compatibility: Works with Webflow CMS and static content, offering flexibility in design and data management.
  • Community and Support: Access a wealth of tutorials, cloneable projects, and community support to assist with implementation.
  • It's free: it's free and will stay free. No payment, no subscription, nothing hidden, free. It's even Open Source so you can grab it, make it yours, host it where you want.
By making Attributes Open Source, we want to lead the way in developing quality software for Webflow that you can rely on, with security in mind too. It’s an open canvas into a software you know very well already: wether you use it to learn how we made it, or to start developing your own Solutions, we have decided to make Attributes limitless for you. Read about Attributes Open Source initiative.