Convert your Webflow Ecommerce project into a Shopify theme in 10 minutes

hey there internets pixelgeek here with the udesley tutorial on how to take your webflow ecommerce project and convert it into a shopify theme using udesley's new app and chrome extension all right now let's go to my screen and i'll show you how it's done now before i started recording i went and grabbed a free webflow ecommerce template and you can get this over at webflow.com templates now for this conversion you don't have to start from a template you can also get start from a blank page uh and build it from the ground up but for this demo i'm starting with a template all right so this template has some pre-made pages like a home page uh a products page oh burgers nice and for the products you can see here we got some burger waldos um bacon okay enough enough about food let's keep going all right so pretend that i'm done with the design i'm done adding products to the webflow e-commerce uh now i want to start the conversion process so first thing you need to do is use the handy dandy udesley chrome extension just click on it once then choose webflow to shopify after that's done cool we have a config file let's click out of that click on the export button at the top now if you don't have access to this feature that probably means that you're on a free webflow account plan so what you need to do is upgrade to a light or higher account plan and then you'll get access to this all right now after that go ahead and prepare the zip download the zip and yeah we're done with webflow so we can go ahead and move on to the next step which is going to udezly and so after you log into udesley click on go to app at the top right and we're going to choose shopify there we go i'm going to drag in that zip file that webflow gave me for theme configuration i'm going to choose that config file press open and for additional assets i'm not gonna do anything you don't have to do it um so you can just skip it i'm gonna click convert and magic it's a template and we can download it and so when i download it it's giving me two things it's giving me the zip file which has the theme and then an extra data file that we'll need later for the very last step and i'll get to that soon so let's go ahead and log into our shopify account and let's go ahead and go to customize theme so click on customize theme customize theme again and i'm going to scroll down and we need to add a theme upload zip file and we're going to drag in that new zip file click upload and let that run and once it's done it's gonna start loading it into your account so we'll need to wait for this to go through and there we go just added now we just need to click on the actions drop down and click publish and then publish again and there we go our theme is published so now we need to do one last step with this extra file that we have so shopify has a webflow importer app inside of shopify and so we're going to do that and we're going to log into the store paste it there we go login choose my account come on we can do it and finally install the app cool and now with this importer i can drag in that data file and there we go all of our cms items our project or our products and our e-commerce settings have all been transferred over to our shopify store so that's it now let's go back to my demo and view the store all right so here it is all right and these are actual products so if i click on one let's say where's my bacon where's the bacon ah right there click on it this as you can see up here it's an actual product with egg wait that's not bacon that's ham well anyways there you go it's a real working shopify theme using webflow as your designer tool so that's it that's how easy it is we've used the chrome extension to create a config file we exported the code we installed our theme and lastly we imported our products cms and ecommerce setting data into our shopify store and it took less than five maybe 10 minutes that easy so thanks again to the deadly team for creating this um it's really helping the no code community and if you want to start using it go to udesly.com now and try their chrome extension for free alright that's it for this tutorial see you in the next one and as always make the web beautiful together see ya

Channel: pixelgeek

Views: 1,430

Keywords: webflow, web design tutorial, webflow tutorial, graphic design, web development, pixelgeek, pixel geek, shopify, convert webflow to shopify, ecommerce

Id: SU2JzU1WXGQ

Length: 6min 42sec (402 seconds)

Published: Thu Jul 22 2021