CMS Attribute Troubleshooting in Filter Blog List

Attributes
1

Description

Hello, I am using the tesla cloneable cms collection and trying to set it up on a blog page.

I am not sure if i set a few attributes up correctly from this how-to article: List Filter - Filter CMS Collection Lists in Webflow using Attributes

I inserted the header tag
The page section “filter_form” comes with the attribute fs=cmsfilter-element=”filters” when it is downloaded I thikn - but that is an attribute.
I have the content collection list with fs-list-element=”list”
For the checkbox under therapeutic area i added two attributes: fs-list-field=”Therapeutic-Area” and "fs-list-value=”Therapeutic-Area”
the Therapeutic area button under the blog i added the attribute fs-list-field=”Therapeutic-Area”

One other attribute i was unsure of…i was supposed to add the attribute to the list element housing the check boxes and text, but i aded it to “Filter_options” in the left side navigator. It would not allow me to drag a list element into that section, it said i cant add a list element to a list element. Attribute added is “fs-list-element=”filters”

Expected Behavior

Clicking a checkbox will only show the blog with the added tag or therapeutic area

Actual Behavior

no matter which check box is selected, all blogs are showing as populated

Video/Screenshots

Required: Please provide a short screen recording showing the issue

2

Hey @charlespoloka!

You are on the right track

The custom head code is correct

<!-- Finsweet Attributes -->
<script async type="module"
src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"
fs-list
></script>

The collection list has the correct attribute

fs-list-element="list"


The filter_column inside the filter_grid should have the attribute fs-list-element="filters"

Please note that this filter_column has to be a Webflow Form element

You could also move it inside a Form element then move the attribute fs-list-element="filters" to the Form


The checkboxes should each have a fs-list-field="identifier" & fs-list-value="value"

For instance, the Pet Health checkbox should for instance have the attributes

fs-list-field="pet" & fs-list-value="Pet Health"

Then that cms-button that currently has fs-list-field="Therapeutic-Area" should show fs-list-field="pet"


You can checkout a simple setup over here
A more complex filters setup is here

And here’s the doc link once again

Could you share your staging URL so we can verify the setup once you’ve made these changes? @Support-Luis, @Support-Pedro or @jesse.muiruri can help if you need additional assistance.

3

Hello Jesse, thank you for the tips.

I have a question - I updated the filter_column to have the attribute fs-list-element=“filters” - but i am unable to add it as a form. When i try to click a form from the search, it gives an error saying form element blocks can not be nested within eachother. (see video below)
In the video how-to, i did notice that I think this entire section is built within a form wrapper (shown in video), so does that automatically make the attribute properly added within a form element?

For the checkbox section with fs-list-field=“identifier” and fs-list-value=“value”
I see that i need to click just the checkbox itself and add both of those attributes…
And then within the blog section, i click the “Pet Health” button and i add fs-list-field=“pet”?

However, when i add an attribute to a single checkbox within the list, it applies that attribute to every checkbox. The same with the blog section button - if i add a attribute to the “Pet Health” button, it applies the same attribute to the “compounding Health” button in the blog below it… meaning i can not individually add the correct secondary attribute to each checkbox in the left column or button in the blog section.

How do i differentiate and only add an attribute to a specific checkbox or item?

(Video below explaining and showing)

4

as a reference of my issue - in this youtube video from FinSweet, at 4 minutes, the demo shows the person clicking the left side checkbox and adding the attribute “black” and then when he clicks the checkbox below it, it automatically assigns the proper text value and attribute to each button, but mine is assigning the same attribute to every checkbox in the list:

5

Hey @charlespoloka

Just to clarify, in the demo video you shared, the values were pre-added before the recording, they did not get automatically added after adding fs-list-value="black" to the very first one

6

You also need to make sure that fs-list-element="filters" is added to the form containing the filters

In the video you shared of your setup, the filter form is at the bottom of the page & contains no filters within it

Could you please share your staging link url so I can check it out, you can share via DM if impossible to share here

7

This is from the docs here

image
image1908×882 69.7 KB

8

It is still not working @jesse.muiruri

Please ignore my above messages and go off of this as the source of truth:

I am sure i have the attributes added correctly. Here is a list of what attributes i added. please view the video for a recording of each section, attribute, and which cms field it is pulling from.

Please watch before responding:

Here is the url of the published staging page: blog-cms-text

> Add fs-list-element “list” to the cms section that will be filtered: DONE

> Add filters to the webflow form element that contain allfilter UI elements: DONE
fs-list-element=“filters”
Note: this was added to the DIV called Filter_column in the attached screenshot/video. I also tried adding it to the div container holding only the Therapeutic Area collection, but both do not work properly.

> Add field identifier. fs-list-field = area (i am using area” as the custom idenfitier)
note: i added this to the checkbox itself, not to the block or the word “Pet Health” - and it applied this attribute to ALL checkboxes in the section CMS list. Is this correct?

> Add text identifier to the corresponding CMS field we want to filter. For this, i clicked the text button “Pet Health” showing in the blog area (it is the cms collction pulling the text field from the blog cms) and i added fs-list-field=“area”

> Checkbox or radio button value: i am using checkboxes so i have to add this. This is where i get the issue.
i copy fs-list-value, i select the radio button, i go to add the attribute and to add “pet” which corresponds to pets. However, it applies to every button in the field, all cms items. It does not let me add separately like in the demo you sent me, “black, white, gray…etc”
Solution to this is to instead bind the name field to the cms pulling the “name” cms collection.

Let me know if i can pay for a screen share session to get it sorted, i think i am missing something.

Thank you for your time.

9

Hi @charlespoloka

