Streaming live at 10am (PST)

Shopify Buy Button Not Showing When Using Tabs

Hi all!

Hoping for a little feedback on an issue I have embedding Shopify Buy Buttons that are inside a Collection and inside a tab element.

Tab List > Tab Pane > CMS Collection > Product Card > Shopify Buy Button Embed Code

The Shopify Buy Buttons only show up for the tab that is set to “Active” in the tab settings panel.

When clicking on inactive tabs the Shopify Buy Button does not display as it seems the embedded Shopify script is not firing when switching between tabs. Maybe a tab animation issue?

If you inspect where the Buy Buttons on the inactive tab pages the button magically appears and all the code is there that needs to be.

Video Overview

Read-Only Link
https://preview.webflow.com/preview/uneebo?utm_medium=preview_link&utm_source=dashboard&utm_content=uneebo&preview=88ce4f33df8691cda9ea1118bf1791be&mode=preview

Published Link
https://uneebo.webflow.io/projects/onna

Shopify Embed Buy Button Page

I saw one other post from a year ago that had this same issues and was never resolved. Any help would be greatly appreciated!

@cyberdave @PixelGeek
(Tagging the superstars that have helped in the past with other Shopify button issues :raised_hands:)

Hi,

The problem is that Shopify CSS interferes with Webflow’s tabs CSS script. An easy way to fix is to put the following CSS script into the <head> of the page where your products are.

.shopify-embed.w-embed.w-script iframe {
height: 600px !important
}

The height can be adjusted to your needs.

1 Like

Thanks for that! I will give it a go.

1 Like

Hello @dynamo and @dmitry_deskree were you able to resolve this issue? I’m currently having the same dilemma and i’m not sure if I have put the right code as well since I don’t have any coding background. Your response would be a huge help. Thank you!

I’ve noticed this same issue. The problem occurs when a Shopify Buy Button embed is in a parent that starts off as “display: none” on page load. The code is still there but the browser won’t recognize it until the window is resized with the embed no longer on “display: none.”

My workaround was to create a Page Load Interaction that loads the buy button embeds (or their greatest parent) as “display: static” and then returns them to their normal initial state once the page finishes loading. As this is a tedious process, any code that would be simpler than this workaround would be greatly appreciated.