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.