Count List Items

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.

LIST

I want to count the items from this

Collection List, Div Block, Section or List

See how it works

Add this attribute

Description

Name

fs-countitems-element

Value

list

The parent element whose children you want to count. The amount of items in this list will be displayed in the "value" attribute.

VALUE

I want this

Text Block, Paragraph or Headline

to display the amount of items of the list

See how it works

Add this attribute

Description

Name

fs-countitems-element

Value

value

A text element that displays the amount of children items in the list. The number amount will be displayed on this element.

I want to have more than one instance of Count List Items on the same page

See how it works

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.

Item counter does not change to “0” when collection list is empty, how can I fix this?

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”

How to add an attribute:

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

Implement in Webflow

Apply attributes to elements on the page

Collection List, Div Block, Section or List

Text Block, Paragraph or Headline

Working examples

Frequently Asked Questions

Developer documentation

Next time implement inside Webflow

Need more help? Use the Automated Support

Sign up for future releases!