Aller au contenu

Recommandez Gemeos à votre réseau et touchez une commission

Découvrir notre système d’apport d’affaires
On en discute ?

CMS & Logique4 min lecture

Comment afficher des items CMS aléatoires dans Webflow ?

Apprenez à afficher des items CMS de façon aléatoire dans Webflow : JavaScript shuffle et champ ordre aléatoire.

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment afficher des items CMS de façon aléatoire dans Webflow.

MéthodeAléatoire réelRechargement nécessaire
Champ nombre aléatoire + triNon (fixé à la publication)Oui (republication)
JavaScript shuffle (ce tutoriel)Oui (à chaque chargement)Non
Finsweet CMS Load + shuffleOuiNon

Méthode 1 : JavaScript shuffle au chargement

Cette méthode mélange les items déjà affichés dans le DOM à chaque chargement de page. Ajoutez une classe cms-list à votre Collection List Wrapper, puis ce script dans le 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);
});

Méthode 2 : Champ ordre aléatoire dans le CMS

Ajoutez un champ Nombre "Ordre" dans votre collection. Renseignez des valeurs aléatoires (1 à 1000). Triez votre Collection List par ce champ de façon croissante. L'ordre sera "aléatoire" mais fixe jusqu'à la prochaine republication. Simple et sans code.

3. Limitez le nombre d'items affichés

Pour afficher uniquement 3 items aléatoires parmi 50, réglez la limite de la Collection List à 3 dans Webflow. Le shuffle JavaScript mélangera les items avant que Webflow n'applique la limite : vous verrez toujours 3 items différents à chaque rechargement.

Conclusion

L'affichage aléatoire améliore la découverte de contenu. Cas d'usage :

  • Section "Articles suggérés" en bas d'un article de blog
  • Témoignages clients affichés de façon variée
  • Mise en avant de produits différents à chaque visite

Publié le 19 mai 2026

Sandro DA SILVA

Growth Marketer, expert Webflow et touche à tout. Sandro s'occupe des opérations commerciale, veille au bon déroulement des projets et s’occupe des problématiques liées au marketing (SEO, Tracking, Copywriting, etc)

Ces tutoriels pourraient vous intéresser

Tutoriels similaires

Voir tout

Vous allez notre collaboration, c’est garanti

Prêt à faire décoller votre activité ?

demander un devis

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