WebFlow to Shopify Tutorial
The only viable option that I can find to export WebFlow to Shopify is Udesly. I am documenting this mostly for my own memory as I feel this will be a weekly task of mine from now on. I am writing this in real-time as I figure this out for the first time.
Let’s first talk about why I am doing this. WebFlow is leading the no code movements, meaning no code is required to build websites. I consider myself an expert at HTML and CSS. For the past 16 years, I have taken great pride in the code I write. I can build an entire website on WebFlow in about 10% of the time it would take me to build the same site hand-coding it.
WebFlow is hands-down the best tool for building websites. If you haven’t already signed up, please sign up with my affiliate link https://webflow.com/?rfsn=2766390.46882a&utm_medium=affiliate.
Let’s get back on track.
Udesly has this product called “Adapter,” and that seems to be the tool I need to use. Let’s get started.
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.
- Open your project in the Designer.
- 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.
- Go to assets panel
- Click the expanded view button.
- Click “Select all”
- Click “Delete”
- You’ll get the below modal.
- Click “Delete”
- Publish your site and refresh the designer page
All the unused images appear to be gone, and nothing appears to be broken.
OK, back on track
3. Click Prepare ZIP
4. Download the ZIP file
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
- Create account
- Click the “Go to the Adapter” button in the top right.
- Click the “Shopify” button.
4. Click “Choose File” and find the zip file you just exported from WebFlow.
5. Select your settings and click “Convert.” For this first time around, I left the default options selected.
Side Mission — Fix errors
Ah, this makes sense as Shopify required some common pages. Let’s go ahead and create those.
• default page template
So I started to add the pages and noticed that I already had a page called “cart”…🧐. Let’s go ahead and add the other pages and re-export to see what happens. And I got the same error. Time to read the documentation.
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/.
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.
- Click “Themes” under Online Store under Sales Channel.
2. Click the “Upload theme” button
3. Add your file and click “Upload file.”
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.
No help. Let’s unzip this file to try to find the culprit.
The “assets” folder is 75.6 MB. After reviewing the contents, it seems that I have some of the unused images still in there. And it appears that some of the images have duplicate files that are smaller in size. The fonts are also in assets, but they only take up 5.1 MB. But the real issue is some large ass gifs and other hero images. The largest image I have (non-gif) is 2.9MB 😬. I ran them through ImageOptim before uploading them to WebFlow, but I guess that wasn’t enough.
Things I am going to do to reduce the zip file size:
- Remove the random unused images.
- Reduce image size
The zip file is now 39.1MB. The unused images were the largest files.
I was able to upload the zip file successfully.
The next thing we need to do is publish our theme.
The preview page looks pretty accurate to what I had in WebFlow.
Let’s click Publish.
Now scroll to the top of the page and click “Disable password”. You might not have to do this step if you had a previous store with Shopify.
Of course, to disable the password, you will need to select a plan. I choose Basic Shopify for a $29 a month plan.
It worked! All the assets loaded correctly.
I noticed a couple of things we need to wrap up. Let’s work through them together.
At first, I thought this was a URL path issue because Shopify structures its URLs is specific, where WebFlow is completely fluid.
So I updated a single page path in WebFlow and re-exported / re-imported the site, and it didn’t fix the issue. So I create two new pages, one with my updated URL to math Shopify and one of the old WebFlow paths. Both worked. The lesson learned is that the WebFlow URLs don’t matter.
This step is straightforward for the most part. You will have to add products as you would normally do in Shopify. Then you will have to modify your static theme and update the images and other items, so it’s more dynamic. This doesn't seem like it’s a great long-term solution.
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 🤷♂️?
If you have an easier way or any hints along the way, please feel free to reach out and let me know.
If I make improvements to this flow, I will update the post.