Shopify Buy Button wrong align

Hello guys!

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.

Would appreciate some help to fix this problem.

Here is the preview of the website published.
https://licenso.webflow.io/

Thank you!


Here is my site Read-Only: Webflow - Licenso

Hi @Licenso,

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.

Hope this helps!

1 Like

Hello,

Thank you for the answer.

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? :frowning:

Thank you!

Hi @Licenso ,

Would you be able to try changing the product-component to use the ID field? Like so:

Shared with CloudApp

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!

Let me know if you get stuck and I’ll help out.

1 Like

Thank you very much!

It worked, but now I have another small problem.

This buttons are on the homepage, and on the same homepage i have 2 sections, both of them contain the same CMS list.

And I have the same problem now but only where the CMS item repeats itself, you can check it on the live website.

How could I solve this problem so that the button stay in his own div even if it’s the same CMS item?

Thank you!

Hi @Licenso,

If you edit the HTML embed in there Office, oriunde & oricând section:

Shared with CloudApp

And just add a 1 after the ID like so:

Example:
Shared with CloudApp

It should fix the issue! Let me know how you go :smiley:

1 Like