I have a problem with the buy button code of Shopify

Hi everybody , I have a virtual shop with Webflow and Shopify, I never used the dynamic content, and use will implicate change all my page, for this reason I need use the new code of buy button of Shopify with the Embed Code.
The problem is that in the moment that I included this code the buy button appears below an other buy button and not below the respective product.

Attached the image of my problem, and I hope that anybody can help me!! :slight_smile:

Thanks for your attention.


Andrea Miranda

Hi @amiranda4 Could you please update your post with some more information so we can help you faster? Things like your read-only link really help us to help you faster :slight_smile:

How to share a read-only link:

Thanks in advance! :slight_smile:

Hi @Waldo, off course, this is my read only link of my page.


Thank’s for your attention.


Hi @amiranda4 it looks like you have some flexbox styles on your htlm class associated with your embedded buttons. Can you please try removing that class from your embed elements to see if it resolves the issue?

Hi @Waldo I eliminated all the styles of HTLM but the problem persist! I think that is a problem with the code of Shopify but I’m not sure.

i’m in the middle of trying to figure this out. i think i’m getting some where:

i have the layout as 3 columns, but shopify turns it into 3 rows…


YEEEEES!!! It is the problem… I don’t understand what’s going on!

i’m going to get some more help on this. from what i can gather from staring at the embed code is that there may be a way to split of the code so the shopify javascript doesn’t get called multiple times.

i’ll keep you posted

i got it working:

but… the implementation isn’t as pretty as before. I’ll post instructions soon

Thank’s I am pending for your video to solve my problem ! :slight_smile:

Here is what I did:

To get around the 5,000 character limit for the new shopify code, you’ll need to:

  1. copy your shopify embed code from shopify
  2. paste it into something like notepad, textedit or pastebin.com
  3. now cut (CMD + X or CTRL + X) all of the code between the tags
  4. go to http://www.minifier.org/ and paste your code in there
  5. click on minify
  6. copy that new compressed code
  7. paste that code back in between the tags inside of your notepad, textedit or pastebin.com
  8. copy all of that code and paste that into your Webflow embed component

basically you’re removing the unneeded spaces that shopify adds to the code.


do a CMD + F or CTRL + F in your browser to find id: and replace the ID with the ID dynamic field

on the same line, change the getElementById('') with the name dynamic field:

lastly (phew), change the div ID in the first line to the name dynamic field:

1 Like

I don’t know if this solved her problem ( I have the same one as well). I don’t think her content is in a dynamic list, rather it is just in a slider with three columns. Because of this, the Buy Button just stack undernearth each other.

My content is similar as it is just in a row with three columns that are all center-aligned. I want the buy button to be centered as well under each product. My site can be found here: http://resiliencenutrition.co/#Sign-Up

Do we have to use the dynamic list and content in order for this to work?

1 Like

its because of the div ID is the same for each embed. To make sure this doesn’t happen, i changed the div ID to the dynamic name field

Hi @PixelGeek - I have visited multiple threads related to this issue of the updated code preventing the Buy Button from appearing within my Webflow site.

While it says in the source code that the embed is there, the button is not appearing.


I’m not sure if many other people are having this issue, but help would be greatly appreciated!