WebFlow to Shopify Tutorial

How to move WebFlow over to Shopify with Udesly.

Export your WebFlow code

At this point, I am assuming you already have a website fully built on WebFlow and have the desire to get that website onto Shopify. If that’s the case, let’s continue.

  1. Click the Export button in the top right corner.

Side Mission — Detele unused images

I took a look at the Assets tab and noticed a lot of unused images. I remembered that I read somewhere that if I deleted all my images, published them, the images currently in use would be there. It seems extremely risky, but fuck it, let’s give it a try.

  1. Click the expanded view button.
  2. Click “Select all”
  3. Click “Delete”
  4. You’ll get the below modal.
  5. Click “Delete”
  6. Publish your site and refresh the designer page

OK, back on track

3. Click Prepare ZIP

Upload to the Udesly Adapter

Ok, this is the point where you have to sign up for Udesly. I selected the “Adapter Monthly” plan as it was the cheapest at $15.99 a month. If you want to support this blog post, use my affiliate link: https://www.udesly.com?udesly_ref=12434

  1. Click the “Go to the Adapter” button in the top right.
  2. Click the “Shopify” button.

Side Mission — Fix errors

Ah, this makes sense as Shopify required some common pages. Let’s go ahead and create those.

Missing Pages

• blog
• cart
• default page template
• collection

“Page Types”

Reading through the docs, it appears that we have to use custom attributes to define what kind of page we are creating. They did an excellent job documenting how to do it, be sure to read all the way to the bottom before you start https://docs.udesly.com/shopify/.

Let’s resume

I updated the pages with their appropriate attributes it worked.

Convert the template

If you haven’t already signed up for a Shopify account, you can sign up with my affiliate link https://www.shopify.com/?ref=theron.

Side Mission — Fix errors

ah, so close yet so far…umm do I have control over the size limit? The file is 71.6 MB… back to the docs.

  1. Reduce image size

Let’s resume

I was able to upload the zip file successfully.

Finishing up

I noticed a couple of things we need to wrap up. Let’s work through them together.

Create Pages

At first, I thought this was a URL path issue because Shopify structures its URLs is specific, where WebFlow is completely fluid.

That’s it

It honestly wasn’t that bad. Just because we switched it over from WebFlow to Shopify doesn’t mean our job is done; just this step is completed. I think the heavy lifting from here will be making sure the product page works and figuring out how I will maintain the site. Will I do this flow every time I want to update the site? Or will I update Shopify from this point from now on 🤷‍♂️?

Designer raised on saltwater and gasoline currently living in SF.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store