Total Number of CMS Items in Webflow

Unfortunately displaying the total count of items in a referenced CMS collection is not a straightforward task in Webflow. However utilizing total referenced item count within Webflow CMS collections is something we used quite often and something we utilize ourselves here at Webflow. With the power of Flowmonks Airtable to Webflow real-time sync you can now create total item counts for referenced items for your Webflow collections. Here are a few examples of :

• Real-time item counts for on-page text
• Dynamic SEO titles and SEO descriptions
• Native filtering & sorting with Webflow collection elements

Real-time CMS collection item counts for referenced collections

Real-time CMS collection item counts are great for displaying the total number of items that referenced category pages have within your Webflow CMS collections. For example, let's say you built a restaurant directory for local restaurants or even restaurants in your state. Each restaurant has a variety of single, or multi referenced collections for categories such as cuisine, location, price and so forth. Each of these category collection pages can have specific landing pages created for each specific category, let's use cuisine as an example. For the cuisine category each page could utilize text to signify the number of restaurants within that cuisine type in the design and on the page. You can also use this to create dynamic SEO titles and SEO descriptions for each category page. The heading on the page could showcase 15 Mexican Restaurants, or the total number of items within the Mexican restaurant category.

Dynamic SEO titles and SEO descriptions

Using the example above you now have the ability to create truly dynamic SEO titles and SEO descriptions that utilize the total number of items in that category to create even better SEO meta descriptions. These dynamic titles and descriptions are updated in real-time to showcase the true number of items that each category collection has in it. This helps users on Google know what they can expect from each category when visiting Google and coming across your websites search result. For example, let's say that the Mexican restaurant cuisine category has 25 restaurants within it, adding the total number of items you can now have your SEO titles and SEO descriptions include that number of items. All of which is updated in real time, if you add or remove a restaurant from that category that pages SEO meta information will also update in real time.

Native filtering & sorting with Webflow collection elements

Webflow's native filtering and sorting functionality is great for CMS collection elements. The biggest problem is that it's limited in what information you can sort and filter by. Adding in real-time category level numerical attributes thanks to Flowmonk's real-time Airtable and Webflow syncing unlocks a new potential for better sorting & filtering using Webflow's native capabilities. We can now push the logic and formulas to Airtable to perform these category item counts. This means you can now sort collections by the total number of items in a collection which in turn allows you to build better pages and experiences for your users. For example, let's say you have a restaurant cuisine category for Laotian food but there's only one restaurant in this category. With total collection item counts you can now filter those out from not displaying on your primary restaurant pages that showcases cuisine types. On the other hand you could sort those categories by the categories with the most items in it. Again, this is entirely dynamic which means as you add or remove restaurants the total number of items in those categories will change and so will the order based on your sorting or filtering.

How to create total item count for categories and other referenced items in Webflow?

As mentioned we need to utilize Airtable to create the total item count that we'll then use Flowmonk Airtable and Webflow sync to sync back to Webflow. Dive into Airtable and create a new field, the field type will be count. The count field relies on linked records, which in Webflow terminology is referenced items. In our example we are within our cuisine category Airtable table and we'll select restaurants in the Count field type. Below is a screenshot:

This will produce a new field in Airtable that will show the total number of items of that referenced collection/linked record. You can now use this numerical value anywhere on your site. Here is an example of how Yelp utilizes the total item count for a category page.

A good example of a programmatic SEO page that was generated by dynamic total count elements, which helps with their SEO rankings as these pages are laser focused and targeted towards Mediterranean in San Francisco, California. With Airtable we can now utilize that total count field and a formula to generate better H tags and SEO meta information that Google will appreciate more than standard, duplicate cookie cutter styles pages.

Here's how you can put it all together to create a similar text field that's now accessible within your Webflow designer.

As you can see combining Airtable and Webflow via real-time syncing allows you to build highly customizable attributes that you can then utilize within Webflow's designer, Webflow's native filtering and sorting and even third party search and filtering tools. It unlocks additional sorting and filtering options not capable with Webflow's standard capabilities.