Comment lier deux collections CMS dans Webflow ?

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment lier deux collections CMS dans Webflow pour créer des relations entre vos contenus.

1. Créez le champ Reference dans votre CMS

Dans votre collection source (ex: Articles), ajoutez un champ de type Reference. Sélectionnez la collection cible (ex: Auteurs). Pour lier plusieurs items, utilisez Multi-Reference. Renseignez les valeurs dans chaque item CMS.

2. Affichez les données de la collection liée

Dans votre Collection Template page ou votre Collection List, ajoutez un élément texte ou image. Dans le panneau Settings, connectez-le via Get data from > votre champ Reference > le champ de la collection liée (ex: Auteur > Nom).

3. Affichez tous les items d'une collection liée

Pour afficher plusieurs items liés (via Multi-Reference), ajoutez une Collection List dans votre template. Dans les paramètres de la liste, sélectionnez la source [Votre champ Multi-Reference]. Vous pouvez alors accéder à tous les champs de chaque item lié.

4. Limitation des références imbriquées

Webflow ne supporte pas les références imbriquées à plus d'un niveau : vous ne pouvez pas accéder à la référence d'une référence (ex: Article → Auteur → Agence). Pour contourner cette limite, dénormalisez vos données en dupliquant les champs nécessaires dans la collection principale.

Conclusion

Les relations entre collections permettent de structurer des données complexes. Cas d'usage :

• Articles liés à des auteurs et des catégories
• Produits liés à des marques et des collections
• Offres d'emploi liées à des entreprises et des villes