Could developing in Webflow then exporting to Shopify be the best of both worlds?
<webflow>Webflow<webflow>; a no-code web development tool.
<shopify>Shopify<shopify>; a feature-rich eCommerce platform.
Unlikely partners in the fight for the optimal end-to-end eCommerce solution?
But first, a quick intro: My name is <underline>Patrick<underline>. I’m a web designer/developer from Melbourne AUS. I specialise in building custom eCommerce solutions that are as unique as the product they champion. My design philosophy is <colorful>‘build it well, and they will come’<colorful>
As a self-employed service provider my existence revolves around one purpose: to find the best solution for each of my clients. I’m always on the hunt for better, more efficient ways to meet project briefs and blow client expectations away.
And discovering <webflow>Webflow<webflow> was my greatest discovery to this date…
At its most fundamental level, <webflow>Webflow<webflow> acts to lower the barrier for entry in the custom web development sphere. No longer is it necessary for a designer to learn traditional coding languages just to get their idea from paper to web.
For a designer to value a tool, like a website building platform, it has to enable their creativity. This is what <webflow>Webflow<webflow> does so right over other website building platforms like Squarespace, Wordpress & <shopify>Shopify<shopify> itself. <webflow>Webflow<webflow> just <highlight>gets out of the damn way<highlight> so the designer can do their thing.
Want to build a custom nav bar that animates from the bottom of the page?
Got a cool idea for an offset grid layout that scales with the browser?
Progress bar that fills while scrolling a section?
You guessed it, no code? No problem!
Just like <webflow>Webflow<webflow>, template-based platforms like Squarespace and Wordpress also acted to lower the barrier of entry for web development. The only problem: they lowered the bar so far they sacrificed the creative freedom of their user base. This goes to the core of what a ‘template’ is; a system of rules to build from.
Not exactly what you want if your trying to build a unique brand around your product from the ground up!
So from the perspective of an eCommerce web designer; suddenly I went from building same-old template stores to eye-catching, on-brand e-com platforms.
But then the problems started to roll in...
Building a sustainable web design and development service for eCommerce businesses is difficult at the best of times. And adopting <webflow>Webflow<webflow> Ecommerce came with it’s own unique set of problems. I could build beautiful, custom websites sure. But I couldn’t provide an ever growing list of eCommerce functionality that my clients needed to sell effectively.
One or two features I could manage without. And it should be said, <webflow>Webflow<webflow> does a great job of opening up avenues for third-parties applications to fill in holes in it’s functionality.
But having only launched in 2019, <webflow>Webflow<webflow> Ecommerce has a long way to catch up with the other players in the game.
Here is a list of Ecommerce features <webflow>Webflow<webflow> does NOT support natively:
Not exactly a short list. And this is only the problems I’ve ran into myself since picking up the platform in 2019.
It’s hard to mention eCommerce without talking about Shopify and with good reason. Their dominance over the market isn’t unfounded. Just check out this features overview page. At a glance you can see just how many boxes it ticks that <webflow>Webflow<webflow> can’t (yet).
Not to mention the adoption rate <shopify>Shopify<shopify> boasts. The brand is almost synonymous with eCommerce. Nearly every client I deal with is either coming from <shopify>Shopify<shopify> or started out with the platform.
But just like <webflow>Webflow<webflow>, <shopify>Shopify<shopify> has it’s own set of limitations:
A third party adapter designed to bridge the gap between the design autonomy of <webflow>Webflow<webflow> and the ecommerce functionality of <shopify>Shopify<shopify>.
All without a single line of code.
Udesly have created a suite of adapters for transferring your <webflow>Webflow<webflow> project to platforms like: Wordpress, <shopify>Shopify<shopify>, Jamstack or Ghost.
This is the magic sauce that gave my pretty designs an actual brain.
Giving custom attributes to elements in <webflow>Webflow<webflow> (no code necessary!) we are able to flag what is and what isn't important to the eCommerce workflow.
And so on until all necessary elements are flagged.
Then using <webflow>Webflow's<webflow> code export functionality (paid plan only) we can feed our raw code through the Udesly Adapter which spits out a fully functioning Shopify Template in the Liquid coding language.
Now we have a <webflow>Webflow<webflow> designed website held up by <shopify>Shopify's<shopify> CMS and eCommerce functionality.
Ah yes, the catch!
No workflow is perfect.
While I've had many satisfied customers using this approach here are a few drawbacks I've noticed:
Ultimately, we pay the price in time when using third party solutions to make up for the shortcomings of our core tools. But, as a <webflow>Webflow user<webflow>, I already save a TON of time during development anyway!
So overall, this is a great solution to bring a depth of eCommerce functionality to your <webflow>Webflow<webflow> eCommerce projects.