When using a Multi-Reference field in a CMS Template Page in Webflow, you can’t directly pull its content like a plain text field — you need to use a nested Collection List to render its items.
1. Understand Multi-Reference Behavior
- A Multi-Reference field stores a list of linked CMS items (from another Collection), not plain text values.
- These linked items must be accessed using a Collection List because it's essentially a one-to-many relationship.
2. Add a Collection List to Display the Multi-Reference
- Select your CMS Template Page (template for the collection you’re using).
- Inside a section or container, add a Collection List to the page.
- In the Collection List Settings panel, choose the Multi-Reference field as the data source.
3. Bind Element Inside Collection List
- Inside the Collection List, add a Text Block, Heading, or another element.
- Bind it to a field (e.g., Name, Title) from the referenced collection.
- You can style or format this list just like any other collection content.
4. Troubleshooting Missing Items
- Make sure the referenced items being pulled into the Multi-Reference field have content and are published.
- Ensure you don't have any filters on the Collection List that would exclude the expected items.
5. Optional: Display as Comma-Separated List
Webflow doesn’t natively support comma-separated lists for Multi-Reference fields. However, you can:
- Use Flexbox or Grid to layout items horizontally.
- Add a small Divider Textblock (with a comma) between items using CSS or manually in the Designer.
- Use custom JavaScript (via Embed element) to join values with commas — this requires custom code and won’t work in the Designer preview.
Summary
To display Multi-Reference field names in a CMS Template page, use a Collection List inside the template and bind text elements to fields (like “Name”) within the referenced collection. Direct field binding won’t work because it's a one-to-many relationship.