Count List Items

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

Get Started

Step #1

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

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.

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"