Hi everyone, I’m experiencing some issues with my Shopify and cart functionality. Particularly after interacting with the cart. For instance, If I click on the cart icon at the top of the page and then close it, I sometimes can’t scroll through the product page. There is also an occasional issue when a customer presses the checkout button, nothing happens. Website link: https://vanatri.com/products/heart-boost-beets-supplement-1
Topic summary
A Shopify store owner reported two critical cart functionality issues: inability to scroll the product page after closing the cart drawer, and checkout buttons occasionally not responding.
Root Cause Identified:
The overflow-hidden CSS class was being added to the page when opening the cart but not properly removed upon closing, preventing page scrolling.
Solutions Proposed:
- Method 1: Disable the cart app and revert to the theme’s default shopping cart functionality
- Method 2: Modify
base.cssby changing.overflow-hiddentooverflow-x:hidden(with warning about potential side effects) - Standard troubleshooting steps (different browsers, incognito mode, clearing cache) were attempted but unsuccessful
Resolution:
The issue was ultimately resolved by adding JavaScript code to layout/theme.liquid that:
- Listens for cart close button clicks and removes the
overflow-hiddenclass - Uses a MutationObserver to detect when the cart drawer closes and ensures scroll functionality is restored
This fix addresses the app’s failure to properly clean up CSS classes after cart interactions.
After opening the shopping cart, this class name is added here, but it is not deleted after closing. You need to check the code of opening the shopping cart to fix this problem.
How can I do that?
Hi there @Vanatri have you tried all possible troubleshooting mechanisms like -loading it on a different browser
-trying it on an incognito browser
-clearing all cache cookies on the browser
-trying to load it on different devices
If you’ve done all this already, I suggest you reach out to Shopify support and let them know about the issue.
Two methods.
One is that your shopping cart should be implemented using the app, you can disable it and use the theme’s default shopping cart.
The second is if you want to keep the shopping cart of the app. The easiest way is to search for .overflow-hidden in base.css, there should be two places in it. Change the value to overflow-x:hidden;
But this method may cause unexpected style errors in other places where this attribute is used. You can check the page as a whole after modification.
I have tried all of these, and shopify support sent me here.
I’ve done this and nothing happened, the issue is still there
Lol, I finally fixed the issue, ChatGPT helped me fix it. it added this reinforce code to layout/theme.liquid: