Advanced CMS Design

Minimize Your Use of Multi-Refs

No items found.
Overview
Crucial Design Principles
Know Your Limits, and Design with them in Mind
201
Minimize Your Use of Multi-Refs
202
Crucial Design Principles
CMS Relationships
202
Minimize Your Use of Collection Lists
203
Minimize Your Use of Scripts
204
Manageability Matters
205
Design Approach
Design Approach
300
Prototyping
402
Demo Project
Example Project - IMDB
500
Phase 1 - Design
501
Phase 2 - Prototyping
502
Phase 3 - Build
503
Review our Project Results
505
Further refinements
506
Resources
How to structure your Webflow CMS Collections
901
The Xref Pattern for Two-Way References
902
Advanced
Webflow CMS Technical Deep Dive
951
No items found.

Multi-ref fields are a compelling feature, but they are hugely limited and difficult to work with.

They have administrative limits;

  • The ordering of these fields is fixed, so you must add items in the specific sequence you want them to appear.
  • You cannot re-order items. You must delete items from the end, to insert your needed item, and then re-add those items.

And they have presentation limits;

  • When you present content from a multi-ref field in a nested Collection List, you are limited to 5 items. Yes, five.
  • Those 5 cannot be filtered, or sorted- so e.g. trying to display events at a venue falls apart fast.
  • Multi-refs cannot be accessed through ref field connections. If [A] has a ref to [B] and [B] has a multi-ref to [C], then a collection list bound to [A] cannot nest a collection list bound to [B]'s multi-ref.

When to avoid using multi-refs

Signs you're using them wrong

  • If your multi-ref fields contain 10+ items
  • If you're struggling with the inability to reorder your multi-refs
  • If you feel frustrated that there is a limit of 5 in the nested Collection List, and you're searching for script hacks to overcome this

You're probably trying to use them in a way they were not intended, and your world will be full of frustration.

So what are multi-refs good for then?

Yes they do actually have valuable uses.

There are two main use cases where I find multi-refs valuable;

USE CASE #1 - Added non-essential info

Present a non-essential attribute of your items, like tags.

EXAMPLE - I have a Blog, and each Article has tags like #tech #webflow and #figma. I want each of these to be clickable, so that I can display e.g. all articles about #webflow.

I'm not going to have a ton of tags, and I don't need to show them all in the main article list page, where they'd be displayed in a nested Collection List.

On the Article collection page, I can easily show all of them, because there the tags are in a regular Collection List rather than a nested one.

This is a good use case for a multi-ref field.

USE CASE #2 - Sample sets

Display a selected sampling of related items, as a convenience.

EXAMPLE - I have a list of Products and I want to show a few of the most popular Variants. On the main catalog page, I want to list my 100 top product, each with up to 5 popular variants.

This works because again, the limit of 5 is fine, and next to those 5, I will place a link titled "See all variants".

Tips

Splitting Multi-Refs

In an [A] -> [B] => [C] setup, a CL bound to [A] cannot access [C].

A small part of this access limitation can be overcome by splitting the multi-ref field into a primary single-ref and other multi-refs field.

  • Primary ref would be a ref from [B] -> [C] that represents e.g. the most important category.
  • Other refs would be a multi-ref from [B] => [C] that represents additional categories.

Advantages;

  • This approach allows you to access some of the data you need to display in a "most important" or "sample of" kind of way.
  • It works great with tools like FS filter.
  • It's easy to manage

Disadvantages;

  • Need to educate clients on the split ( no duplicates )
  • This setup consumes two ref fields of your 5 ( CMS plan ) or 10 ( Business plan ) limit.

Table of Contents
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.