Importing Collection items with CSV import

 

When you create Collections, you can enter your Collection items manually, or if you have content from another source saved in a CSV file, you can import it directly into an existing Collection. This allows you to import hundreds or thousands of data items from an external source directly into the CMS. 

To import your content, you will:

  1. Upload a CSV
  2. Configure fields and preview items
  3. Import the data

Also learn about:

  • Structuring your CSV file
  • Supported data types

Step 1: Upload a CSV

Importing Collection Items in Webflow

To upload a CSV file into an existing Collection:

  1. Go to the CMS Panel
  2. Select your Collection
  3. Click the Import button
  4. Drag in a CSV file (or click to browse from your computer)
Importing Collection Items in Webflow
The maximum file size for a CSV file is 4MB.
On Free or Enhanced staging, you can publish up to 50 Collection items. To import more than 50 items, you'll need to add CMS or Business hosting 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.

Specifying 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.

Importing Collection Items in Webflow

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.

Importing Collection Items in Webflow

The values of this header row will be set as the field labels for this field configuration step.

Step 2: Configure fields and preview items

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.

Importing Collection Items in Webflow

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.

Configuring fields

Importing Collection Items in Webflow

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.

Importing Collection Items in Webflow

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.

Importing Collection Items in Webflow

Create new field

If a field doesn’t already exist in the Collection, you can create one and map it to a column.

  1. Choose Create new field
  2. 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.
  3. Add a New field label or keep the suggested label.
  4. 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.” 

Importing Collection Items in Webflow

Map to existing field

You can map each column to an existing field in the Collection.

  1. Choose Map to existing field
  2. 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.”

Importing Collection Items in Webflow
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.

A green indicator next to a column label indicates that the column has been mapped.

Previewing items

Importing Collection Items in Webflow

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 map" in the dropdown.

Importing Collection Items in Webflow

Fields with requirements/validations

If a field has a requirement or validation (e.g. max characters, email address formats, etc.) and the imported data does not meet those requirements, the imported item will be set to draft mode, and that field will display an error indicating that it needs adjustment.

Importing Collection Items in Webflow

Step 3: Import the data

Importing Collection Items in Webflow

Once this step is complete and your CSV has been fully configured, you'll import the data by clicking the Import button on the top right.

Importing Collection Items in Webflow
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.

Structuring a CSV file

Usually, CSVs exported from other CMSs like WordPress are already structured in a way that’s compatible with Webflow. Learn 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.

When saving a CSV file in Excel, makes 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.

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. 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 less than 256 characters can be mapped to this field.

Slug field - any plain text field with less than 246 characters can be mapped to this field.

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.

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.

Currently, only images mapped to image fields are hosted by Webflow. Images within rich text elements are hosted by their external host, and they will not render if the original URL breaks or is no longer available. Once the CSV is imported, you can replace these images by uploading them directly in Webflow.

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).

Reference and multi-reference fields - currently you cannot map any columns to these fields. You can manually enter your references once you import all your data.