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:
- How to upload external data into Webflow
- How to configure fields and preview items
- How to import the mapped data
- How to structure your CSV file
- How to use supported data types
How to upload external data into Webflow
Let’s walk through how you can upload external data into your Webflow Collection. We’ll cover the following steps in this process:
- How to determine the number of items you can import
- How to upload a CSV file
- How to specify the header row
- How to choose which items to import
How to determine the 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 (the header row won’t count as an item).
How to upload a CSV file
To upload your CSV to your designated Collection in Webflow:
- Open the CMS panel
- Select your Collection
- Click Import
- Drag in your CSV file (or click to browse your computer)
Note: The maximum file size for a CSV file is 4MB.
How to specify the header row
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.
How to choose which items to import
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.
Note: If you haven’t chosen a header row or had indicated that you were unsure if the first row is a header row, you will move directly to field configuration, without the choice to update matching items. Essentially, Webflow defaults to creating new items for you, because without a header row, it’s not possible to map to an ID column or field.
If you had matching items, you can choose to:
- Update matching items, which matches existing items in your Collection to items in your CSV upload
- Import all items as new items, which adds the matching items in your CSV upload as new items in your Collection
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.
Note: Regular CMS items are matched based on the “Item ID” field, which is included in a CSV export from a Collection. (Updating items via CSV import does not apply to Ecommerce items.) Please also keep in mind that if you perform a site restore from a backup, all CMS Collection and item IDs will refresh. Read more about saving and restoring backups.
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.
How to configure fields and preview items
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.
Note: If your CSV header names match your existing field names, they will automatically map to each other, and save you a configuration step.
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.
How to configure fields
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.
Don’t map field
If there are columns in your CSV that you don’t want to import, choose do not import from the dropdown.
Create new field
If a field doesn’t already exist in the Collection, you can create one and map it to a column.
- Choose Create new field
- Choose the field type for this new field from the dropdown that appears. Field types that do not support the content in a column won’t be available and will be grayed out.
- Add a New field label or keep the suggested label.
- Optional: add Help text
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.”
Map to existing field
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.
- Choose Map to existing field
- Choose the field you want to map this column to from the dropdown that appears. Fields that do not support the content in a column won’t be available and will be grayed out.
For the switch field, you can specify which value maps to “No.” Or, you can swipe to map a value to “Yes.”
Good 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.
How to preview items
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:
- Locate the item in the preview pane that you don’t want to import (e.g., use the arrows, dropdown menu, or search bar)
- Turn on the Skip import toggle
Skipped items are indicated at the top of the preview pane and in the display item dropdown menu with a “skip import” icon.
Fields with requirements/validations
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.
How to import the mapped data
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.
Good to know: A pre-import version of your site will be created, which you can restore in the Backups tab of your Site settings, just in case anything goes wrong with the import.
How to structure your CSV file
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.
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 CSVs with only 1 column of data import correctly, add a comma directly after the header column label (e.g., Name,).
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.
How to use supported data types
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:
- Name field — any plain text field with fewer than 256 characters can be mapped to this field
- Slug field — any plain text field with fewer than 256 characters can be mapped to this field
Note: If you haven't mapped a CSV column to the default name and slug fields, the CMS will generate those for you.
- Plain text field — any plain text values can be mapped to this field
- Rich text field — any values can be mapped to this field. However, to import rich text, the value of this field must be in HTML code.
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.
- Image field — images should be added as direct URLs (links that end in an image file extension) in your CSV. Only supported image file types will be imported into your Collection.
- Multi-image field — like single images, groups of images should be added as distinct, direct URLs (links that end in an image file extension) in your CSV. Only supported image file types will be imported into your Collection. Each group of image URLs in a cell should be separated by semicolons. (e.g., “https://images.unsplash.com/bird1.jpeg; https://images.unsplash.com/bird2.jpeg; https://images.unsplash.com/bird3.jpeg”)
- Video field — only YouTube or Vimeo URLs can be mapped to a video field
- Link field — any URL can be mapped to a link field
- Email field — Only email addresses can be mapped to an email field
- Phone field — any supported phone number format can be mapped to a phone field
- Number field — only numbers can be mapped to this field. You won’t be able to map numbers to a number field if your values contain letters for example units (100 USD), symbols (eg. $100), or commas (10,000).
- Date/Time field — any supported date and time formats can be mapped to this field
- Switch field — You can map a column to a Switch field, when there are only two unique values in its cells. For example, if a column only has "True" and "False" as values, you can import this as a switch field type, and specify which value means "Yes" during the mapping phase.
- Color field — any value in web color format (color names, hex codes, RGBA) can be mapped to this field. Hex codes must be preceded by the pound sign (#), e.g., #4353ff.
- Option field — any column can be mapped to the option field. All unique values in this column will become the options for this field (with a maximum of 100 options).
- File field — currently you cannot map any columns to the file field. You can manually upload your files once you import all your data.
- Reference field — You can map content that is formatted as normal text — no special formatting required (e.g. “Charles Dickens”).
- Multi-reference fields — You can map content separated by semicolons within its cell (e.g. “Charles Dickens; Jane Austen; Charlotte Bronte”) just like multi-image field content.
