Solution: Save and Restore Scroll Position Using JavaScript
We'll use sessionStorage to save the user's scroll position when they click a product, and then restore that position when they return to the collection page.
Step 1: Add JavaScript to Save and Restore Scroll Position
In your Shopify admin, go to Online Store > Themes > Edit Code. Then, in your theme.liquid file, just before the closing </body> tag, insert the following script:
<script>
document.addEventListener("DOMContentLoaded", function () {
// Save scroll position when clicking a product
document.querySelectorAll('a[href*="/products/"]').forEach(function(link) {
link.addEventListener("click", function () {
sessionStorage.setItem("collectionScrollPosition", window.scrollY);
});
});
// Restore scroll position if available
if (window.location.href.includes("/collections/") && sessionStorage.getItem("collectionScrollPosition")) {
window.scrollTo(0, sessionStorage.getItem("collectionScrollPosition"));
sessionStorage.removeItem("collectionScrollPosition");
}
});
</script>
Saves the vertical scroll position (window.scrollY) when a product link is clicked.
When the user returns to a collection page, the script checks for the saved scroll position and restores it.
After restoring the scroll position, the script removes the stored value to prevent it from affecting future navigation.
If your theme uses AJAX navigation or infinite scroll, you may need to adapt the script slightly. For example, you could wrap the window.scrollTo call in a setTimeout or wait for a custom event that indicates the collection has finished rendering.
With this script in place, users who view a product and then return to the collection page will land exactly where they left off, providing a smooth and intuitive browsing experience.
If you need help integrating this into a theme using dynamic content loading or if you're unsure where to place the code in your theme's structure, let me know and I’ll guide you step-by-step.