So I got to check out the site through & through

First of all, the attribute fs-list-element="list" is placed on 2 elements, the .w-dyn-list which is the CollectionList & the .w-dyn-items

It should only be on the CollectionList

Second, the filters element with the attribute fs-list-element="filters" needs to be a webflow form element, right now it’s not

You mentioned earlier that webflow won’t allow you to add a form element at the filters section

I checked it out and it turns out the reason for this is because the whole section encapsulating both the filters & the CollectionList is a webflow form element

Now that’s where it gets tricky since you will have to move everything from inside to the form element to a section or div

Shouldn’t be hard since you can create drop a section/div next to the form element then move everything inside the form to the new section

I presume you needed to use a form as the parent so as to be able to add form elements such as search box & checkboxes to the filters section

The good news is that the filters section already needs to be a form element, as shown in the attached screenshot below, so only make sure the filters are inside of the form element not the whole page’s content

The checkboxes fs-list-field & fs-list-value are correct

image
image1908×882 68.5 KB

10

image
image1908×882 212 KB

11

Happy to jump on a call when you are ready

& no you don’t need to pay a dime, just let me know when you’re ready

Thanks

1 Like
12

Hi @jesse.muiruri - i truly appreciate your time and assistance in helping me to fix this. Just as a quick FYI on how i fixed it - I took your advice and i created a new div section, made two columns, and added a stand-alone div to each column. I then added a form element to the left column and dragged every item into the form from column-left section that I cloned, and moved everything from column right into a new div as well.

NOTE: The download from Finsweet, the cloneable, possibly has an incorrect setup.
In the screenshots and videos I sent you, i had only edited the attributes, i had not made any changes to column structure. From the download, the attribute wasn’t adding properly since the entire section was within a form element.

But this is fixed and the checkboxes work properly now!

I am leaving this post “open” for the moment - i need to go through and add search functionality, clear function, and sorting fo the Category. Here is a live link to the new URL i tested on.

Thank you again so much for your help! I hope to have this all finished today and ill close the ticket once i finish.

13

@jesse.muiruri I have everything almost finished, just one final question - thank you again for your help.

Here is a link to the active page:

Here is a link to a short video describing my issue and attempting a troubleshoot live so you can see what i mean: https://drive.google.com/file/d/1e93212G3wk_5ntRRrDgJQa3H1KLH3HQU/view?usp=drive_link

Right now, the checkboxes all work correctly to sort filters.
I also added the fs-list-element=”facet-count” filter added to a new blank text div. So when someone opens the blog page, it tells how many total count are applied to each Category or Therapeutic Area, and once they click a checkbox it shows the total amount under the column.

My issue:
I can not get the total count of items populating to show on the same line item as the checkbox and category/area.

Current Structure is:
Collection item
-Checkbox Field
– Checkbox
– Checkbox Label
– facet-count-div

If i change the checkbox field to flex, it pulls everything to one line item, but the spacing is off. I cant figure out how to keep it all on one line, but make the Checkbox and the Checkbox Label stay left-justify, and the facet counter show right-justify

Thank you for your time

14

Hi @charlespoloka

Checking this out right now

15

Hi @charlespoloka

Could you move the div with the attribute fs-list-element="facet-count" out of the checkbox

Then add display:flex to their parent which in this case is the div with the class div-block-72

You can then play around with the Gap values for spacing

image
image249×232 6.85 KB

1 Like
16

@jesse.muiruri If i take the div block with the fs-list-element facet count and drag it out of the parent checkbox field div, it no longer keeps track of the count. When i pull it outside and publish, the counts disappear.

Also I partially figured out how to make the total facet count show on the same line through negative margin. But the lines with active items vs none showing (50% opacity) are no longer spaced the same. (see video + screenshot)
(link to active page) blog-cms-text Copy feb 16th
(link to video) https://drive.google.com/file/d/1Wy6GEUJdIxGYhMl6XsQKpUIbL1Bjc2wj/view?usp=drive_link

Screenshot 2026-02-19 at 3.48.00 PM
Screenshot 2026-02-19 at 3.48.00 PM1734×779 139 KB

One other question - I have 43 active blogs currently. I have this set up to only load 10 items on page load. The facet count for some reason is only counting the blogs currently showing on the page. is there any way to count against all active blogs, without loading a long list of all 43 on to the page? If possible i would like to keep the 10 loading at a time with a “next” icon to load the next 10, similar to how the cloneable is set up.
Otherwise it will be a never-ending scroll of every blog post before reaching the footer, and it will have to load every preview image and might reduce load speed.
(screenshot attached)

Screenshot 2026-02-19 at 3.45.48 PM
Screenshot 2026-02-19 at 3.45.48 PM1203×1078 238 KB

17

Hey @charlespoloka

Still looking into this

18

As for the other question

One other question - I have 43 active blogs currently. I have this set up to only load 10 items on page load. The facet count for some reason is only counting the blogs currently showing on the page. is there any way to count against all active blogs, without loading a long list of all 43 on to the page? If possible i would like to keep the 10 loading at a time with a “next” icon to load the next 10, similar to how the cloneable is set up.

Could you please make a new post for it, that way the whole team gets to see it

Thanks

19

@jesse.muiruri

Here is the link:

20

Hi @charlespoloka

The facet count for some reason is only counting the blogs currently showing on the page. is there any way to count against all active blogs, without loading a long list of all 43 on to the page?

I would recommend using pagination as shown on the docs

This will load all blogs on the page, show only the number you specify (10 in this case), then hide the rest behind pages that can be accessed through prev & next buttons

image
image1908×882 66.9 KB

image
image1908×882 94.4 KB