How to Display Random CMS Items in Webflow

In this tutorial, Sandro, co-founder of the Gemeos Webflow agency, shows you how to display CMS items randomly in Webflow.

Method 1: JavaScript shuffle on load

This method shuffles the items already displayed in the DOM on every page load. Add a cms-list class to your Collection List Wrapper, then add this script to the body:

function shuffleList(list) {
  var items = Array.from(list.children);
  items.sort(function() { return Math.random() - 0.5; });
  items.forEach(function(item) { list.appendChild(item); });
}
document.addEventListener('DOMContentLoaded', function() {
  var list = document.querySelector('.cms-list .w-dyn-items');
  if (list) shuffleList(list);
});

Method 2: Random order field in the CMS

Add a Number field called "Order" to your collection. Fill it with random values (1 to 1000). Sort your Collection List by this field in ascending order. The result will be "random" but fixed until the next republish. Simple and no code required.

3. Limit the number of items displayed

To display only 3 random items out of 50, set the Collection List limit to 3 in Webflow. The JavaScript shuffle will mix the items before Webflow applies the limit: you'll still see 3 different items on every reload.

Conclusion

Random display improves content discovery. Use cases:

• "Suggested articles" section at the bottom of a blog post
• Client testimonials displayed in different ways
• Highlighting different products on each visit