Connecting Webflow and Shopify with Udesly, Git and ThemeKit

UPDATED FEB 28 2021 – SUPER-IMPORTANT!!!

The update to Shopify ThemeKit now does incremental upload using the deploy command. This completely eliminates the need for Git.

The steps are:

  1. Edit in Webflow
  2. Export code
  3. Use Udesly Adapter to convert to Shopify theme
  4. Make any changes you need to make to the theme using search/replace.
  5. Upload the theme changes with Themekit deploy command.

Here’s our updated and radically simplified script that does the whole thing.

UPDATED JAN 28 2021 - Included link to Applescript for automating the entire process at end of post.

We have successfully connected Webflow and Shopify. The live site is here: www.xialla.com. We edit in Webflow and host 100% in Shopify. Our methodology is:

  1. Edit in Webflow
  2. Export code
  3. Use Udesly Adapter to convert to Shopify theme
  4. Use git and ThemeKit to upload incremental changes

We looked at a number of options. You can see that discussion here.

It works extremely well. The total time to migrate changes from WF to Shopify is about 3 minutes.

Here are some details.

  • Almost everything from WF transfers successfully including animations.
  • Collections don’t transfer. If you need collections you’ll need to learn to use JSON storage and manipulation in Shopify.
  • e-commerce products don’t transfer, however the product and collections pages do transfer. You need to wire these up using special attributes that you put in WF elements. The converter reads these attributes then creates the corresponding Shopify code to wire up your e-commerce products in Shopify.
  • You can use conditional visibility to add additional tweaks to your product page based on specific products. For example we use the attribute: liquid:if product.name == “Xialla” to display a sizing chart and other elements specific to our Xialla product.
  • The Udesly documentation (https://docs.udesly.com/shopify/general/liquid/) for the Shopify liquid conversion is great.

One drawback of the conversion is that you have to upload a new theme for every update. This is a pain because if you decide to make any theme customizations you lose them on each update. I thought about this long and hard and came up with a solution using Git and Themekit.

Themekit sounds like a fancy app. It’s not. It’s a very basic Shopify utility that does only one thing; it lets you download a copy of the theme to local folder, then you can upload changes selectively file by file, or you can turn on watch. When watch is on Themekit will watch the folder for changes and upload changed theme files automatically.

By using Themekit and Git you can automate versioning without having to upload a new theme on every change.

Let’s assume you’ve exported your WF code and used the Udesly adapter to convert it to a theme, and uploaded the theme to Shopify. Now you want to use Themekit and Git for the next update. Here’s how:

INSTALL THEMEKIT AND DOWNLOAD YOUR THEME

  • Install Themekit (Redirecting…)
  • Use Themekit to download your theme to a folder. Let’s call the folder “themekit”.

DO THIS ONCE TO INITIALIZE GIT

  • switch to the themekit folder
  • git init (initialize git in the themekit folder)
  • git add . (add your theme files)
  • git commit -m “first commit” (commit)
  • git branch udesly (create a udesly branch)
  • git switch udesly (switch to it)
  • git commit -m “commit udesly” (and commit it)

DO THIS FOR EACH WEB SITE UPDATE

  • git checkout udesly (check out the udesly branch)
  • Stop theme watch if you happen to have it running from a previous update. (This is important)
  • Unzip the udesly theme created by the adapter and copy/paste everything to the themekit folder.
  • git add .
  • git commit -m “commit udesly” (now the udesly branch, which is currently in the theme folder, contains the entire new udesly theme version)
  • git checkout master (now the theme folder contains the master version again)
  • open a new terminal window and set Themekit to watch with the “theme watch” command.
  • git merge udesly (Changes from the udesly branch will be incrementally merged into the master branch. Since the master branch is checked out, this will cause the folder contents to update the changed files. This will in turn cause Themekit to upload the changed files to your live theme.

TIPS AND TRICKS

  • Make sure you’re updating the live theme. Themekit works with a local config file that points to the theme by its ID. If you’ve uploaded a few theme versions and been experimenting with Themekit it’s easy to forget that Themekit may not be pointing to your live theme any more, and your updates won’t show in your live site.
  • Use two terminal windows, one for Themekit and one for Git.
  • WF static pages get transferred over as page templates. For each page template, then you need to go to Shopify and create a new page based on that template. If an old page was at /mypage the new page will be at /pages/mypage in Shopify. (Note that the mypage name here is the page name and you can of course call it anything, but it’s easiest if you just name it the same as the template name)
  • Udesly will correctly port the links in WF menu so that once you create the page in Shopify it will see the new page at /pages/mypage. But for any non-menu links in your WF site, you need to change them to point to /pages/mypage instead of to /mypage. Of course then they won’t work in WF but they’ll work in Shopify.

UPDATE JAN 28 2021 Here is a link to our AppleScript that automates this entire process.

23 Likes

Hi I would love to know more about this.

Are there limitations as to what you can design in webflow > shopify?

For example do interactions work?

Can you literally design any page you want or are there limitations when you export to shopify?

Can you tell me more about git and theme kit?

Thanks Nigel!

@NigelShaw I Actually made an account on the forum just to like this post, would love some insight into how this is done with git and ThemeKit, also potential downfalls and such.

Best regards and thanks!

Thanks JTL. I’ll add details today.

Thanks Niklas. I’ll add details today.

1 Like

Following :eyes:!

I was just about to start a project on Shopify with a pre-made template.

Initially I was considering doing the Webflow → Udelsy → Shopify thing but got a bit afraid of the complications. For example, do Shopify Plugins break once you update the Theme?

I’d love to read more about your experiences.

@GlennAtTheFlow might also be interested since we had a quick chat about it not so long ago.

1 Like

Hi JTL,

I updated the post. To answer your specific questions:

  • There are very few limitations. The ecommerce needs to be ported. See my original post update.
  • Yes animations work.
  • Yes you can literally design any page you want. At the end of the day, Shopify displays HTML like everything else. The only thing Shopify adds is some Liquid but that’s handled by the Shopify pre-processor and converted to HTML before it goes to the browser. So there’s really no difference between a Shopify page and a Webflow page in terms of how the browser interprets it.
  • I documented the Git and Themekit part. If you have any trouble let me know and I’ll be glad to help.

You’re most welcome!

Hi Glenn,

Yes, Shopify plugins need to be re-installed after theme updates. As well customizations to the checkout (color, background, logo) are lost with theme updates. So it’s a pain. The solution is incremental updating of the theme using Git and Themekit. I documented that in the post.

Thank you Nigel for your detailed post. I’m struggling with a customer project that I originally planned here in Webflow. Initially I wanted to import the items from their inventory system using the API interface and synchronize the quantities using the Webhooks. Unfortunately, there is currently no way to create eCommerce products using the API. So I thought about transferring the whole thing to a MySQL database and solve this with Zapier. Which turned out to be very complicated.

Now we’ve moved from her old inventory system to Shopify and she already loves all the new features she didn’t have before. My problem now is how to get the 500+ products into Webflow. I thought about the Buy Button solution, which I see as much too complex on a single product basis. Then I thought about the Buy Button on a category basis, but the fact that all tracking data is lost is a disaster.

Through your original post I have now also come across Udesly and am currently reading the adapter setup and I am already quite excited about what I am looking at.

But I have a question, for my static pages that I have created in Webflow. Do I need to create these in Shopify, or how are they transferred there?

Oh ok I just found the solution. I should just have read further in their documentation

1 Like

Hi Von,

Regarding the static pages, they get transferred over as page templates. For each page template, then you need to go to Shopify and create a new page based on that template. If an old page was at /mypage the new page will be at /pages/mypage in Shopify. (Note that the mypage name here is the page name and you can of course call it anything, but it’s easiest if you just name it the same as the template name)

Udesly will correctly port the links in WF menu so that once you create the page in Shopify it will see the new page at /pages/mypage. But for any non-menu links in your WF site, you need to change them to point to /pages/mypage instead of to /mypage. Of course then they won’t work in WF but the’ll work in Shopify.

1 Like

This is super helpful! Thank you for sharing, @NigelShaw!

1 Like

Hi Nigel,

Firstly I want to say thank you for being so helpful with this and taking the time to explain.

I’m fairly tech savvy (nb not code savvy) but I know nothing about ThemeKit / Git (I have come across GitHub but have never used it).

Some questions:

  1. What’s the point in using ThemKit / Git? What is the difference between ThemKit and Git?
    Is it because without ThemeKit / Git when you upload a udesly converted webflow theme to shopify it resets all your customisations of all your .liquid files within Shopify meaning you have to do them all again? Does your Themekit/Git implementation basically allow you to ONLY update the bits that you’ve changed in webflow so you don’t have to keep recustomising the code in Shopify each time you need to make a small design change in webflow? Is that right? Sorry if that’s confusing!

  2. Will a non-coder be able to use Git/ThemeKit OK? I understand it uses Terminal? Is it fairly easy to learn/repeat each time you want to change the design?

  3. Once you’ve converted your Webflow project to Shopify and it’s uploaded… is the code editable from within shopify? So for example would a Shopify expert be able to look at the code like they would any other theme and code in further functionality if I wanted to pay for that? Or will they look at the udesly conversion and think… what the hell is this?

  4. Do Apps from the app store install OK? Or do none of them work? Or do some of them work and some of them not?

Sorry I’m a designer mainly but struggle with the code/backend a bit.

Thanks a lot Nigel!

Thanks for pulling me into this discussion. Once we’re deeper into our project next week onwards I’ll start to add our experiences with our (similar) approach here as this is a great thread for people looking to have the best or both worlds with Webflow for the theme design and development & Shopify for the ecommerce.

We too use GitHub and Theme Kit but we’re also trying a slightly different approach this time around… More details when I think it’s useful to share them!

Hi JTL,

You’re most welcome, I’m glad to help and glad it’s useful!

  1. Yes without using ThemeKit/Git you need to upload the new theme each time. As you stated correctly, this resets all your customizations. Yes, using ThemeKit/Git allows you to incrementally upload. So you are correct again. However it’s important to note that the solution I’ve presented so far doesn’t allow you to make .liquid changes in Shopify and have them preserved. However I haven’t found that necessary because you shouldn’t need to customize the .liquid code. You can do all the customizations in Webflow. In future we might find we need to customize the .liquid on the Shopify side. If so, I’ll work out how to merge that code into the converted theme using Git and document a workflow for that here. But I haven’t done that yet. So the important thing to keep in mind for now: The current system merges to the Shopify site at the file level, not the code change level. Re: The difference between ThemeKit and Git… ThemeKit is just a synchronization tool. I don’t know why they called it ThemeKit. The name makes it sound like it’s a theme development system. It’s not. The only thing ThemeKit does is synchronize/merge themes from Shopify to your desktop at the file by file level. If ThemeKit was a version control system, it would be able to merge themes at the code change level and that would be great. But it’s not. It’s just a file synchronization system. Git, however, is a complete version control system. Unlike other version control systems that are based on a synchronization to a central server, Git is a peer to peer system that makes it very quick and easy to set up a Git repository. That make it ideal for the purpose we need here which is managing file comparison and merging in the ThemeKit folder.
  2. Yes. It’s super easy. You just open 2 terminal windows and in both of them you switch to your Themekit folder. (The easy way to do this is type "cd " (note the space after cd) then drag and drop your themekit folder into the terminal window which will enter the folder name after the cd , the press enter). Then in one window you run those few git commands. In the other you run the theme watch command. The only issues you might run into are installing ThemeKit and Git. The installs typically rely on other stuff like cocoa, brew, etc. (hardcore developers love their coffee-related names for tools) which you have to install. You might have to ask a developer friend to install Git and ThemeKit (or find someone on Fiverr who will do it for you). But once those are installed, you will be able to easily repeat the commands to synch.
  3. Yes the code is editable in Shopify and looks like regular code. In many ways it looks neater than a lot of Shopify developers’ code because Shopify doesn’t natively have the awesome WF system that keeps the css organized, the HTML structured and so on. But you don’t want to customize on the Shopify side for the reason I explained in #1, which is that the merging from WF and the Udesly converted theme to Shopify is done at the file level, not the code change level. So any code changes you do in Shopify could be overwritten by the next incoming merge with changes from Webflow. You’re best to do all the changes in Webflow.
  4. All the Shopify apps work. And because you’re not uploading a new theme each time you make a change, you don’t have to keep uninstalling and reinstalling the apps.

Cheers,

Nigel

1 Like

Awesome. Maybe you’ve worked out the details of two-way synch/merge which I haven’t needed or worked out yet??

1 Like

I wish Nigel :wink: I’m sure we’ll get there on day soon though…

Do forms remain functional once hosted by Shopify? Getting ready to pull the trigger on this and our market is very demo-request/contact form oriented

Hi Brady,

Forms remain functional, but you will no doubt want to do more than the default form action once hosted in Shopify. For instance you might want to call a Zapier webhook to capture the form contents into Zapier where you can do anything you like with them, such as updating Hubspot contact information or creating a Shopify order. Then you might want to do some custom things to your form, like hiding the main form and showing a thank-you message (the Webform built-in one is pretty limited). Or you might want to redirect the form somewhere.

This bit of JS works well for us:

<script>
  $('#wf-form-Subscribe-Form').submit(function(e){
    // Suppress the form's default behaviour.
    e.preventDefault();
    $.ajax({ 
      // Submit the form contents to Zapier web hook.
      url: 'https://hooks.zapier.com/hooks/catch/sampleHookId/owcjpup/silent/',
      type: 'get',
      data:$('#wf-form-Subscribe-Form').serialize(),
      success:function(){
        // Redirect to specified url.
        location.replace("https://example.com/");
      }
    });
  });
</script>

You can see the redirect behaviour in action on this page: https://xialla.com/pages/info-kit. Here’s the exact code on that page (with our catch hook url disguised).

<script>
  $('#Infokit-Form').submit(function(e){
    e.preventDefault();
    $.ajax({ 
      url: 'https://hooks.zapier.com/hooks/catch/443334/o435343/silent/',
      type: 'get',
      data:$('#Infokit-Form').serialize(),
      success:function(){
        location.replace("/pages/info-kit-thank-you");
      }
    });
  });
</script>

Another example is the subscribe form on our home page. The following code doesn’t redirect after capturing the info. Instead it hides the form and shows a thank-you message.

<script>
/* Handle Subscribe form */ 
  
  $('#wf-form-Subscribe-Form').submit(function(e){
    e.preventDefault();
    $.ajax({ 
      url: 'https://hooks.zapier.com/hooks/catch/123456/owkkkup/silent/',
      type: 'get',
      data:$('#wf-form-Subscribe-Form').serialize(),
      success:function(){
        $('#subscribe-form-wrapper').css('display', 'none');
        $('#subscribe-form-thankyou').css('display', 'flex');
        /*location.replace("https://example.com/");*/
      }
    });
  });
</script>

I hope this helps a bit!

The good news is you can test the forms and the Javascript on the WF temp hosting before doing the port over to Shopify.

2 Likes

Wow this is a lot.
Hello all, new to WF, intermediate on Shopify. And can barely make a custom page in Shopify to mimic my homepage.

I do have a few affiliate sites I’m building in WF and this seems perfect for WF. But I have a customer that wants a new about us section in Shopify that connects to their blog post/blog and a few static pages. Beside some design details they want this Patagonia Stories page to be there new template. At least the first 4 sections: non-link video at top, 2 blog posts, feature static page, 4 blog posts. The Cleanest Line - Patagonia

I am almost finished with the WF design, but linking the blog/blog posts And static pages might be over my head. I think I understand the static page alittle bit but still, I’m not trying to mess anything up for this client.

Help from here would be amazing!!! Any one available to hire? I always learn the best once the first one is done.