Use a CSV file to import thousands of Collection items into your Webflow project in one go.
A lot of times, we'll have access to huge amounts of data: items that we want to feed right into a collection without having to create them manually. Wouldn't it be great if would could simply configure and import a CSV right into a collection? In this video lesson, we're going to configure and import a CSV right into a collection.
Whether you've exported your CSV, or you're typing out your CSV manually, an optional first step is to configure the CSV for import. Here in Google Sheets, we have a pretty straightforward spreadsheet.
We've included a header row (which lets us specify the type of content contained in each column). In other words, each of these columns represents a field type. Each row? Represents an item.
Let's download this as a CSV — or if we're using Excel we can Save as... and choose from our File Format dropdown: CSV. Or if we're in Numbers, we can go to Export...CSV.
That's configuring a CSV. Most of the time, the Webflow CMS is going to be able to parse and import your content without manual configuration. But let's go in and drag the CSV right inside. We instantly get a good preview of what's happening with the content. First, we're making sure that the top row is a header. It doesn't need to be, maybe it's an item.
And once we continue, we can get even more specific regarding the following: not importing this content, creating a new field (if we want to create a field using this header...and choosing the field type from the dropdown), or mapping this content to an existing field (if we've already configured this field in our collection).
Over to the right, we have our item preview, and we can switch through the different items that we're importing. We can even click the dropdown and get super specific.
And when we're done? Just import...and that's it! We've imported these items right into our collection.
When you create Collections, you can enter 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 CMS content.
You can also import a Collection you've exported from the same or another Webflow project. Learn more about migrating your CMS to another project.
In this lesson:
To upload your CSV in Webflow to your designated Collection:
For reference and multi-reference items that don’t exist in your Collection: you’ll get a warning that your item doesn’t exist. As a required field, it will be imported as a draft since it doesn’t exist in your reference Collection.
Note: The maximum file size for a CSV file is 4MB.
Number of items you can import
Using Enhanced staging with a paid Account 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, use a CSV of 50 rows or less, including the 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 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.
When a CSV is uploaded, the columns will be available as fields that you can configure in the field configuration pane on the left. 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 items 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.
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.”
Need to know: You can't map a column to existing fields that are already in use. If you need to map a column to a specific field type, you can create a new field.
You can preview the items that will be imported in the item preview pane on the right. You can switch between items using the arrow keys at the top to preview the fields and values for each item. You can also see a list of all the items that will be imported by clicking the underlined item number indicator in the top bar. You can also select to preview any item from this list by clicking on the item name.
Hovering anywhere over a mapped or created field in the left panel will highlight the corresponding 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.
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, then the item for that row will set to Draft once imported, 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 import, and the reference field will be left blank.
Learn more about CSV import.
Once this step is complete and your CSV has been fully configured, import the data by clicking the Import button on the top right.
Wait until all items are imported.
Good to know: A pre-import version of your site will be created, which you can restore in the Versions tab of your Project Settings, just in case anything goes wrong with the import.
You don't need to worry about the structure of exported Webflow Collections. Typically, CSVs exported from other CMSs 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.
Note: When saving a CSV file in Excel, be sure to select the CSV type “Comma Separated Values.” Other CSV extensions may not render correctly when uploaded to Webflow.
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
Got a lesson suggestion? Let us know
Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback