Streaming live at 10am (PST)

Connecting Webflow and Shopify with Zapier

Hi,

I previously asked about the possibility to run Webflow and Shopify together to create an optimized ecommerce experience for both the customer and the admin. I love Webflow customization possibilities but the lack of e-commerce features are a real concern for me. The most important missing feature is the ability to get offline orders or the ability to make manual orders.

The idea is to supercharge the Webflow sales process with the power of Shopify (without all the drawbacks of it).

I found out that Zapier offers a whole range of interactions between Webflow and Shopify.

Among them, there are interactions that allow to create an order on Shopify when an order is created on Webflow.

That interaction would help me to transfer the orders on Shopify and manage them there. If i works as intended, that would be the way in to Shopify from Webflow. Great !

The issue is there is apparently no way to make the way back. There is a “updated order” interaction but I assume it’s only dealing with what is inside an order, not his status. So I assume Shopify doesn’t allow the get order status send to Webflow to trigger automated customer mails. Shame.

So is there anyone that worked with interaction between Webflow and Shopify ? What works ? What’s not ?

also looking into this, first try auto syncing product, it seems that mapping the correct fields is not straight forward

I’m interested in this also. Looking into it now.

koo! For now I’m sticking to shopify button integration, for a small amount of items it’s doable, and through shopify there’s a lot more payment gateway integration for EU

Also trying zoho flow which is in webflow beta integration but it also lack’s advanced access to the cms fields, but sounds promising for zoho users.

Hi Good news!!! I’ve been in touch with Blendr (blendr.io) and I asked them to build a WF connector. They built one in just a day! You can try it with a free account now. It has basic functionality only but within a few days more it should have orders functionality. I also asked them to add orders functionality to their Shopify connector. I’ll keep you posted.

Update: This turned out to be a dead end. See my posts below…

What is Blendr mate ?

Hi Nigel, I’m very interested in this, trying to solve the problem discussed in this thread. Is Blendr a company that builds customized integrations to solve problems where none exist? You’re paying them to build an integration for you? How is this going?

UPDATE MAY 19 2020: SEE Connecting Webflow and Shopify with Udesly, Git and ThemeKit FOR DETAILS. END UPDATE.

