How can I prevent duplicate items in a Webflow Collection List, even if they have the same name?
TL;DR
- Use filters, sorting, and limits in Webflow Collection Lists to display only one representative item from duplicates.
- Add custom CMS fields (e.g., Boolean or unique code) to tag and filter unique items; use JavaScript for advanced duplicate handling if needed.
To prevent duplicate items from appearing in a Webflow Collection List, even if they share the same name, you’ll need to manage filtering or sorting rules to ensure uniqueness in how items are displayed.
1. Understand Webflow’s Collection Limits
- Webflow doesn’t automatically prevent items with duplicate names.
- Each Collection Item has a unique Slug and Item ID, but not necessarily a unique Name or Title.
2. Use Filters That Ensure Uniqueness
- If duplicate items are being pulled into a Collection List, check your Collection List Filters.
- Apply conditional filters (e.g., Reference fields, Booleans, dates) to restrict items to only one per type or group.
- For example, use a multi-reference field to group related items and filter by "First item" using a sort + limit.
3. Sort and Limit Strategically
- Webflow allows you to sort items (e.g., by Created Date, Alphabetical, Custom Order).
- You can then set a limit (e.g., show only the first item per duplicate).
- While this doesn't technically "de-duplicate" by name, it obscures duplicates if paired with consistent sorting logic.
4. Use a Unique Identifier for Filtering
- Create a custom field in the CMS like “Display in List” (Boolean) or a unique “List Code”.
- Manually tag only unique items or representatives of duplicate entries.
- Then filter the Collection List by that custom field (e.g., "Display in List is true").
5. Consider JavaScript if Needed
- Webflow does not natively support “group by” or duplicate elimination by a field value like name.
- If needed, you can use custom JavaScript to hide duplicates after page render.
- This is done by selecting all Collection Items on the page and removing/hiding those with duplicate names.
- Note: This approach affects SEO and load behavior, since all items are still loaded into the DOM.
Summary
Webflow doesn't natively prevent duplicates in Collection Lists, but you can filter, sort, limit, or tag items to ensure only unique entries are displayed. For more advanced needs, custom JavaScript may be required to hide visual duplicates post-load.
