Page Load Possibly Hides 'Embed Elements'

Design help Custom code
1

Need help figuring out why our Shopify ‘buy button’ dissapears when our site loads.

Asked Shopify and they say it’s possible css is hiding the element.

I’ve pasted the live site below, just click the ‘view details’ button on the ‘wedding cake’ item and you’ll see the ‘add to cart’ button is not there. I’ve left what Shopify stated below if that helps!

–

FROM SHOPIFY :

Sometimes the CSS on a third party website can interfere with the CSS rules of the Buy Button. For example, if a website chooses to set display: hidden; for the iframe element will effectively render a Buy Button invisible.

I have conducted some more testing on your Webflow site and believe the issue may be relating to the load order of some elements or scripts on the site.

Situation 1: If you refresh the page then quickly click ‘View Details’, the Buy Button loads.
Situation 2: If you refresh the page, wait for all elements and scripts to load, then click ‘View Details’ the Buy Button is hidden.

Here is a video demonstrating this, I run six tests: the first three being situation 1 the last three being situation 2.

–

LIVE SITE : https://nugz-splash.webflow.io/home
READ ONLY : https://preview.webflow.com/preview/nugz-splash?utm_medium=preview_link&utm_source=dashboard&utm_content=nugz-splash&preview=af47d60eb1cfce1ded6ce9b22d6f3219&mode=preview

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

I did not experience the issue on current versions of MS Edge and Chrome (WIN) when I tested your shared webflow.io site. I noticed console errors in your video. Did you look at them?

3

Hmm… Interesting.

I could not see console errors in video, it’s too small for me…

I’m unsure what to do because it disappears for me on Mac…

What do you think we should do?

Chris

4

The browser in the video is Chrome. Pull up dev tools and take a look at your console. I tested on a Mac with Safari and had no issues. Sometimes browser extensions create issues. Try incognito mode. At least share the exact configuration (browser, browser version, OS and version) you seem to have an issue with.

7

Yea, looks like a Chrome issue. Here’s my set up below.

Tried incognito, disabled all extensions… Same thing, so weird?! Usually Safari has the issues!

–

browser : Chrome
browser version : Version 84.0.4147.89 (Official Build) (64-bit)
OS : macOS Catalina
Version : 10.15.5 (19F2200)

8

Not seeing it. Tested same environment.
https://share.getcloudapp.com/YEupLOKB

Clear your browser cache just in case. Don’t know what else to tell you .

9

See, the button is gone on the pop up!

When you click ‘view details’ there is supposed to be a button, like this:

Screen Shot 2020-07-22 at 1.07.50 PM
Screen Shot 2020-07-22 at 1.07.50 PM2356×1500 457 KB

10

The embed script is creating an iframe that has a inline style attribute of height:0. That is why it is not visible. So that is not a CSS collision. Not sure why this occurs. I would test a copy of this page without the other buttons and scripts loaded to see if this happens due to an implementation in the modal to isolate.

11

Ok, let me try a white page with the button to pop open this modal with button only and share it with you here. Thank you Jeff!!

14

Jeff,

Webflow jumped in to help us out!

Thank you for your assistance, really helped us along the way!!

Thank you!!

Chris

–

Webflow Solution :

Thanks for reaching out on the Webflow community forum for help with the custom code integration with Shopify.

Looks like the issue might be that Shopify script is calculating the size for the iFrame based on the element being on the page however it is hidden because you have it in a modal pop-up, so there is no initial height to calculate.

Perhaps try some custom CSS to force a fixed height on the iFrame to see if that resolves the issue - Image 2020-07-23 at 4.08.46 pm.

Maybe something like:

.shopify-buy-frame iframe { height:75px !important }

Be sure to save the custom code, re-publish and then check in an Incognito browser window so that the latest style is applied.