How can I display the number of posts in a collection on my Webflow site?

Published on
September 22, 2023

To display the number of posts in a collection on your Webflow site, you can follow these steps:

  1. Log in to your Webflow account and open your project.
  2. Navigate to the page on which you want to display the number of posts in the collection.
  3. Drag and drop an HTML embed element onto the page where you want the number to appear. You can find the HTML embed element under the "Add" panel on the right-hand side.
  4. Double-click on the HTML embed element to open the code editor.
  5. In the code editor, you can use the Webflow CMS API to retrieve the number of items in the collection. Use the following code template:
<script>  document.addEventListener('DOMContentLoaded', async () => {    const response = await fetch('/api/v1/collections/{collectionId}', { headers: { 'Authorization': 'Bearer {access_token}' } });    const data = await response.json();    const numberOfPosts = data.items.length;    document.getElementById('postCount').textContent = numberOfPosts;  });</script>

Make sure to replace {collectionId} with the ID of your collection, and {access_token} with your Webflow CMS API access token. You can find your access token in the Project Settings > API Access section of your Webflow project.

  1. Save the changes and publish the site.

You can now view your site and see the number of posts in the collection displayed wherever you placed the HTML embed element. Remember to style the element using Webflow's designer to match your site's look and feel.

Example

Let's say you have a collection called "BlogPosts" and you want to display the number of posts on your homepage. You would follow the steps above, but replace {collectionId} with blogposts (the ID of your collection) and {access_token} with your Webflow CMS API access token. This code will retrieve the number of items in the "BlogPosts" collection and display it on your homepage.

SEO Optimized Keywords

  • Display the number of posts in a collection on Webflow
  • Webflow CMS API to get collection item count
  • How to show collection item count on Webflow site

Additional Questions

  1. How can I retrieve other data from a collection using the Webflow CMS API?
  2. Can I display the number of posts in a collection in a different format, such as a badge or a progress bar?
  3. Is it possible to automatically update the post count when new posts are added to the collection?