Use a CSV file to import thousands of Collection items or just a select few into your Webflow site in one go.
Note: We're transitioning to Workspaces, and this lesson has been updated to reflect that change. Visit the Workspaces blog post to read more about these updates and changes.
What if we could bulk edit everything using the power of a CSV? In this lesson, we’ll cover exporting a CSV, and even importing and updating our Collection based on an updated CSV. Is it magic? It’s certainly close.
This is not Webflow. It’s a screenshot of Webflow. But if I move that out of the way, we can see the actual Webflow. And I have a full site built out here, and over in Collections, I have this rich database of literally everything.
Now let’s say I want to make a bulk change to the data. Can I go just one-by-one and make the changes by myself? I’d be here for days. Thankfully, the world invented Google Sheets and Microsoft Excel and Numbers on macOS.
[Grímur] And iOS. I’m on it now.
[Miguel] So am I.
[Grímur] Always one step ahead of us, Miguel.
[Miguel] No, Grimur. We’re still on step 1. Since we have our starting data here, we can export as is or we can filter our items and only export the items we want. For this example we’ll export the entire collection. And that downloads…a CSV.
Let’s open it on Google Sheets (but this should be similar for all spreadsheet software). And (when we–)
[Grímur] I’m trying to open this in VisiCalc…
[Miguel] Okay, almost all spreadsheet software. But when we do, we can make whatever changes we want. The goal is this: I want these changes to be reflected in Webflow.
So can I do a series of complex calculations and change the data for like 200 of these items.
[Grímur] I’m already doing that with this bluetooth keyboard.
[Miguel] I know. Everyone in the studio knows. But when we’re done with all these changes? Let’s export this as a CSV. Here’s how to do that on Google Sheets.
File… download… CSV.
By the way, if we used Excel, we could do that in Save as… and choose CSV from the dropdown.
In Numbers? We’d choose the export option for CSV. And VisiCalc?
[Grímur] Oh I can save dot dif, dot VC…
[Miguel] Once we’ve saved the CSV, it’s time…to move onto importing. Now, we can import without existing data. In other words, if this was a blank Collection? We could populate it via a CSV that has stuff inside. But since the item IDs were exported and they’re in the new CSV we just saved? Importing THIS CSV shows us the following.
…okay I didn’t click Open.
But when I do, importing this CSV shows us the following:
Do we have a header row? Of course we do. It’s the first row of titles that define/represent the data/fields. Let’s continue. And just like that, Webflow has identified existing content. (It’s matching content based on the item ID.) Again, this is REALLY important. Because Webflow refers to this ID (which got exported a minute ago), and now it says “Hey, this ID in the CSV you’re importing? It matches something you have in here already.”
So. We’ll want to update those items here.
But here’s where we can review our changes and decide not only what data to update (notice how it matches this automatically), but it’s where we can even choose the items to skip.
Now. Here’s the question: do we have to skip the stuff that hasn’t changed? Not really. But on really complex CMS items, it might make sense to skip an import if it’s a super complex thing with tons of data, especially if you’re having to sit through a longer import. (It’s up to you.)
When we’re ready? Import. And like magic, the data is reconciling with the existing Collection data based on what we just told it to do.
And just like that. All those changes we made in the spreadsheet? (The ones we changed/exported in the CSV?) They’re fully updated not only in our Collection, but anywhere we’re referencing that Collection.
But that’s the basic idea.
So. As a way to sort of review, you can repeat the process (and we usually do). Back to exporting? We can export a CSV at any time. We can make our changes in something like Excel…
[Grímur] I’m on Lotus 1-2-3.
[Miguel] Where are you getting all this hardware?!
[Grímur] Hoookay.
[Miguel] And when we save that CSV, we can re-import into Webflow. And based on the fact that the item IDs are the same? We can reconcile and import all those changes into our Collection.
And that’s an overview of exporting, importing, and updating Collections…in the Webflow CMS.
When you create Collections, you can add your Collection items manually, or import them directly into an existing Collection with a comma separated values (CSV) file. This allows you to import hundreds or thousands of data items from an external source directly into the CMS, and map CSV content to reference fields when importing that content. To make updates to large amounts of data a little easier, you can also selectively update existing CMS items through CSV import.
If you’ve got collections and data that you’ve exported from the same or a different Webflow site, you can import those collection items into your current site, too. Learn more about migrating your CMS to another site.
In this lesson you’ll learn:
Let’s walk through how you can upload external data into your Webflow Collection. We’ll cover the following steps in this process:
Using a free, Starter site plan, you can publish up to 50 Collection items. To import more than 50 items, you'll need to add a CMS or Business site plan to your site, which allow up to 2,000 and 10,000 Collection items, respectively. To test CSV import for free on a Starter site plan, use a CSV of 50 rows or less (the header row won’t count as an item).
To upload your CSV to your designated Collection in Webflow:
After you’ve selected your CSV file, you’ll be prompted to specify a header row.
Usually, the header row of a CSV contains column labels defining the type of content contained in each column. Once you upload the CSV file, you’ll see a preview of your CSV and be able to confirm whether or not the first row is a header. Selecting "yes" or "I'm not sure" marks the first row as the header and excludes it from import. Selecting "No" includes the row in the import.
No matter what choice you make at this stage, in the next step, you can go to the first item and check or uncheck the "Header Row" box.
The values of this header row will be set as the field labels for this field configuration step.
After you’ve chosen your header row, you’ll receive confirmation that your CSV file has finished processing. The modal will also tell you whether any of your newly uploaded CSV items match or don’t match any current items in your Collection.
If you had matching items, you can choose to:
Choosing to update matching items is a great way to quickly make changes to existing items in your Collection. For example, if you’ve made updates to select items’ data in a CSV file, uploading just the updated items lets you quickly overwrite old content in your CMS items with your new data.
Once you choose to update matching items or import all items as new items, you can begin to configure your CMS fields and map your CSV data to those fields. If you didn’t have matching items, you’ll also proceed to this same step.
After you’ve uploaded your CSV file, its columns will be available as fields that you can configure in the Field configuration pane under Imported items. If specified, column headers will appear as field labels.
The values in the input fields will be pulled from the selected row. Each row will translate to a Collection item. You can preview different items in the Item preview pane on the right.
In this step, you’ll configure the fields by choosing which columns to map and which to leave out. You can also create new fields for each column. Let’s walk through each option.
If there are columns in your CSV that you don’t want to import, choose do not import from the dropdown.
If a field doesn’t already exist in the Collection, you can create one and map it to a column.
You will have other options to set for different field types. A new option field will be populated by all unique values from that column. For a new switch field, you can specify which value maps to “No.”
You can map each column to an existing field in the Collection. A green indicator next to a column label indicates that the column has been mapped.
For the switch field, you can specify which value maps to “No.” Or, you can swipe to map a value to “Yes.”
You can preview the fields and values of each item that will be imported in the item preview pane on the right. Use the left and right arrow buttons at the top of the preview pane to switch between items. Click the display item dropdown menu in the top bar to see a list of all the items that will be imported. With the dropdown item display menu open, click any item’s name to jump to its preview. Type text into the search bar to search for specific items.
Hovering anywhere over a mapped or created field in the left panel will highlight the corresponding field in the preview item. Preview items update in real time as the field is configured.
If you need to edit the value in a field for a given item, you can do so before you configure the field, or by selecting Do not import in the dropdown.
You can also choose to skip importing specific items into your Collection:
Skipped items are indicated at the top of the preview pane and in the display item dropdown menu with a “skip import” icon.
If a cell within one of your CSV columns is mapped to a required reference field, and it’s empty or does not contain any values that exist in that referenced Collection, you’ll receive a warning that your item doesn’t exist. As a required field, the item for that row will be imported as a Draft, and the reference field will be left blank.
If the mapped reference field is not required and a cell within that column is empty or does not contain any values that exist in that referenced Collection, then the item for that row will be set to Staged for publish once imported, and the reference field will be left blank.
After you have fully configured your CMS fields and CSV data, click the Import button on the top right to add your data to your Collection.
Wait until all items are imported.
If some or all of your items weren't imported into your Collection, you’ll see a list of the items that weren’t imported, the cause for failed import, and a link where you can download a detailed error report summary.
You don't need to worry about the structure of exported Webflow Collections. Typically, CSVs exported from other content management systems like WordPress are already structured in a way that’s compatible with Webflow.
Learn more: How to migrate from WordPress to Webflow CMS
But you may want to create your own CSV and import that data into a Collection. For example, you can use Google Sheets, MS Excel, or Airtable to create a spreadsheet with the columns representing fields and rows representing items and their values. Once the spreadsheet is ready, you can save it as a CSV file.
To ensure that you don’t run into any errors during the import process, first make sure your CSV is Webflow-friendly. See the supported data types section below.
When you upload a CSV file, Webflow CMS will usually understand your content just fine. However, some formats, such as those for images, dates, numbers, and colors, may not be recognized.
One nice note about formatting is that exported Webflow CMS content will be properly formatted for importing. So moving CMS content from one Webflow site to another will work using the exported CSV file.
To ensure that your data is formatted correctly and it can be mapped to the right field type, follow the guidelines below when creating your own database spreadsheet:
Note: If you haven't mapped a CSV column to the default name and slug fields, the CMS will generate those for you.
Note: During import, the code is “cleaned up” to remove elements, classes, and attributes that aren’t supported by the rich text field. Because of this cleanup process, it's a good idea to check all your rich text content after import.
Something went wrong while submitting the form. Please contact support@webflow.com