Filtering by [attribute value] instead of [text content] in Attributes v2

Attributes
, ,
1

Hi Finsweet team,

I’m currently building a simple filter using Attributes v2.
My goal is to filter CMS items not by the visible text content of the element, but by the value of a dedicated attribute (for example, a slug stored in data-slug or fs-list-value).

The reason is reliability — in some projects, the page content is translated dynamically (e.g., with Weglot). If the filter relies on text element, translations can break the matching logic. In Attributes v1, I remember it was possible to achieve this by using attributes directly instead of reading the text node value.

Is there a recommended way to do the same in v2?
Can fs-list-field read its value from a custom attribute instead of text content, or is there a best practice for this scenario?

Thanks in advance for your guidance!

2

Hey @13ar.bass!

For filtering reliability with dynamic translations, you’re absolutely right that text content can break when using tools like Weglot. The good news is that Finsweet Attributes v2 supports filtering by attribute values instead of text content.

In Attributes v2, you can use the fs-list-value attribute to define filter values:

<input type="radio" name="category" fs-list-field="category" fs-list-value="design">
<label>Design</label> <!-- This text can be translated -->

For collection items, you can store filter values in custom data attributes:

<div class="collection-item" fs-list-field="category" data-slug="design-slug">
  <p>Visible content that gets translated</p>
</div>

Or use hidden elements with the raw CMS field values:

<div class="collection-item">
  <p>Your translated content here</p>
  <span style="display: none;" fs-list-field="category">design</span>
</div>

We recommend the fs-list-value approach since it decouples filtering logic from visible text, prevents translation tools from affecting functionality, and aligns with v2’s attribute-based filtering design.

Would you like to share your Webflow staging URL or HTML structure so we can provide more specific guidance? @Support-Luis or @Support-Pedro can also help if you need additional assistance with implementation.