Hi Gaynes and everyone. Blendr is very responsive. They are doing everything they can to help, including 24 hour turnaround for my requests. However we are going with a different solution. We discovered Udesly’s WF -> Shopify adapter (https://www.udesly.com/webflow-to-shopify/) and frankly it’s amazing. It allows you to code in Webflow and host in Shopify. To see it in action, here’s our original site in Webflow: www.xialla.com. And here’s our converted site in progress on Shopify www.clubxialla.com. (temp URL that will change to xialla.com when we’re ready to go live on Shopify). Not everything is finished but you can get a sense of the accuracy of the conversion. Note that we’ve updated some fonts and look and feel as we work. The actual site that we’re using to convert from is at xialla-5.webflow.io. Note that the links there don’t all work when live because they’re the Shopify-specific links.

One thing I was worried about was whether the adapter was sort of a one-shot deal. I can say that it is definitely not. You can set everything up in WF, then run the adapter which takes a total of 2 minutes, and your Shopify site is ready. Then if you edit in WF you can update your site again in just a couple of minutes. Since it involves a theme update on each change, you do need to modify the checkout changes in Shopify each time (logo, colors) but this takes just a second.

I’m checking with Udesly to see if there’s a way to update only changed theme files between updates. If that’s possible then it would be even more amazing and it would reduce the update time to about a minute.

Ping me if you need any help with this. So far I highly recommend it and can’t say enough about the magic that Udesly has worked with this adapter. It really does open the door to development in WF while not losing the awesome infrastructure and developer community of Shopify.

To answer more directly about Blendr… keep in mind with APIs that it’s much faster and easier for a company to “get” an API endpoint (i.e. WF order) than it is to “put” the same or similar endpoint (i.e. Shopify order). In the get, the returned object is whatever JSON the API sends back. But in the put, the API has to explicitly map to the fields by building the correct JSON to send. So what I noticed about the Blendr widgets is that it’s easy to get a complete WF order, customer etc, but when I went to put (push) the order through to Shopify, the widget (the call them blends) was missing a lot of the Shopify order fields, and the structure was not intuitive. It didn’t seem to map easily to the Shopify API docs. Blendr did say they would work on completing it right away, but I’m not sure of the status.

Udesly looks good but I envisioned two major drawbacks when looking for the best solution to connect Webflow to Shopify.

First, I was not sure that the process of changing something on the site would be easy. For instance, if I need to change a section in my site in Webflow, I understood I would need to run the entire Udesly process to get my site updated on Shopify. With potentially some issues each time or rework on the existing site.

Second, Webflow is great for customize everything on a site including the checkout experience. Shopify allows to customize the checkout but through code. Using Webflow is obviously motivated to get rid of the code side. So I thought I would either need to code for a custom made checkout or loose that customization on the Shopify side. Not great.

My initial plan was to take the best of Webflow and Shopify. Webflow is great to create sites but can’t compete on the sale managements sales. Shopify on the other hand is limited for the site design (without any code capabilities) while being crazy good at managing sales. The idea is to make both of them working together.

Zapier allows that connexions, theoretically. There are Zaps pushing data back and forth between Webflow and Zapier. It seems really likely that pushing order from Webflow to Shopify can be made easily. It remains to be seen if these orders can be updated along the fulfillment process from Shopify to Webflow to keep it organized and up to date.

Can you tell me if things like Dynamic Style Settings carry over to Shopify? I’m currently tossing up whether to build in Webflow and connect with foxy.io or to Shopify via Udesly. One of the key things I’d like to be able to do is style a product page’s background colour and font colour based on colours set within Webflow’s CMS or Product data

1 Like

UPDATE MAY 19 2020: SEE Connecting Webflow and Shopify with Udesly, Git and ThemeKit FOR DETAILS. END UPDATE.

Hi Martin,

The point you make about having to rework the Shopify site after updates and the running of the entire process with each update as a good one. That was my first concern. I was worried that I would end up having to make changes in Shopify and then lose the ability to update continuously from WebFlow. So far that doesn’t seem to be the case. The update from WebFlow to Shopify literally takes two minutes. Sure it’s not as fast as hitting the publish button and WebFlow, but even if you’re doing half a dozen updates a day it’s still really nothing to slow you down. And once the site gets stable and you’re doing maybe one or two updates a day, then it’s completely manageable. As well, I haven’t yet set up source code management for Shopify, but when that’s set up the update process should be even smoother because instead of uploading the entire theme (that Udesly creates) to Shopify each time, we should be able to just unzip it into the source code working folder (automatically) and then post the updates to the theme.

Customizing the Shopify checkout has positives and negatives: The positive is yes you can have your own look and feel. The negative is that the Shopify checkout is very trusted and well known. When people hit it, they feel it’s trustworthy. This is one of the main “brilliant things” that Shopify did, in my opinion. By providing a standardized checkout look and feel they give every little startup a sense of strong trust in the checkout. We are still in the startup phase, so we are using the Shopify checkout to get exactly that sense of trust. When companies get big enough that they are trusted, it makes more sense to customize the Shopify checkout. You can get that ability to customize the checkout (and other features) by upgrading to the Plus plan at $2K/mo CAD.

Regarding Zapier, we had exactly the same idea; create orders in Webflow and send them through to Shopify. There are a few problems with that. The first problem is similar to Blendr; the Zaps are not complete and there’s no indication if they ever will be complete. The main problem is with the order details, but there are other issues with the Zaps. The other issue is with the payment processing. Should you process payments through WF or Shopify? If you process payments through WF then your Shopify will be accumulating orders without being connected to the payment processor. You lose a lot of the benefit of having the orders in Shopify, like being able to cancel an order or do partial refunds in Shopify and have the transaction flow through to the payment processor. You also lose the benefit of cost saving you can get by using Shopify payments for processing. On the other hand, you could process payments through Shopify. But then you lose the ability to enable the customer to log into your WF site and see transaction history (payments, refunds etc.) because you’ll be doing the refunds through the Shopify admin.

Another option to keep in mind is what we’re currently doing until we have the Shopify site ready to go live. We’re using the Shopify Add to Cart button embedded in the WF store. You can see this here: https://www.xialla.com/product/xialla. It works smoothly, but there are a couple of things we don’t like about it. The main problem is that on the desktop it opens a popup checkout window. The other problem is the cart style isn’t in keeping with the rest of the site. For these two reasons, I suspect we lose 20% additional customers in the checkout process.

I hope this helps you. I’ll post here again when I set up the source code management for Shopify.

This is a very interesting topic. Following along closely.

Would another potential solution be to have a webflow site for everything except the ecommerce bit, then have a subdomain that points directly to the shopify ‘shop’ page.?

1 Like

Hi Alexander,

Dynamic style settings don’t carry over to Shopify. None of the CMS carries over. But in Shopify dynamic styles are easy with their Liquid language. You would go to the Shopify site, write and test your Liquid code, then when it’s working embed it in the WF site so that it’s maintained through the conversion process. Shopify doesn’t have a CMS system, but Shopify has advanced tooling for managing JSON. So you can store your data on Google Sheets for instance, and get it as JSON any number of ways, like this: https://www.freecodecamp.org/news/cjn-google-sheets-as-json-endpoint/, then access it anywhere in the Shopify site. Alternatively, you can keep the data in the WF CMS so that you have the great design experience, and you can get it as JSON directly from WF via the WF API. https://www.freecodecamp.org/news/cjn-google-sheets-as-json-endpoint/. In Shopify the WF collection bindings wouldn’t automatically work, so you’d connect them by adding attributes like this everywhere you have a WF binding: liquid:object={expression} (see the Udesly docs here: https://docs.udesly.com/shopify-liquid-elements). The {expression} would call a function in your code to get the required object from the JSON.

To dig deeper, my need is quite simple.

I make 80% of my sales online and could use Webflow e-commerce features alone. Despite the lack of user accounts ans some other stuffs, I would be happy with what’s offered so far.

But for the last 20%, I would have a problem. Those sales are initiated offline but finalized online, on my site. That occurs on fair and on third party concept stores across the world. My clients place their orders at that moment only to pay it afterward when at home.

Webflow doesn’t offer the ability to deal with POS or even create orders manually for a third party. Shopify does. Here is the main reason I need Shopify.

The tricky part is to make Webflow and Shopify work together seamlessly. Zapier offers connexions but I am aware there are some troubles with data shared. I didn’t tried by myself for now though.

To avoid complexity and troubles, I thought I would only use Shopify to manage my sales. The idea is to get order through Webflow, getting paid through their platform and then switching to Shopify to handle the fulfillment process, the emailing process, the shipping, etc. If I can send back data to Webflow during this process, fine. If not, the idea is to leave Webflow “blind” until the end of the process sending back a “order done” information. The only drawback of that scenario is when I need to refund an order because the managing platform is not the one that deal with payments.

I have studied all the possibilities from using the embed Shopify “Buy Button” to Udesly, and that Zapier solution. Since I need a fully customized website, I chose the Zapier solution until further notice.

It would be interested to see the cost side of these solution too. Both requires to spend money on the Webflow, a third party tool and Shopify with different amount for each solution. Not sure which one is the best costs-wise.

Yes. We did that for our first sales. It works well but then you need to be able to customize the shop pages to your liking which requires knowledge of Shopify. As well, once you’re in the shop, the user expects to still see the look and feel of your site, with menus, footers, etc. So you have to recreate the menus in Shopify, or at least some of them, set up the links etc. The other problem is the cross-domain tracking. Your ad campaigns send buyers to your WF site but they check out on the Shopify site. The cross-domain conversion tracking gets tricky and conversion tracking is important for many things, like Google to be able to optimize your ad campaigns.

Hi Martin,

My only advice would be to ensure you can make Zapier work before you invest too much time. Try a WF to Shopify Zap and I think you’ll find that it’s a long way from working. I checked with Zapier support to make sure I wasn’t missing anything and here’s what they replied:

ZAPIER SUPPORT REPLY RE WEBFLOW ZAP

"Hi Nigel,

Thanks for writing in! Unfortunately, the issue here is that Webflow is sending us those New Order fields in a hard-to-use format. It’s not actually Line Items, so we don’t have a good way of parsing it, even using the Formatter. The biggest issue is that it’s going to have a variable number of lines when you have more than one item purchases, so even splitting it on Line Breaks means you’re going to have different numbers of items, and then mapping them becomes a crapshoot.

We’re always looking for ways to make our integrations more powerful and it sounds like better line items from Webflow could be really useful for others as well, so much so that it’s already one of the top feature requests for this app. I’ve added your email address as another vote for this addition. I don’t have an ETA of when or if this will happen, but we will definitely email you if it does become a reality.

Sorry I couldn’t give you better news here! Happy to answer any questions you might have about this or anything else. Thanks!"

END OF ZAPIER SUPPORT REPLY

So they basically say that Webflow data formatting is bad and that’s why their Zaps can’t work properly, I am right ?

Their answer seams to say that is never working correctly, which is a bit disappointing. Did you actually tried ? Did you asked Webflow about it ?

I understand Webflow don’t what to makes things easy to leave their platform but since they are miles away from Shopify features…

Hey Martin,

  1. Yes you’re right partly. But even if WF had a good Zap, the Shopify Zap is also missing many required features.
  2. Yes we tried it. No I didn’t ask WF about it because WF (wisely) doesn’t ever provide info about software release dates so there’s no point, and also because we saw that the Shopify Zap is not complete either.
  3. Yes, thankfully Udesly has what seems like a great solution.

Well, I’ll tried by myself and surely reconsider Udesly…