Webflow Tips & Tricks: Removing CMS bindings made easier

Having trouble to delete CMS collection fields from your Webflow CMS collection? Can't break or re-connect the CMS bindings on your site? I'm listing two solutions for this in my article - one for less troublesome cases, and one for the more pesky ones. You're welcome.

Webflow's CMS feature is great. It makes it easy for content creators to add new articles, blog posts or other dynamic content. However there are some aspects that can be quite frustrating - one of them is removing CMS bindings from your collection that you don't need anymore. Let's set the scene: you've got a CMS field in your collection (this could be anything: a text field, rich text, an image or even a reference or multi-reference field) and decide it is not applicable anymore, hence you want to remove it from your CMS collection. Doing this is actually a pretty good idea as you clean up your collection, making things more manageable (especially for content contributors), but also you in case you have used a (multi) reference field, you are then able to remove the redundant CMS collection the reference field refers to.

So what's the problem?

If you have applied any of your CMS fields to a page (for instance you have connected a CMS plain text field to a paragraph on your page), you won't be able to delete this particular field from your collection without first breaking the connection (or CMS binding) on the page. This is easily done via your element settings. However, you might have a rather large site, and have one CMS field connected to various pages and locations throughout the site. Maybe you even forgot where exactly that pesky little CMS field was used! So how do we remedy this? Read on...

Solution #1

  1. First thing to do is click on the little cog icon next to your CMS field in your CMS collection and press the chain icon to "view field connections", and have a look where exactly the field is being used on your site. Here you can either directly break the connection there or first navigate to the appropriate page, and re-connect your item to a different CMS field. You can then go back into your CMS collection and check if the connection has been removed.
  2. If yes, great, you're done and can delete the redundant CMS field.

Solution #2

  1. However, there are certain instances when the "view field connections" dialog doesn't give you the appropriate information and possibly only shows you the page(s) your field is used on but not the actual item it's connected to. You are then also not able to directly break the connection here or delete the redundant CMS field. It seems this issue is often present when you have CMS bindings that are multi-reference or reference fields and/or fields that are present inside filters, HTML embed items or the conditional visibility feature. It means you face looking at all items on the page, peeking into every Div to see if there is a CMS binding present. This can get annoying and time consuming very quickly, especially if you are working on a large site with a very complex page structure. But wait, there is a method that makes things slightly easier for you.
  2. To be sure to not break anything on your current site, duplicate your project. Navigate to the copy of the site and go to any page that is using on of the CMS field bindings. Now delete different sections of your page bit by bit and after every deleted section, go back to your CMS collection and check via the "view field connections" if the binding is still present on the page. If not, you know that the CMS binding you are looking for is located in exactly this section. If yes, continue and delete items from your page until you find the culprit.
  3. Each time you've found an affected section go over to your original site, navigate to the appropriate page and connected element and break the connection or reconnect it to another CMS field. When you are done you can delete the copy of your original site.

Of course this process can be quite tedious but is still a much better and faster process than going through your whole page structure in the Webflow navigator panel. It would be great if Webflow could make things easier for Designers and show the exact element your CMS binding is located in at all times. If it isn't already an item on Webflow's wish list, someone should definitely add it! Hope this article helped you a little. Let me know if you need any further help or assistance.

Got any Questions?

Fill out the form below or get in touch with me via email.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.