Multiple Shopify “Buy Button” embeds are bunched together

Design help Custom code
1

Hi!

I followed the recently updated tutorial here: Embed Shopify products | Webflow University

and placed two buy buttons (red) for the same product on a dynamic collection page several scrolls apart. Here’s the read-only link:

https://preview.webflow.com/preview/chicken-saloon?preview=79213d230c917037d4c84b42587802c0

Taking a look at the “Products Template” dynamic collection page, the first buy button is embedded near the top of the page here:

1278×1448 1.75 MB

and the second is embedded near the bottom of the page here:

1278×923 1.49 MB

But after I embed, the published site bunches the two buttons together where the first button was embedded:

1435×1600 2.35 MB

and leaves the second placement blank:

1280×784 1.51 MB

The two buy buttons are identical code. They add the same product to the cart. The buttons function properly, but just aren’t placed correctly.

Any ideas?

Thanks!

1 Like
2

I’m having the same issue. Any update on this?

3

Hello,

I had the same issues it seems like there’s some bug when it comes to two buy buttons with identical code

I had to make the same product twice in Shopify, not ideal but got it working

4

Hi @highfives.
Don’t want to highjack this thread, but I’ve been following it for a bit (along with other Shopify related posts) and it seems there are more and more issues coming up with their embeddable purchase buttons.

Just wanted to share this link with you: Webflow | Foxy.io Add purchase buttons just like you do with Shopify except that everything can be managed in Webflow (and no bug headaches). :slight_smile:

Thanks,
Josh

1 Like
5

@foxy, thanks for the info and link.

From what I’ve seen, I’m not a huge fan of the checkout design with Foxy. Also, I only have 2 products to sell and $20/month is high for that. Do you offer smaller plans?

1 Like
6

Hi @novell17.
Really appreciate your feedback. All Foxy related templates (cart, checkout, receipt, emails) can be completely customized with custom html, css, and js. Message me and I can send you some unique examples.

For pricing, we don’t have a lower priced tier but if you pay annually ($180/yr), the price averages to $15/mo. Not to mention our 10% discount for non-profits and 15% recurring commission for any clients you start a paid subscription for. Also, we’ve been discussing a transaction fee based plan with no monthly charge, but there is nothing concrete yet.

Shopify Lite’s pricing is definitely appealing, but if it’s not working as it should in your Webflow website, how much time and money is that costing you? Sometimes it’s worth paying a little more for something that works. Let us know if we can help with anything.

Thanks,
Josh

7

Hi @cyberdave or @Brando! Any chance you’ve been able to look at this closer? Would really love two buy buttons for the same product on my pages.

8

Will not be able to help you with this, but your site is absolutely awesome, @highfives, really nicely done.

Take care

1 Like
9

Hi @highfives!
Finally, came up with a simple solution for you - works on my end. Ok, here we go:

  1. Inspect your BuyButton embed code: there are two parts. At the start a < div >…< /div >, then a < style >…< /style >-part. Copy&paste only the div at the start where you want your button to appear and add a small change to the number at the end to create a unique ID:

< div id=‘product-component-123456789’ >< /div > →

< div id=‘product-component-123456789_1’ >
< div id=‘product-component-123456789_2’ >

  1. Place only the rest of the code from somewhere else (e.g. the -part) in seperate new divs each, and change the ‘node’-part, like:

for button 1:

< div >
< style >
…
node: document.getElementById(‘product-component-123456789_1’),
…
< /style >
< /div >

for button 2:

< div >
< style >
…
node: document.getElementById(‘product-component-123456789_2’),
…
< /style >
< /div >

In general, it would be best not to put as much default buy buttons on one page but use SDKs to minimize code to not slow down a page, but for just a bunch of buttons it might work as you specified.

Hope this helps!

3 Likes
10

Thank you for your help @ellelle. This resolved my issue as well. What a relief! Thank you very much.

11

@ellelle Thank you for this! I think this solved my issue as well — it’s been such a headache!

12

@ellelle Thank you for sharing this solution, it solved the problem I was having too, which was driving me around the bend. So thank you!!

13

@ellelle @brettscreativestudio @lindsay.ware @suzanne
I really want to understand your solution but I don’t get it…
Is it possible you could show an example?

14

Sandy,

I can speak more to the solution for you. See an implementation here: https://www.inspirational.com/experience/bereal

Shopify’s buy button script is set to show the buy button inside of a div with a matching ID upon pageload. Problem is, if you paste the embed code multiple times you are effectively pasting the same div with the same ID multiple times. So, the script will run multiple times and repeatedly place the buy button into the first div it finds with the matching ID. This creates multiple buy buttons in one location on your website, hence this post.

To resolve this issue, you simple need to append some unique information to the div so the script can set the buy button in each unique div. @ellelle had a div named product-component-123456789 which they simply renamed to product-component-123456789-1 in the first embed code and product-component-123456789-2 in the second embed code.

It’s pertinent to know you have to make this ID naming change wherever the div ID appears. In this case, it appears in the very first line of the embed code as well as the line containing “node: document.getElementById(”. Once you change the div names in each location, your buy buttons will appear separately as desired.

3 Likes