Comment dépasser la limite de 100 items dans une collection CMS Webflow ?

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre les solutions pour dépasser la limite de 100 items affichables dans une collection CMS Webflow.

Comprendre la limite

Webflow limite l'affichage des collections CMS à 100 items par Collection List. Ce n'est pas une limite de stockage (vous pouvez stocker des milliers d'items) mais une limite d'affichage par composant sur la page.

Solution 1 : Pagination native Webflow

Dans les paramètres de votre Collection List, activez la Pagination et réglez le nombre d'items par page. Webflow génère automatiquement les contrôles Précédent/Suivant. Idéal pour les blogs et les catalogues avec navigation paginée.

Solution 2 : Finsweet CMS Load (recommandé)

Finsweet CMS Load charge les items au scroll ou au clic sur un bouton "Charger plus", sans rechargement de page. Ajoutez le script dans le head :

<script src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsload@1/cmsload.js" defer>script>

Ajoutez ensuite les attributs sur vos éléments :

• fs-cmsload-element="list" sur votre Collection List Wrapper
• fs-cmsload-element="button" sur votre bouton "Charger plus"
• fs-cmsload-mode="load-more" sur votre Collection List Wrapper

Solution 3 : Plusieurs Collection Lists sur la même page

Ajoutez plusieurs Collection Lists du même CMS sur la même page, avec des filtres de date ou d'ID différents pour qu'elles ne se chevauchent pas. Technique simple mais limitée à quelques centaines d'items.

Conclusion

Pour 90% des cas, Finsweet CMS Load est la solution la plus simple et la plus élégante. Cas d'usage :

• Blog avec plus de 100 articles
• Catalogue produit avec plusieurs centaines de références
• Répertoire de membres ou de partenaires