I am building an eCommerce website, and for some other reasons I can’t use Webflow eCommerce functionality so i’m only working with Webflow for the interface and as for the eCommerce part i’m using Shopify’s BuyButton.
The problem I face for the moment is on the homepage, where I have a CMS Collection section, when I add an embed element, of course it applies on all items from the CMS collection, I paste the code but the problem is that the buy button shows all of them on the very first item of the collection, one under the other, and not one button for each item.
I’m not sure what’s the reason, i’m thinking maybe is the code?
I’ll post here some images and a preview link of the website.
It looks like you’ll need different code for each product in the HTML embeds, a div is being created and adding the buttons to that div but it’s being added to the first one only because it uses an ID.
You should get different code for each product from Shopify and add this to each HTML embed.
Unfortunately, I added the shopify product ID to each CMS item and i replaced the ID from the HTML code with a CMS item (that takes the Product ID from shopify), but the buttons still being one under the another in the first column only.
Now the buttons work good, each button adds a different product (the ID represents the product, ofc).
Do you know why its still all one under the another and only in the first column?
Would you be able to try changing the product-component to use the ID field? Like so:
This will mean that your divs will be giving different IDs and will sit within their own card. After that, you’ll just need to add an IDi number to the ‘Windows 11 Pro Retail’ CMS item and it should display all three separately!
