How to Use Reference Fields in Webflow CMS

Step 1: Create Your Collections

Start by setting up your collections. For instance, if you’re building a blog site, you might have collections for “Blog Posts” and “Authors”.

- Open Webflow Designer and access the CMS panel from the left sidebar.
- Click “New Collection” to create a collection named "Authors".
- Add necessary fields like Name, Bio, Profile Picture, then save the collection.
- Repeat this to create a "Blog Posts" collection, adding fields like Title, Content, and Featured Image.

Step 2: Adding a Reference Field

To link Blog Posts to Authors, add a reference field.

- Open the "Blog Posts" collection and click “Add Field”.
- Select the "Reference" field type.
- Name the field, for example, "Author", for clarity.
- In "Connect to", select the "Authors" collection to link blog posts to authors.
- Decide if this should be a single or multiple references. Typically, you'd choose single for blog posts.
- Save the reference field.

Step 3: Populating the Reference Field

Next, populate the reference field with data.

- Open the "Blog Posts" collection, edit an existing post, or create a new one.
- Locate the "Author" field.
- Click the field to see a dropdown of available authors from the "Authors" collection.
- Choose an author for the blog post.
- Save your changes to update the post with the linked author.

Step 4: Displaying the Reference Field in Your Design

Now, display the linked author information on the site.

- Open a page in Webflow Designer where the blog posts are displayed, like a blog page or dynamic template.
- If using a collection list for blog posts, select that element.
- Inside the collection item, add a text block or similar where the author’s name will appear.
- With the text block selected, in the settings panel, choose "Get text from" and select the "Author" reference field.
- To further customize, add elements like the profile picture and bio by referencing additional fields from the Authors collection.

Step 5: Publishing and Testing

Once designed, publish and test your settings.

- Click “Publish” in the top right corner of the Webflow Designer.
- Visit your website and navigate to the blog posts page to view the changes.
- Ensure the author’s information displays correctly.
- Test linking other posts to different authors by editing CMS data as needed.

Conclusion

Reference fields in Webflow CMS are powerful for connecting various content types, improving your site’s organization and functionality. By following these steps, you can manage and display relationships between collections efficiently, enhancing the user experience. Use these features to maximize your site's cohesiveness and ease of content management.