Use Collection fields to build custom Collections

Build custom CMS Collections with Collection fields.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

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 a file (e.g., a PDF file) into a Webflow CMS Collection item field, that file is also uploaded to Amazon Web Servers (AWS). This generates a unique filename for your file that also links it to your site.

It’s important to note that the files you upload to a Collection item field are not restricted. Essentially, if you have the direct link to the uploaded file, that file can be loaded in a web browser and could be discoverable. However, it’s unlikely the file will be discovered unless the unique filename (GUID) can be guessed. The file has to be linked or shared somewhere for someone to find it. The file must also be on a publicly viewable webpage for Google or other search engines to be able to crawl and index the file. 

Scenarios where files in Collection fields are potentially discoverable:

  • You have a direct link to the uploaded file
  • The unique filename (GUID) can be guessed
  • The file is linked or shared somewhere (e.g., a CMS Collection page or static page links to the file)
  • A Collection list links to the file
  • The file is on a publicly viewable webpage for Google or other search engines to crawl and index the file
Note: If a Collection page links to the file, or if the file is linked elsewhere on a static page (or a Collection page) via a CMS Collection list, Google can crawl the page and index any links it follows.

Prevent CMS item file discovery:

Password protection

If the page that contains the link to the file is password protected, the link won’t be found on the page. This is because the page returns a password protected response — and the content won’t be loaded. 

However, if the page that contains the link to the file is not initially password protected and becomes password protected at a later time, Google may have already crawled and indexed the content — including any links to files on the page. In this instance, the actual file link is still loadable and Google would continue to index that file. In other words, the link to the uploaded file is not password protected — only the page itself is password protected.

Set a nofollow attribute on the file link

To avoid indexing a link, one option is to set a rel=nofollow attribute on links that go to the file you want to restrict.

To set the nofollow custom attribute on links: 

  1. Select the link on which to set the custom attribute
  2. Go to Element settings panel > Custom attributes
  3. Click the “plus
  4. Add a Name (e.g., “rel”) and a Value (e.g., “nofollow”)
  5. Click out of the modal to save the attribute
Important: The nofollow attribute is only a suggestion to Google to not follow the link to the restricted file. Google may still index the file if it crawls the file from a link elsewhere. Additionally, the nofollow attribute will not remove restricted files that are currently indexed by Google.

Upload private files through form file upload

You can upload a file through form file uploads with the “Restrict file upload access” toggle turned “on.” Learn more about restricting access to form file uploads.

Files uploaded via restricted form file upload access are not accessible for search engines to index or for others to view without having logged-in access. 

Note: Files uploaded via restricted form file upload access cannot be used on CMS Collection pages or static pages. This is because their links are restricted and require logged-in access.

Table of contents

Continue learning

Oops! Something went wrong while submitting the form.

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top