Shopify themes, liquid, logos, and UX
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
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?
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'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:
<script>
document.addEventListener("DOMContentLoaded", function() {
// Watch for cart drawer close button
document.addEventListener("click", function(e) {
if (e.target.closest("button[name='close-cart']") || e.target.closest(".cart-drawer__close-button")) {
document.body.classList.remove("overflow-hidden");
document.body.style.overflow = "";
}
});
// If cart drawer disappears for any reason (app bug), still unlock scroll
const observer = new MutationObserver(() => {
if (!document.querySelector('cart-drawer[open]')) {
document.body.classList.remove("overflow-hidden");
document.body.style.overflow = "";
}
});
observer.observe(document.body, { childList: true, subtree: true });
});
</script>
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.
I have tried all of these, and shopify support sent me here.
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025