Streaming live at 10am (PST)

Shopify to Webflow White Paper (Part 1)

Hi here is part one of my White Paper when converting a Shopify site to a current Webflow site.

(Part 1)

White Paper moving Shopify to a live Webflow site

Written by Janne Wassberg

Before you start your move from Shopify to Webflow be sure to take a backup of your current Webflow project and label the backup if you need to roll back. Then you can activate the eCommerce in the project. I Suggest you do the basic setup in Webflow eCommerce before starting the process,

Shopify export

Export all products from Shopify.

Recommend to export all in one file since there is a lot of work to clean up the file and change the header to it can be imported to Webflow products

I did test different tolls to fix the file and decided to use Google Sheet, was the best solution for the moment.

In Webflow Ecommerce you find the collection products click import and you will have a dialog, on top of the dialog click on the link “our CSV template”. That will generate a CSV file with the correct format for your export file from Shopify.

Now you have to fix your export file from Shopify to match the sample file format. Be sure that all headings are the same, name and the number of columns is the same. It’s not the import will fail

One big problem with the Shopify export file is the product description. The product description is in HTML and all tags will be imported to your product collection.

I have decided to not import the description of two reasons:

  • It looks so bad with all HTML tags and the work to remove the takes to long time. There are some tools on Internet that can remove HTML tags but I think my solution is faster, I will copy and paste from the old shop, not fun and it will take some time. (have to do that anyway because of a BUG in Webflow ). The multi-line field in Webflow do not allow line space.
  • Because of a BUG in Webflow there is no reason to import the text to the description field (if you have long formatted text information). All text will be in the field without any line break, since the multi-line text field do not allow line brakes. The solution to this is to use a Rich Text Field but the import do not allow you to map data to custom fields. The solution for the moment is to do copy and paste to the new RTF in the collection.

Webflow import

If you have added any collections and will use references be sure to turn of the required option before importing, if not the import will fail

In my case since I’m converting a current Shopify to Live Webflow I had to a add some new collections:

Shopify Webflow

(none) Market (my chooise, new collection)

Product Type Product Type (new collection)

Vendor Vendor (new collection)

Collections Categories (current eCom collection

Products in Webflow is set up to point at following collections:

Market (single reference, required)

Product Type (single reference, required)

Vendor (single reference, required)

Categories (multi reference, not required, set by Webflow)

After you have imported your data is time to fix it. Set all switches correct (if you have added any switches)

Set all reference values in the product collection and change the field setting to required option.

Now you have to fix all imported products. Set switches, set reference fields and add (copy paste) descriptions to each product. (this could be better if Webflow allow mapping to custom fields when importing). How to clean the HTML from Shopify is another problem and the reason we have to copy and paste. Anyhow I would suggest Webflow to use Rich Text Field for the description field.

When all your data is up to date it’s time for design.

Regarding design it’s up to you, here I can’t help you. I will write some more in this White paper when I have hade time to complete my design.

You need to think about designing the new shop at the same time as you are maintaining your live web site. Like don’t publish pages you haven’t finish and tested yet.

In my opinion is quite easy to build a Web shop. In this case I will try mimic my Shopify site as much as possible. I know I will run into problems with the menu system, but let’s see later.

Janne W

3 Likes