Shopify Buy Button Not Showing When Using Tabs

Design help Custom code
1

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.

17%20AM
17%20AM482×754 38.1 KB

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
https://www.loom.com/share/0d870675b66b4f23b764dd30448920d5

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:)

2

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
3

Thanks for that! I will give it a go.

1 Like
4

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!

5

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.

1 Like
6

Hi Henry - pewww… so happy that I read your post on this - as I do see the shopify content when resizing window (I would never have tried if I had not read your post):slight_smile:
I’m wondering if you ever found another workaround than the page load interaction?
Hoping to hear from you soon as I’ve been struggling with this for way too long ;-/
Best regards, Louise from Denmark

7

Hi Dynamo, facing exact same issue - did you ever found out how to make it work?
Hope and crossed fingers from Louise

8

Hey Lousie, if you share a link to your readonly project, and your published site, I’ll have a look.

9

I know this is an old comment, but this solved my problem thank you! Created a pre-loader page and suddenly my buy button stopped loading on my initial page load but it would appear after I opened developer tools. So glad I found this forum.

10

Any way you could share a screenshot the page load interaction setup? I’m not quite able to figure out the “returns them to their normal state” aspect.

cc: @Henry_Tregenza

11

I’d love to second this…a video of the whole process would be amazing!

Will this slow the page down much? I’m building a business that requires me to have nearly 40 collection buy buttons on every partner’s webpage…I must have tabs in order to organize it properly… (love to hear if anyone has an opinion on if you think that will be a problem…)

I tried inserting the script in the head section recommended by [dmitry_deskree], but this did not work for me…seems like enough people are having this issue that webflow should provide a native solution…

cc: @Henry_Tregenza
cc: @dmitry_deskree

my read only link (note buy buttons only seem to appear on the live page/not the read only)…Webflow - Outfitter Pages

12

@Wade_Luplow
Add this to the before-/body custom code area of your page-

The Shopify button is created by a script, and it seems to recalculate and redraw the button & product content on browser resize. Since it’s initially hidden that doesn’t happen.

Here, we listen for tab click events, and when one happens, we wait 200ms for Webflow.js to display that content and then we trigger a resize so that the shopify button script is notified to redraw.

<script>
  document.addEventListener('DOMContentLoaded', (event) => {
    const tabs = document.querySelectorAll('[data-w-tab]');
    tabs.forEach(tab => {
        tab.addEventListener('click', () => {
          setTimeout(() => {
            window.dispatchEvent(new Event('resize'));
          }, 200);
        });
    });
  });
</script>
1 Like
13

@memetican

Michael, this worked beautifully! Thank you so much, especially for the explanation.

1 Like