How can I prevent duplicate items in a Webflow Collection List, even if they have the same name?
TL;DR
- Manage duplicates at the CMS level by ensuring unique slugs, adding a custom field for distinction, and creating editorial workflows to avoid duplicate names.
- Use conditional visibility with a manual "Show Item" flag to selectively display one of the duplicates.
- Filter duplicates on the front-end with custom JavaScript that identifies and hides repeated items after page load.
- Alternatively, pre-process data to remove duplicates before importing or use reference fields to consolidate linked content.
If you want to prevent duplicate items in a Webflow Collection List, even when items share the same name, you need to either manage it at the CMS level or filter duplicates using custom methods on the front-end.
1. Manage Duplicates at the CMS Level
- In Webflow, each CMS collection item must have a unique slug, even if Names can duplicate.
- Manually ensure that no duplicate names are entered by creating a workflow for content editors.
- You could create a custom field like "Unique Display Name" or "Title with Identifier" to differentiate similar entries.
2. Use Conditional Visibility to Hide Duplicates (Limited)
- Webflow's native Conditional Visibility can't detect duplicates dynamically out-of-the-box.
- You can mimic it by adding a custom flag field (e.g., "Show Item"), then manually only display one of the duplicate items.
3. Front-End Filtering with Custom JavaScript
- Webflow cannot automatically hide duplicates in a collection list natively.
- You can add a custom JavaScript snippet to the Page Settings → Footer Code to detect and hide duplicates on the client-side after page load.
- Example approach:
- Collect the text content of each item (e.g., by targeting a class like
.collection-item-name). - Keep track of names already seen.
- Hide or remove duplicate items dynamically after page load.
(You would use vanilla JavaScript, selecting elements by class and handling duplicates by comparing innerText values.)
4. Alternative Approaches
- Pre-processing Data: If your CMS is connected to external data (like Airtable or Make/Integromat), clean duplicates before pushing into Webflow.
- Use Multi-Reference or Reference Fields: Instead of separate duplicated items, use a single source item referenced by others.
Summary
Webflow itself doesn't prevent or filter duplicate names in a Collection List, but you can manage duplicates by manual CMS management, conditional visibility tricks, or implement custom JavaScript to filter duplicates on the front-end. For native solutions, you must create editorial rules or structure your data more uniquely.