Streaming live at 10am (PST)

Loading multiple Shopify Buy Buttons with tabs


#1

I’m trying to create a size selector for Shopify products using tabs in webflow. I have tabs for Small, Medium, etc. and when each tab is pressed, it will load the content pane containing the corresponding shopify buy button for that size.

I’m currently using it on the ‘store’ page for the heather grey tee. (there are fake ‘add to cart’ buttons behund the element that the shopify button loads over to cover the loading times.)

What’s weirder is if I inspect the buttons after switching tab sizes, I can then click add to cart no problem and it will add the correct size.

This used to work fine, but now, when a new tab is selected, it is not loading in the shopify buy button. Any ideas?

Thanks,


https://preview.webflow.com/preview/lampcity?utm_source=lampcity&preview=c7faaa361900a6ccd239db0be280b450

http://lampcity.webflow.io/store


#2

I also just tested making a version that uses ‘tap’ on element animation to hide/show different shopify buy button embeds. Exact same issues. It does not show the buttons by default when clicking on the sizing options, however, if you inspect the ‘fake’ button element while on the live site, the buttons then magically show up and are able to be pressed. Very strange.

http://lampcity.webflow.io/test-buy-button