Webflow X Shopify - Not Buy Button but dynamic Checkout

Hi everyone!

Nice to join the Webflow community!

Do you know how this site integrated a dynamic payment button to Shopify Checkout?
https://www.nuraphone.com/

It seems to be not only a “simple” shopify buy button but an ecommerce webflow site that dynamically redirects the Webflow cart to the Shopify checkout.

I find this alternative great in terms of UI (we take advantage of all the webflow funnel but with the Shopify advantages).

Many thanks for replies,
BR,

Clément

:pencil2: EDIT : Since the publication of the post; the example store (nuraphone) seems to have switched completely to Shopify. The topic is still relevant though!

Hi. Trying to figure out the same thing. Did you find any answers?

If you output a shopify theme from the Udesly Adapter, you can use Webflow’s cart and components.

It seems that the site is hosted with Webflow and that there is a bridge between the Webflow SideCart and the Shopify Cart. Maybe the Shopify cart API?

Maybe it is indeed Udesly but I haven’t seen a similar UX…

@Clement_MURZEAU
You’re probably right about the Shopify cart API. With Udesly conversion I get a different result.

That extension is smart, I like it.

Did you find any answers? I’m curious about it

@ricndrs Still searching :grimacing:

Hi @Clement_MURZEAU

Is this what you are looking for?
It’s the Shopify buy button but with Webflow customisation?

Working examples.
This site pulls in everything from Shopify, images, price, title, description etc.

This site pulls in the product variant buttons

This site pulls in the product details and has the variant options all from Shopify.
https://www.whenindoubtlove.com/products/widl-bracelet

Other sites we have integrated the Shopify code into

This example pulls everything from Shopify (Carousel of images/Title, Price, Description)
https://piloti-f82a77.webflow.io/products/drift-midnight

Let me know if you would like to discuss some more chris@clickyclicks.co.uk

Hey @Chris_Waterhouse,

That is so cool! Well done :slight_smile:
The question is more how did you achieve this result?

Is it a :

  • Buy Button Shopify on webflow site?
  • Shopify checkout API on webflow site?
  • Shopify site with webflow theme (via Udesly for example ?)
  • Other solution ?

Thanks in advance for your feedback,

Hey @Clement_MURZEAU,

It’s using the Shopify Buy Button API and Jquery to inject html rather than using an iframe like the normal button does. So Shopify Buy Button API on a Webflow site.

This not only allows visual customisation from the webflow dashboard but also allows you to track the buttons using GTM.

Happy to arrange a call to show you around and explain in a bit more detail how it works. :grinning:

2 Likes

Hi Chris, would love to know more about this method. My email is steve@fruityllama.co.uk - be great to have a chat!

Hey @Chris_Waterhouse

It looks so cool! I see you managed to customize the side-cart too!

Maybe; if you don’t mind continuing a bit on the forum; I have a few questions that others might be interested in.

  • Which webflow plan do you use for the front ?
    Static / CMS / E-Com? Curious to know if you use some pre-built feature from webflow.

  • Do you have a link to the Buy Button API doc?
    Maybe this : https://shopify.github.io/buy-button-js/ ?

I must admit that i want to keep going with webflow but really wondering between a specialization on :

  1. Webflow hosting (FO) + Shopify API (BO)
  2. Webflow theme on Shopify (FO & BO)

One thing that bothers me about option 1 is that it seems complicated to integrate a client space (maybe on option 2 too for that matter…). Did you manage to solve this problem?

Many thanks,
:pray:t2:

No problem.

For the frontend there is no need for the eCommerce plan and depending on how you want to use the code you can opt for Static or CMS.

With the cms option you can add the product id (XXXXXXXXXX) from Shopify and then use it to display the button in collection loops. If you go for the static option then you have to add a html element in each place you want the button to display.

This keeps everything in Webflow including the visual to adapt the css for the cart, toggle and product elements (Images/Description/Title/Price/Variant options/Button). The checkout process happens in Shopify so allows you to use all the backend crm applications.

In regards to where we started you can get a lot of the code from here: GitHub - Shopify/buy-button-js: BuyButton.js is a highly customizable UI library for adding ecommerce functionality to any website. however we have adapted this to make it lightweight and customisable.

Regarding your options using the CMS would allow an easy way for the client to add new products and the code is designed to be self-managed from the frontend (CMS) rather than having to deal with code.

Hope that helps.

2 Likes

@Fruity_Llama dropped you an email earlier today.

Hey Chris, Shoot me an email at rik@drtraffic.nl please! Would love to talk about this

Hey all, i’m not a developer and am seeking someone to integrate this on my site (currently about to be built). keen to hear from anyone who is able to do it (zoe@fredahealth.com). Cheers!

1 Like

Hi Chris, I’m trying to make this work, but I’m kinda struggling with the integration of shopify - I have only tried the buy button before and now I have cms-webflow page that client wants a checkout/cart option on. All products are in webflow (80 items) - and the cms collection page (with form) I am trying to replace with shopify product + add to cart button (+checkout)…bbbuuutt afte several hours I’m reaching out to you, hoping that you will help me out on this (fingers crossed)…
Here is the project:
Webflow - LangArtwork

Hope you have time to help me out, Chris - it is highly appreciated :slight_smile:

Have a wonderful day, best regards from Louise, Denmark

Hi Louise,

Feel free to drop me a message and we can book a call to go through. My email address is chris@clickyclicks.co.uk

Hey folks,

I’ve been across nuraphones general tech stack and it works much like some other headless Shopify websites do, with some key differences though.

You can load the Shopify Buy SDK into the Webflow site with a few key pieces of info including an API key from Shopify’s storefront API and the Shopify store domain e.g. my-store.myshopify.com. Info on Shopify Buy SDK here (this is not the same thing as Shopify’s buy button): JS Buy SDK

Generally speaking, the Shopify Buy SDK API is used to load in the required cart functionality. Users can then manage their carts on the Webflow side of things as you’re able to generate a unique cart/checkout ID for each users cart. Product variants can then be added to cart via Shopify’s /cart/add.js, updated via /cart/update.js, and removed via /cart/change.js. More on Shopify’s Cart API that the Buy SDK affords you here: Cart API reference

You could go as far as building all the shopping related components in React.js including product forms, cart, etc. You’d want all your add, update, change cart functions to exist as a global provider that is available to every page on the Webflow site - meaning you’d be able to access all of your cart functions from anywhere on site!

In order to make this a scalable solution for most ecom merchants, you’ll also want to build an array of serverless functions to handle things such as:

  • Account registration
  • Account > past and present order information, addresses etc
  • Wishlist (could find an app with a decent API for this though)
    The reason we’d want these to be serverless is to avoid exposing the Shopify admin API to the frontend of the site. E.g. Shopify account registration requires write access.

Feel free to drop me a line at hi@alexiversen if you have anymore questions.

Building a template for this has been in my pipeline for some time now although you know how freelance life gets!