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
