Migrate your store from Webflow eCommerce to Shopify

If you don't have a Shopify account let's get you on-board under 5 minutes.

Follow the below steps that is covered in the video:

1. Go to shopify.com
2. Click Create account in the top right.
3. Select a way to Create your account. Email or any other social platform oAuth
4. Answer the on-boarding questions according to your own situation.
5. In the Admin go to Settings > General to configure your basic store settings.

Your Shopify store is created and ready to set up your products! If you are not familiar with Shopify basics we strongly recommend this extensive course on Shopify essentials

Shopyflow consists of two apps: a Shopify App and a Webflow App. These apps work together to connect both platforms, configure Storefront API credentials and scopes in Shopify, and sync Shopify data to Webflow CMS. The steps below outline the installation process.

Follow the below steps that is covered in the video:

1. Click on the search bar at the top and type Shopyflow.
2. Select the Shopyflow App from the search results.
3. Click Install.
4. When redirected back to Shopify admin, click Install again in the popup.
5. Open the app, and log in using your credentials. If you don’t have an account, sign up for free by clicking the create an account link below the form.
6. On the opening screen, click Connect to a Webflow Project.
7. A new window will open, If you’re not logged into Webflow, sign in first.
8. Select your Webflow project from the list.
9. Click Authorize App, and close the authorization window. This also installs the Webflow App to the selected project
10. Click Save in Shopyflow.
11. Click Open in Webflow link to go to your Webflow project and start using Shopyflow Webflow App in the Webflow designer.

After completing the Shopify App installation, Shopyflow Webflow App is automatically installed on your Webflow project. All you need to do to complete the Shopyflow setup is enabling the auto-install in the App to inject the Shopyflow script to your Webflow project.

1. Open the newly authorized Webflow project in the Designer.
2. Navigate to the Apps tab in Webflow's left sidebar.
3. Locate and launch the newly installed Shopyflow Webflow App.
4. Log in to your Shopyflow account again.
5. Click Installation in the Shopyflow Webflow App.
6. Turn on Auto-Install to inject the Shopyflow installation code into your site settings.
7. Check the I understand checkbox and click Save.
8. Publish your site for the changes to take effect
9. Confirm installation by going to Site Settings > Custom Code and verifying the presence of the Shopyflow snippet.

Creating your Products in Shopify is one of the most important parts of your setup. There is already a simple CSV export/import functionality between Shopify and Webflow. However Shopyflow offers an even more streamlined feature for migrating your Webflow eCommerce products to Shopify. 

1. In the Shopyflow Webflow App’s home screen, click Webflow Ecommerce to Shopify Migration button. This option will show up only on the projects where the Webflow eCommerce is enabled.
2. Optionally, in the opening screen you can exclude products you don’t want to transfer.
3. If you’re using a custom field for the Product Description you can replace the source of the Product description.
4. Map Webflow collections to Shopify taxonomies. For example: Webflow Categories can be used as Shopify Collections.
5. Click Create Products to initiate migration.
6. Once completed, check your Shopify admin to verify the migrated products.
7. If further adjustments are needed for your Products, use Shopify’s Bulk Edit Mode to modify multiple fields across different products simultaneously.

Using the Bulk Edit mode

1. Go to Shopify Admin > Products
2. Select the Products that you want to edit from the list or select all by using the checkboxes
3. Click Bulk Edit in the top right of the Product List

We are now done with Webflow eCommerce. All product details (descriptions, variants, prices, taxonomies) are now in Shopify. Now let’s sync the Shopify data back to Webflow but this time as CMS collections.

1. Open Shopyflow Webflow App.
2. Click Import and Manage Shopify Data.
3. Shopyflow stages the creation of all the collections automatically. Shopyflow will create six CMS collections:
4. Products and Variants to store Shopify product information
5. Collections, Tags, Vendors, and Product Types to store Shopify taxonomies
6. Click Create Collections to proceed.
7. Once the collections are created click Continue to verify the collections and the fields.
8. In the end click Start import and wait for the products to be created in the CMS.

Enable auto-sync

Once the product transfer is complete, you can enable Auto-Sync to have real-time sync between Shopify data and Webflow CMS. Auto-Sync continuously monitors changes in your Shopify store and automatically updates the CMS.

Before starting to build our Shopify product page in Webflow, let's take a in-depth look at the CMS structure that Shopyflow use to store Shopify data in Webflow

Follow the steps show in this tutorial to build your Shopify product page in Webflow with the pre-configured Buy Module using the Shopyflow Webflow App

This tutorial explains how you can reutilize the components from your existing Webflow eCommerce product page and avoid creating them from scratch.