Streaming live at 10am (PST)

Multiple Shopify “Buy Button” embeds are bunched together


#1

Hi!

I followed the recently updated tutorial here: https://help.webflow.com/article/how-to-dynamically-embed-shopify-products-with-webflow-cms

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:

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

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

and leaves the second placement blank:

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!


#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: https://foxy.io/webflow 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


#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?


#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


#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!


#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!