How can I sort a CMS collection with multi-reference fields in Webflow? The option to sort seems to be missing.
TL;DR
- Create a separate CMS collection for items to multi-reference and link it using a Multi-Reference field.
- Use custom JavaScript and the Embed component or Custom Code field to manually sort DOM elements.
- Alternatively, use a custom text or number field dedicated to sorting and sort based on this field in CMS settings.
Sorting a CMS collection with multi-reference fields in Webflow can indeed be tricky, as the platform doesn’t offer direct support for such sorting. Here’s a way to work around this limitation:
1. Use Collection Lists to Reference Multi-Reference Fields
- Create a separate CMS collection that contains the items you wish to multi-reference.
- Link this secondary collection to your original using a Multi-Reference field.
2. Utilize Custom Code for Manual Sorting
- If native sorting doesn’t meet your needs, consider using custom JavaScript to manipulate the DOM.
- Add the custom code using the Embed component in the Designer or using the Custom Code field in Project Settings.
- Sort items based on your criteria within the code logic.
3. Alternative Method Using Separate Custom Sort Fields
- Instead of multi-referencing, create a custom text or number field dedicated to sorting.
- Populate this field in such a way that it represents the desired order (e.g., using a prefix or index).
- Sort using this dedicated field in the CMS collection list settings in Webflow.
Summary
Webflow doesn’t support sorting CMS collections directly using multi-reference fields. Instead, consider using custom JavaScript to sort the DOM manually or creating a dedicated custom field for sorting. Implementing these steps can help you achieve a similar effect as sorting multi-reference fields.
