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 we can store all our content that can be used throughout our project dynamically. And even if you don't have content to start, creating a Collection gives us the option to use dummy content. So you can get right to designing and developing dynamically.

So. Let's create a Collection.

In any project, we can access the CMS from the Designer. As we already know, the content we put into a Collection — these items — the content is entered into fields.

When you go to create a Collection, you can use one of the presets, which give a good starting point, or build a Collection from scratch.

If you do that, you can really create anything. The fields are completely customizable and you have really granular control over the details. When we build from scratch, we can tailor the fields in our Collection to the content we're working with.

But for this example, let's use the Blog Posts preset.

And something to note as we're looking at this: these fields aren't HTML elements — they're simply fields where data is stored. Down the road, after we finish creating this Collection, we can bind this content to actual elements in our projects — we can use it almost anywhere.

We can give our Collection a name, we can customize the URL, and we can set up the fields. Now later on, we can add or change content from the Editor. So as you're setting up Collection fields, you'll see a preview on the right for each corresponding field: what the general layout will appear like when using the Editor. The Editor's the option we have available if we want other collaborators or clients to go in and add their own content.

Of course, you can add a new field, you can click in and edit an existing field (or even go to remove that field altogether), and you can sort your fields by grabbing the field name and dragging into place.

You can always come back later to change any of this — the only thing set in stone is the URL, so make sure it appears how you want it. When you're ready, press Create Collection.

And that's it. You just created a Collection. Actually we just created a Collection. But maybe you did, too.

Now you might have noticed that we clicked to add dummy items, which have now populated our Collection. Of course, we can add or import legitimate content, but dummy content lets us get going with design and development inside our project.

We cover a lot more of this in additional content, but this is a good starting point for creating and conFiguring a Collection in the Webflow CMS.

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

Create a collection
Edit a collection
Create collection items
‍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.

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.

For example, if you’re creating a collection of “Blog Posts,” you can name the collection URL “blog-post,” so it reads yourwebsite.com/blog-post/blog-post-page. Or, you can name the collection URL “blog” so it reads website.com/blog/blog-post-article.

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 collection items

Once the collection is created, you can start creating collection items such as blog posts, products, listings, and so on either in the Designer or the Editor.

Learn more about: collection items