UPDATED MAY 19
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:
- Edit in Webflow
- Export code
- Use Udesly Adapter to convert to Shopify theme
- 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 (https://shopify.github.io/themekit/)
- 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 the’ll work in Shopify.