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.
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.
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
Have a wonderful day, best regards from Louise, Denmark
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 > 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!