Cant scroll on policy, terms, contact, refund at checkout

Shopify Discussion
1

Hello,I just noticed why people leave the checkout. On phone when you open the link in the footer for policy,refund,terms,contact the popup with information can’t be scrolled on.

It’s like the scroll is working on the page behind.

Because I can see on the sides how the page behind is scrolling.

I didn’t change code so idk why this is. It works when phone is tilted and in pc.

I found that as soon as the edges left and right dissapear due to width of screen, its not possible to scroll..

Please help!

2

Hello mate,

We are OneExperts from OneCommerce and we’re here to help you.

Seems like the main issue is that the overflow property in the CSS for the popup is set to “hidden”, which would prevent the user from being able to scroll the content inside the popup. You may want to try following these steps to troubleshoot the issue:

  • Check the CSS of the popup to see if the overflow property is set to “hidden” and if so, change it to “scroll” or “auto”.
  • Check the JavaScript that is controlling the popup to see if there are any issues with it.
  • Test the site on different mobile devices to see if the issue is specific to certain devices or browsers.
  • Check the site in the browser’s developer console for any error messages that might help identify the cause of the issue.
  • Hope we can help you out with this. Please let us know if you need any further support.

Regards,

OneExperts by OneCommerce.

3

Hello, I found that its an ifram that pop the screen :

I asked ChatGPT what is wrong and it said its because the height is set.
So I tried in chrome developer inspection to set it to 100vh. That worked.

But I cannot access checkout files in my themes. Do you know how to access that file with the ifram?

4

Hello @46855004463 again,

We are OneExperts by OneCommerce and we’re here to help you to have the best solution, not just an error answers like machine.

To access the file with the iframe in your Shopify store, you will need to access the code editor in your Shopify admin panel. Here are the steps to access the file:

  • Log in to your Shopify store panel → Go to “Online store” → Click on “Theme”
  • Find the theme you’re currently using → Click “Actions” → Select “Edit code”
  • In the top right corner of the code editor, there is a search bar, you can use it to search for specific keywords related to the iframe, such as “iframe” or “terms of service”.
  • Once you have found the file that contains the iframe code, open it and look for the iframe code. You can then edit the height property of the iframe to “100vh” or “auto” as you have tried in chrome developer inspection.
  • Save and test.

In case you still couldn’t find the iframe code, it’s possible that it might be added by an app or custom code. You may want to try:

  • Check your install app, some apps may add an iframe to your check out page.
  • Check your theme’s liquid files.
  • Check your theme’s setting
  • Contact your theme developer or contact Shopify Experts (like us) to have further assist.

Hope your problem will be solved. Hit us up at julia@onecommerce.io if you want to know what we can provide for you better than automachine.

Regards,

OneExperts by OneCommerce.

5

Hello,

Thats the thing. I cannot access files in edit code for the checkout footer.
I think its pushed from the shopify side. I have done coding in edit code a while and know what you are talking about. the ifram is in the checkout footer, at the checkout. And I guess shopify restricted that part from being edited because the policies need to be visible at purchase so that people cant manipulate the footer.

I tried to change theme to dawn / origin with clean code and the ifram issue persists.