If this is happening to you or your customers are reporting similar issues, you can apply a customization to manually remove the store logic that would lock the scrolling on your store pages!
Accessing Custom HTML Settings
To begin customizing the CSS for your UpCart, follow these steps:
Open the UpCart App within your dashboard.
Navigate to the Cart Editor.
Click on Settings and scroll to the bottom of the page until you find the section labeled "Custom HTML".
HTML
Make sure to select an HTML location to target the changes you would like to see in UpCart. In our case, we would want to change the setting to the "Above Announcements/Rewards" section.
<script>
window.upcartOnCartOpened = () => {
var elementLockingThePage = document.querySelector('body');
if (elementLockingThePage != null)
{
elementLockingThePage.setAttribute('style', 'overflow-Y:hidden !important');
}
}
window.upcartOnCartClosed= () => {
var elementLockingThePage = document.querySelector('body');
if (elementLockingThePage != null)
{
elementLockingThePage.setAttribute('style', 'overflow-Y:scroll !important');
}
}
</script>
This is how your custom HTML settings should look like in UpCart:
Explanation
In order to display UpCart, we visually hide other cart drawer elements on the storefront, such as the native cart drawer.
However, this can create conflicts if the storefront happens to have some logic tied that requires the customer to interact with the native cart drawer. As a result, even when UpCart closes, the store theme has determined that the user needs to finish the cart session, resulting in the store page being locked or responsive (e.g. the user cannot scroll up or down on the page).
Need Help + Further Troubleshooting
We've found that there might be other issues regarding finding the right selectors for the code that has been provided so if you're still experiencing the issues after applying the fix, our live support team will be happy to assist you in your problems!