Hi all,
I have integrated a buy button from Shopify into my Webflow project (HTML Embed).
The problem is that I want to keep the button customizable in Webflow.
So I’ve tried to create in new buy button and add a custom javascript to trigger the Shopify buy button. It works but the right cart doesn’t show up when I add a product.
Any advice please?
Thanks in advance!
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
I did something similar on this site-
https://www.medisure.co.nz/product-category/alcadinone-r-pdo
I did not use a custom-styled button, however I expect the Shopify button configuration is nearly identical. In each button script, there is a large configuration chunk . In my case, my Shopify buttons are generated by a Webflow Collection List, so an HTML Embed element contains my button code.
If you’re getting the wrong product, it means you likely have the wrong Shopify product ID in that configuration. Here’s a screen cap of that code part, with the locations I embedded the ShopifyID from my CMS collection.
In the default Shopify button, there is also a DIV at the top of this Embed, which needs a matching HTML ID. I’d check that as well- your buttons may all be executing the same “add this product” code. You can see I’ve embedded the ShopifyID into the button id, to ensure that each button is connected to the right script.
Note that if you have a lot of products in Shopify ( I have about 200 ), it’s a bit of a pain to extract the IDs. They don’t exist in a standard Shopify CSV export, but there are some add-ons that can do it, and you probably only need it as a one-off operation.
If your client will be creating/removing products in Shopify regularly, I’d setup automation like Zapier to keep any CMS representations in-sync.
Overall, there are some gotchas, but I quite liked Shopify’s integration options and it was much easier for my clients to use, as well as their logistics/delivery agent. It’s cheaper, too.