Skip to content

Recommend Gemeos to your network and earn a commission

Discover our referral program
Let’s talk?

CMS & Logic4 min read

How to Display Random CMS Items in Webflow

Learn how to display CMS items randomly in Webflow: JavaScript shuffle and a random order field.

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

MethodTrue randomnessReload required
Random number field + sortNo (fixed at publish time)Yes (republish)
JavaScript shuffle (this tutorial)Yes (on every load)No
Finsweet CMS Load + shuffleYesNo

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

Published on May 19, 2026

Sandro DA SILVA

Growth Marketer, Webflow expert, and jack-of-all-trades. Sandro handles commercial operations, ensures projects run smoothly, and addresses marketing-related issues (SEO, Tracking, Copywriting, etc).

You might be interested in these tutorials

Related tutorials

See all

You're going to working with us, guaranteed

Ready to launch your business?

get a quote

Let’s f*****G GO !!