Use Collection fields to build custom Collections

Updated

Build custom CMS Collections with Collection fields.

Collection fields aren’t website elements — they’re fields where data is stored for each Collection item. You can reference this dynamic data in your designs. Learn more about adding Collection fields.

In this article, you’ll learn:

  1. How to use Collection fields
  2. How to duplicate a Collection field
  3. How to delete a Collection field
  4. About CMS file privacy

How to use Collection fields

There are many Collection field types to choose from when structuring your Collection, each designed for a different content type or purpose. Available field types include:

  • Plain text field — adds unformatted text that can be connected to any text element, except rich text, in your site.
  • Rich text field — text with formatting options. These are useful for long-form content, like a blog post. You can add headings, paragraphs, and media directly to the field.
  • Image field — adds an image which can be used as regular images or background images in your site.
  • Multi-image field — adds multiple images which can be used as regular images or background images in your designs. Multi-image fields can be connected to Collection lists and lightbox media on Collection pages.
  • ‍Video field — accepts URLs for videos hosted on platforms such as YouTube or Vimeo. These are usually connected to a video element.
  • Link field — adds a generic link that can be connected to any link element such as a button, a text link, or a link block.
  • Email field — adds an email address field which can be connected to any link element in your site.
  • Phone field — adds a phone number which can be connected to any link element in your site.
  • Number field — adds any kind of number (integer, decimal, etc.) which can be connected to any text element in your site.
  • Date/Time field — adds a date and time picker which can be connected to any text element. You can set it to use any format (month, day, year) in your site.
  • Switch field — accepts one of two values: yes or no (or true or false), similar to a boolean operator. It can be used to filter Collection lists or determine conditional visibility.
  • Color field — adds a unique color which can be applied as text color, background color, or border color in your site.
  • Option field — creates a list of predefined values. You can select one for each Collection item.
  • File field — adds a file that you can connect to any link element in your site.
  • Reference field — links to other Collection items from the same or different Collections (including Ecommerce Collections). You can then reference both Collection items in your site.
  • Multi-reference field — similar to a reference field, but you can link to multiple items from a Collection.

How to duplicate a Collection field

To duplicate a Collection field, including its settings:

  1. Go to the CMS panel
  2. Click on the Collection name
  3. Click Settings, or the settings “cog” icon next to the Collection’s name in the Collection panel
  4. Click the field you want to duplicate
  5. Click the “Duplicate field” icon
  6. Give your field a new label

How to delete a Collection field

When you’re updating the structure of your Collection, you can delete any Collection field that isn’t used in your site, except for default Ecommerce fields.

Delete an unused field

To delete an unused field from your Collection:

  1. Go to the CMS panel and click on the Collection name
  2. Click Settings, or the settings “cog” next to the Collection’s name in the Collection panel
  3. Click the field you want to delete
  4. Click the “trash icon

Delete a used Collection field

If you can’t delete a Collection field from your Collection settings, it’s likely that the field is connected to an element or a setting in your site. You’ll need to remove all instances of that Collection field in your site to delete it.

There are 3 steps to deleting an used Collection field:

  1. Remove connections to the Collection field
  2. Delete the field
  3. Reconfigure Zaps or API connections that were previously using the field

Remove connections to the Collection field

Removing connections to Collection fields may affect your design and code embeds. We recommend you backup your site before removing connections to Collection fields. Then:

  1. Go to the CMS panel and click on the Collection name
  2. Click Settings, or the settings “cog” next to the Collection name in the Collection panel
  3. Click the field you want to delete
  4. Click the “View field connections icon to see where the field is used
  5. Hover over the connection and click the “Disconnect icon
  6. Click Disconnect 

Disconnect all connections until there are no connections left.

Delete the field

Once you remove all the field’s connections, you can delete the field from the Collection settings.

If you still can’t delete the field, check your Collection page settings. The field might be used in SEO, Open Graph, RSS, or Site search settings, or in custom code. Remove any instances of the field from these settings, then go back to your Collection settings and delete the field.

Reconfigure Zaps and API connections that were previously using the field

If you’ve used this Collection field in Zapier or other apps using the CMS API, we recommend you check and reconfigure any Zaps or API connections that may break when you delete the field. Note that restoring a backup of your site after deleting a Collection field may still cause issues with such third-party integrations.

About CMS file privacy

When you upload an asset (e.g., a PDF file or an image) to a Collection field, that asset is also imported to Amazon Web Servers (AWS) and delivered via our content delivery network (CDN). This generates a unique filename that also links the file to your site.

Files you upload to Collection fields are not restricted — that is, they are publicly available and discoverable, but won’t necessarily be discovered or indexed by search engines if the file isn’t on a publicly viewable webpage or linked elsewhere. Learn more about asset privacy in Webflow.