Thanks a lot for this thread @NigelShaw
I didn’t see any info on displaying # of inventory in the Udesly documentation or on this post. Is it possible? How would you go about it?
Many eCom sites display a “only x available” message when stock is running low and I’d like to do that.
Hi Nigel,
First of all, thank you for this which seems to be the only validated solution on the web for now.
Premise:
The big problem now is that every time I make changes / updates to the design I not only have to upload the theme itself to Shopify every time (problem you solved with Git and ThemeKit) but I have to upload the assets one by one to the store Shopify (following the same path online store → actions → edit code → assets → add new asset.).
The question is:
Using Git and ThemeKit, I am able also to automate the loading of assets in Shopify?
(using a converted Shopify theme without the assets loaded on the Webflow Design Editor)
Thank you very much Nigel!
Hi Ambrogio,
You’re welcome. I’m glad it helps.
Regarding your question, the easiest way to load assets into Shopify is with the “theme deploy” command which will take a folder or file path parameter. Or it will push everything if you leave off the parameter. So you could just run “theme deploy assets/*” from your exported WF code folder. If you only want to deploy changed assets then you could set up git on that folder and automate it with script the same way I automated upload of the Udesly converted. By the way here’s a nice article on integrating automation with GitLab. I haven’t implemented it yet but I plan to.
Thanks Nigel! This has worked great for me so far except I am having trouble with the hero image being blurry. I read a bunch about the shopify compression algo but cant seem to get it to be crisp. I did notice that the hero image on your site is nice and crisp. Any insight is greatly appreciated.
Read only link - if it helps
No problem Eli. We use Photoshop to edit images and save out to JPG format with image quality set to 65 or 70%. That’s good compression to save a lot of image size, but leaves the image quality quite high. Once it gets ported to Shopify I don’t see any change from what we have in Webflow. Here’s our Webflow staging site so you can see: https://xialla7.webflow.io/. Our header images are 2100 x 1300 and with the JPG compression still only 286 KB. Here’s a link to our header image: Dropbox - Couple Under Covers.jpg - Simplify your life
Hope this helps!
Nigel
Thanks for your quick reply and help once again!
In between posting and your reply I actually figured out another method. I try to not use adobe so I wanted to avoid Ps. I mainly do interaction design so Figma is my tool of choice.
Anyway, the solution I found was to add attributes to the dynamic images in my theme sections. If you use the attribute “dimension=master” it will use the uploaded file and its original settings. This can be a detriment to site speed in the wrong hands of course. The Udesly docs show a vague example here
This seems a bit intimidating for a non-developer. Here’s my question: what sorts of customizations in the Theme in Shopify would you typically make? Could you handle everything 100% in Webflow to avoid the need for this Github fix? Also, do these services presented in this solution cost money?
Quick answers,
Udesly is a subscription so its a monthly charge, but if you only use it a bit you can cancel it if you arent doing constant updates.
The theme kit process is in the command line but its really easy if you just follow the steps. I wouldnt call myself a developer but it was easy for me.
The amount of customizations you need to do really depends on how you design and set up your site. Might be a small amount, might be a huge amount
If you have a standard ecommerce store in Shopify then you might find a Shopify theme that works for you, and all you need to do is upload your products, change maybe the colors and the logo, add some of your content and go live. In many cases you can do everything you need using the Shopify Theme admin tools and there’s no programming required. So as a non-developer, if a Shopify theme works for your business then that’s the easiest way to go.
You would typically need to do extra customizations if you want to make your site different from others with custom designs, or if you have a unique product that needs a lot of custom explanations. For instance we market a medical device and that doesn’t work so well in typical Shopify site theme that’s designed for a store selling shorts and pants or watches, for instance.
If you want to do extensive customizing to a Shopify site, beyond the customization you can to with the admin tools built into the theme, then you need to know how to program the three languages: HTML, Shopify Liquid and possibly JavaScript, or you need to hire someone to do that for you.
This is where Webflow comes in. With Webflow you can learn to do extensive customizations with only basic knowledge of HTML layouts, using a drag-drop interface.
However if you want to use full e-commerce functionality, Webflow may work for you, or it may not. Webflow has some e-commerce functionality but nothing like what Shopify has. So if you want the benefits of Webflow’s customization and the benefits of Shopify’s powerful e-commerce tools, then you might look at the method I use and that I’ve described in this thread.
I hope this helps. Glad to answer questions if you want to call me 613-606-9952.
Nigel
Thanks so much.
I am quite experienced with Webflow and I know a bit of HTML, CSS, Javascript, and even Liquid at the most basic level.
But I am not a web developer. Never used GIT.
I followed the steps and have the theme downloaded, but cannot figure out what is next. Once you get into the GIT steps I am completely lost. Maybe you can just clarify the steps? I have the folder for themekit.
Thanks so much!!!
First things first open up a new terminal window if you are on mac. On windows I cant remember what the application is called.
There are some commands that are ommited in the description. To switch to a folder in the command line you need to use “cd” which stands for change directory. for example:
your path may be different for example cd desktop/themekit
if your folder is on your desktop.
One thing I noticed while going through the process myself is that the command git switch did not work for me but git checkout did.
If you follow Nigels steps one by one you it should work.
Another thing that is missing from the steps above is that when you do finally turn on theme watch you need to add a flag to tell Shopify to do it anyway if you are updating a live theme so add --allow-live so you have theme watch --allow-live
hope this helps
I am struggling to understand Git I guess. I was trying to upload my theme. I think I screwed up and uploaded a whole bunch of files on my computer. Problem is – I don’t even know where to, which is scary. Now I am just trying to figure out where they went so I can delete those and get back to trying to upload the downloaded theme. If you have any advice it would be greatly appreciated.
Yeah git can be a bit confusing as it is an abstract way of interacting with a computer compared to a gui and it requires a bit more mental visualization by the user themselves.
Essentially what is happening is you are directly connected to shopify from your computer and when you use git you are comparing the files in your current directory to the files on Shopify.
So if you are if you are in your themekit folder in the terminal and you run theme watch it will compare whats already on shopify and what is in your local folder on your computer. If you were to run that from another folder I think it might just be like ‘hey this is all different’ and upload a bunch of unnecessary stuff.
Im not sure if thats what happened to you but it sounds like you may have been in the wrong directory when you were going through the process so make sure you are inside your theme kit folder before you start
I haven’t even made it to the watch step, lol. I’m still struggling with part one of getting the theme uploaded. These things are 100x easier for me on YouTube with visuals lol.
if you want a starter video to git I recommend this one Github Tutorial For Beginners - Github Basics for Mac or Windows & Source Control Basics - YouTube
not every bit is relevant to this process but the core concepts are the same.
Hope that helps!
Thank you! I appreciate the help!
First of all: @NigelShaw Thank you so much for all your writing on this topic on the forum. It’s exactly the info I was looking for.
I’m about to start a project for a company that is a ecommerce company that sells in different countries which really needs the shopify functionality. So I think I will go Nigel’s route (using webflow for frond-end development but then take It completely to shopify)
But I have 1 question: My client will (besides the shop) also need a good blogging/publishing system, where they also can add/embed products from the shop.
Does anyone know how the built-in blogging system in shopify is? Will this meet most of the blogging functionality? (categories, tagging, good SEO etc.)
Or do you advice to run the blog from webflow and the shop form shopify? (i’m worried about SEO, marketing tracking etc.)
Thanks in advance for taking the time to answer!
Hi Jarno,
You’re most welcome. I’m glad to be able to help.
You can have your cake and eat it too. Design the blog in Webflow and Udesly will convert it. Then Shopify will handle the SEO for you. Yes Shopify supports tags and categories. Also scheduled publishing, subscriptions, commenting and comment management etc. Be sure to understand how categories work. “Because of how Shopify is set up, there is no taxonomy feature for categories. Instead, they have provided publishers a way to create separate “Blogs” and add individual posts to those blogs when you’re publishing. While the concept is a little misleading, the ability to create “Blogs” is essentially the same thing as creating categories to organize your posts. Shopify will create a blog feed based on your blog category which will provide you, users, and search engines with an indexable URL.” (copied from this very good page on Shopify blogs).
There’s no need to worry about SEO. Shopify is a global powerhouse so their SEO is second to none. That said, good SEO depends mostly on the quality of the blog articles as I’m sure you know.
Hope this helps!
Nigel
If you want more info on how to set this up, let me know. We actually haven’t done it yet for our site. 
Thanks Nigel!
This is helpful. If I have more questions I will let you know.
gr. Jarno
Hi Nigel, have you run into Shopify giving you errors (Too many translation keys) when saving the en.default.json file? It seems that anything above 3k is rejected. When updating through your git method (working great btw 
) and viewing the site, translations are missing when said json file has too many items. Wondering if you’ve had a similar experience and how you got around it.
