Back to all lessons
Lesson library

CMS Collections

CMS Collections are content types with different structures in the Webflow CMS, like blog posts, authors, or help articles.

This video features an old UI. Updated version coming soon!
Clone this project

A collection is like a database — it's where content can be stored and referenced throughout a project dynamically. Different collections signify different content types, and an individual piece of content within a collection is called a collection item. For example, you can have a collection of blog posts, authors, clients, projects, and so on. For Ecommerce projects, you’ll also have collections for products and categories.

The CMS collections panel displays six collections. The blog posts collection is selected and displaying six different collection items with their cusotmized status, color, created date, modified date and published date.
In this lesson
  1. Create a collection
  2. Edit a collection
  3. Create collection items
  4. ‍Design with collections

Create a collection

You can create CMS collections in the CMS panel. Ecommerce collections are created automatically in the Ecommerce panel.

The CMS Collections panel displays five lists and it includes a "Create new collection" button to the right of the close panel icon. The "Create new collection" button is highlighted.

Collection settings

To complete the creation of your new collection, give it a name, choose a slug for the URL structure, and create the data structure by either choosing a template or adding custom collection fields.

Collection templates

If you’re not sure what content structure you need for the collection, you can use one of our preset collection templates to get started. Each of these templates has their own set of fields which you can add to or delete from as needed.

The twelve collection presets that are included in the New collection panel are blog posts, authors, categories, projects, clients, team members, listings, events, menu items, songs, shows and recipes.

Ecommerce collections come with a set of default fields which aren't visible in the collection structure under collection fields. You can add more collection fields but you cannot remove any of the defaults.

Collection name

Once you specify the name of your collection, singular and plural versions of the name will be generated and used in different places throughout the project. The collection name can be customized at any time.

The Collection name input field is highlighted in the Collection settings panel.

Collection URL

The next step is to specify the collection URL (slug) which is the name of the folder that your collection pages will be stored in. The text you specify here will determine the URL structure of your collection pages — all the pages generated for each collection item. This URL can be the same as the singular or plural version of the collection name or it can be customized.

The Collection URL input field is highlighted in the Collection settings.

For example, if you’re creating a collection of “Blog Posts,” you can name the collection URL “blog-post,” so it reads Or, you can name the collection URL “blog” so it reads

Rename the Collection URL

You can rename the collection URLs whenever you want. However, if you've already published your site, you'll need to set 301 redirects to ensure that existing external links to pages in this collection will keep working. Here's how you can set the redirect easily without having to redirect each and every collection page:

  • Old path: /old-collection-url/(.*)
  • Redirect to path: /new-collection-url/%1
Note: there are reserved slugs you can't use when naming your pages.
The 301 Redirects section displays an old path text input field and a Redirect to path text input field. A green "Add redirect path" button is on the right side of the section.d
Set 301 redirects in your Project settings → Hosting → 301 redirects settings.
At the moment, you cannot rename collection slugs of Ecommerce collections. This feature is coming in the future. Also note that if you want to Enable Ecommerce on an existing site, at the moment, you cannot have CMS collections and static pages or folder with slugs reserved for Ecommerce such as product and category.

Collection fields

While presets can be a good way to get started quickly with CMS collections, you can also build your collections from scratch, adding or removing fields as needed for the type of content you’re working with. You can also add custom fields to Ecommerce collections.

Collection fields aren't website elements. They're simply fields where data is stored for each collection item, which you’ll be able to reference in your designs.

The Works collection item displays a Basic info section and a Custom fields section. A purple "Add New Field" button is displayed in the top right corner of the panel.

There are many different field types to choose from when structuring your collection. Each field translates into different kinds of content that you incorporate into the design for your project.

The 16 field types that can be selected under custom fields are plain text, rich text, image, multi-image, video link, link, email, phone, number, date/time, switch, color, option, file, reference and multi-reference.

Edit a collection

Once you’ve created a collection, you can go back and edit the collection structure and settings even after the project has been published.

The settings button to edit a created collection is highlighted on the top right corner of the Collection items panel. It is located between the Import and New Blog Post button.
To access the collection settings, open a collection in the CMS and click on Settings. You can also click on the settings icon next to the collection in the collection panel.

You can add a new field, edit an existing field, or even remove a field altogether. In each field, you can modify the label and help text. Customizing the help text can make it clear to Collaborators what each field is intended for.

The Help text input field is highlighted within a Work settings panel. It currently displays text as follows, "How many team members worked on this project."
Delete a Collection field

You can only delete fields that aren’t being used in your designs, collection page settings, collection list settings such as filters or conditional visibility.

Reorder the display of CMS collections

Drag and reorder your Collections to keep your most important collections organized and accessible. The reordering made in the Designer will be reflected in the Editor, there's no need to republish your site.

Create and manage collection items

Once the collection is created, you can start creating collection items such as blog posts, products, listings, etc., either in the Designer or the Editor. You can also manage your collection items by filtering and sorting them.

Learn more about: collection items and how to manage them

Design with collections

Now that you've created your collections, you can pull content from them and connect them to your elements and design on the canvas.

Learn more about: designing collections

Try Webflow — it's free