Connecting Shopify backend to a Webflow frontend can be done in a couple of ways, depending on where you’ve started, how many products you have, and …
Option 1: Adding products to Webflow with Buy Button
Shopify Integration | Webflow University
With Dynamic Embeds, you can add products from your Shopify account to your Webflow sites using an embedded Shopify widget.
https://university.webflow.com/integrations/shopify
TLDR; Manually add products into Webflow as a CMS collection, then use the Buy Button channel to embed button-only buy buttons.
Difficulty: Easy (relative to the rest of the options); would be extra useful if you know how to read Javascript and write CSS, if you want to tweak any styling.
Pros
-
You can design the products any way you like
-
Easy to implement if you don’t care for slide out cart functionality
-
No need to manage the code to design the buttons, you can use the Buy Button channel on Shopify
Cons
-
You have to manually match up the design of your buttons on Shopify — you have to tweak the code to show any button outlines
-
No flexibility on what the cart looks like (it will remain a tag on the middle right of the screen)
-
The cart tag will not appear on other parts of the website
-
No product details page
-
Products have to be manually added twice: once in Shopify (to hook it up to Webflow) and again on Webflow as a CMS item
⭐️ Option 2: Using Buy Button SDK/buybutton.js to customize everything
Important
Currently investigating, so far it’s exactly what I’m looking to do without messing around with the backend completely
https://www.youtube.com/watch?v=wsKDWvHW4bY
TLDR; build the javascript code from scratch to design the commerce experience
Pros
- Full customization using javascript, the language that the Buy Button is already built with
- Everything comes for free and is templated
- Potentially the cheapest route for the client if the client already has an existing website — not sure if the buy button is still made available to the starter plan, would be clutch if yes
Cons
-
I need to be more proficient in Javascript
Option 3: Designing the website in Webflow then exporting into a Shopify theme
Udesly: Shopify, WordPress, Jamstack & Ghost Themes with Webflow!
Use Webflow to design your project and convert it in seconds with Udesly to create themes for Shopify, WordPress, Jamstack or Ghost.
https://www.udesly.com/
TLDR; Use Webflow to design the commerce experience (cart, product, etc), then use Udesly to export the code as a theme you can upload to Shopify
Important
I haven’t personally used this yet, so my pros and cons are speculative, but it sounds like an easy win for people who don’t want to switch to Webflow and want to stay in Shopify Admin.
Pros
-
Full customization for everything: cart, product, collections, home (obviously not checkout)
-
Client stays in the Shopify Admin and doesn’t have to worry about using Webflow to make changes
-
Cheapest route for the client — Client doesn’t have to worry about being charged extra for Shopify and Webflow plans
-
It will also import any CMS data you might already have in Webflow, including posts, products, collections — which I wonder might get messy if you already have some of the products in Shopify
Cons
-
Freelancer has to pay for the Udesly annual plan, otherwise you get a badge that says “created by Udesly” on the finished product
-
The website will be hardcoded so the client will not be able to make any design changes to the website. Any changes to be made would be made in Webflow then needs to be re-exported
-
I think you might need to be on an ecommerce plan for this to work TBD (it just says ecommerce elements, not the ecommerce plan itself)
-
Apps on Shopify will have to be added via Liquid, I think
-
Some additional mapping needs to happen in the backend using custom attributes; might be tougher for bigger ecommerce sites
Other notes
This option is throwing the web design back into Shopify so that the client doesn’t have to worry about having to add inventory twice (once in Shopify and again in Webflow) like you would in the first option. It might give the client the assumption that you’d be able to make changes to the web design, which I don’t think would be the case. Any changes to be made on the design (not necessarily the products, I don’t think, will have to be done in Webflow. TBD on whether it breaks if a new product/collection is made in Shopify.
I THINK using custom attributes can make sections for the theme editor:
Sections | General | Shopify
Sections are modular, customizable elements of a page, which can have specific functions.
https://university.udesly.com/shopify/general/sections#text
Resources
| Name | Description | URL |
|---|---|---|
| Shopify x Webflow integration | How to embed Shopify Buy Button into Webflow CMS | https://university.webflow.com/integrations/shopify |
| Using Javascript to add ecommerce to any website | Shopify resource that walks through buybutton.js | https://www.youtube.com/watch?v=wsKDWvHW4bY |