How to add an attribute:

close icon
Hey! Give us some feedback here.
Visual

Count List Items

Count and display the number of items in a Webflow CMS Collection List.

Get Started

2,409,537

loads per month

Count List Items
Script
Documentation
Examples
FAQ
Step #1

Copy the Solution <script> and paste into the <head> of your page

copy icon
Copy Script
Scroll horizontally to see documentation
Step #2

Implement in Webflow

Apply attributes to elements on the page

Below is a list of elements and options that are used to create this Attributes functionality. Click any of them to see more details.

navigator arrow
LIST
I want to count the items from this

Collection List, Div Block, Section or List

See how it works
see webflow attributes
Add this attribute
Description
Name
fs-countitems-element
copy icon
Value
list
copy icon
The parent element whose children you want to count. The amount of items in this list will be displayed in the "value" attribute.
how to add count items list attribute
navigator arrow
VALUE
I want this

Text Block, Paragraph or Headline

to display the amount of items of the list
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-countitems-element
copy icon
Value
value
copy icon
A text element that displays the amount of children items in the list. The number amount will be displayed on this element.
how to add count items value attribute
navigator arrow
I want to have more than one instance of Count List Items on the same page
See how it works
see webflow attributes
Optional
This element is optional to add

You may need multiple instances of this Attribute!
All of our attributes follow the same structure for multiple instances!
‍
To use a second, third, or fourth instance on an attribute add -x at the end of the value of the element attribute. "x" must be a unique number. This unique number is how you link elements to instances. For example, list-3, trigger-3, and target-3 will all be connected to the same instance.

Example of this solution:

Attributes that must have instances
Second instance example
Third instance example
fs-countitems-element = "list"
fs-countitems-element = "list-2"
fs-countitems-element = "list-3"
fs-countitems-element = "value"
fs-countitems-element = "value-2"
fs-countitems-element = "value-3"

Frequently Asked Questions

Everything you need to know about this attributes solution.

Add a “0” to the paragraph, text block or headline where you want to display your count then set it as the “fs-countitems-element=value”

Developer documentation

Check the dev documentation
external link icon

Next time implement inside Webflow

Use Finsweet Extension
external link icon
Attention, you're browsing the Attributes Legacy (v1) documentation

Adopt the NEW Finsweet Attributes!

This version of Attributes — named Attributes Legacy — is now outdated ¹. For new developments, we highly recommend transitioning to the latest Finsweet Attributes to benefit from enhanced features and support.²

¹ Attributes Legacy will remain operational for existing projects, but please note that we have ceased offering support for this version.
² The new version of Finsweet Attributes and Attributes Legacy are incompatible, they can't be used on the same page. 

Subscribe

Sign up for future releases!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.