get in touch
June 2, 2021

Webflow & Shopify: The Best No-Code eCommerce Solution?

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? 


Let’s discuss!


     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…

What <webflow>Webflow<webflow> eCommerce does so <highlight>right<highlight>

     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? 

Done

Got a cool idea for an offset grid layout that scales with the browser?

Sure thing!

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...

The <highlight>limitations<highlight> of <webflow>Webflow<webflow> eCommerce

     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.

BIG PROBLEMO!

     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:

  • Recurring billing (Subscriptions)
  • Member/Customer Logins and Dashboard
  • Real-time product filtering and sorting
  • Smart product recommendations
  • AfterPay or Payment Alternatives to Stripe
  • Accept Cash on Delivery payments
  • Multiple currency support
  • Native appointment booking/scheduling
  • ‘Store Pick Up’ checkout option
  • Gift voucher support
  • Live Shipping Rates
  • Pre-Orders
  • Abandoned Cart Recapture
  • Volume/Package Discounts

     Not exactly a short list. And this is only the problems I’ve ran into myself since picking up the platform in 2019.

<shopify>Shopify<shopify> to the rescue

     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:

  • Only 9 free templates to choose from
  • Only 70 paid templates @ $160 USD
  • Coding proficiencies are required to adequately customise the templates.
  • Must learn unique coding language 'Liquid'
  • SEO options are limited
  • CMS is limited to products and a blog

Udesly: The Bridge Between Worlds

     Enter Udesly

     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.

Hallelujah!

      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.

How does it work?

     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.

  • 'Add to Cart' button = custom attribute
  • 'Main Product Image' = custom attribute
  • 'Product Gallery' = custom attribute
  • 'Checkout Page' = custom attribute

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.

Tada!

     Now we have a <webflow>Webflow<webflow> designed website held up by <shopify>Shopify's<shopify> CMS and eCommerce functionality.

What's the catch?

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:

  • The overall workflow is longer using two platforms instead of one
  • Making updates is a pain (requires re-exporting and re-uploading the theme)
  • If Webflow eCommerce had <shopify>Shopify's<shopify> functionality, this would become redundant

     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.

Highly recommend!

Webflow & Shopify

This is some text inside of a div block.

Need help building your eCommerce Platform?

Feel free to reach out and I'll see how I can help

GET IN TOUCH