How to Fix Website Auto Scrolling Issue When Pressing Back from Product Page on Shopify

How to Fix Website Auto Scrolling Issue When Pressing Back from Product Page on Shopify

How to Fix Website Auto Scrolling Issue When Pressing Back from Product Page on Shopify

Identifying the Problem

Many Shopify store owners face an annoying issue where the website scrolls to the top when the back button is pressed after viewing a product page. This problem is particularly evident when accessing the site from Instagram bio links or adverts, which can lead to a frustrating user experience and potentially affect conversion rates.

But why does this happen? This issue often stems from how the browser handles page state upon navigation. When you press the back button, the browser refreshes the page, causing it to scroll to the top, losing the user’s previous scroll position.

In this guide, we’ll dive deep into why this happens and provide a detailed solution to fix the scrolling issue on your Shopify store.

Causes of the Auto Scrolling Issue

Browser Page Refresh

When navigating back from a product page, many browsers naturally refresh the page state, which results in the page scrolling to the top. This is a default behavior aimed at providing a fresh start but isn’t always user experience-friendly, especially in e-commerce settings.

JavaScript Handling

JavaScript on your Shopify store can sometimes interfere with the normal behavior of the back button, further complicating the issue. For instance, if JavaScript dynamically manipulates content or state, it can inadvertently reset the scroll position.

Links from External Sources

When users visit your site through external links, such as those in an Instagram bio or advert, and they navigate using the back button, the issue is more prominent. Browsers may not preserve the scroll state due to the way external referrer data is handled.

Solution: Using JavaScript to Preserve Scroll Position

The good news is that this problem can be effectively fixed using JavaScript to remember and restore the scroll position. Here's a step-by-step guide to implement this solution on your Shopify store.

Step-by-Step Guide

1. Go to your Shopify admin panel: Log in to your Shopify account and navigate to your admin dashboard.

2. Navigate to Online Store > Themes: In the left-hand menu, click on 'Online Store' and then 'Themes'. Ensure you have selected your active theme.

3. Click on Actions > Edit Code: Next, find the ‘Actions’ button next to your active theme and click on ‘Edit Code’.

4. Open the theme.liquid file located under Layout: In the left-hand sidebar, find the file named 'theme.liquid' which is located under the Layout section. Click to open it.

5. Add JavaScript to Remember Scroll Position: Scroll to the bottom of the 'theme.liquid' file and paste the following JavaScript code right before the closing </body> tag:

  document.addEventListener('DOMContentLoaded', function() {
    const scrollPos = localStorage.getItem('scrollPos');
    if (scrollPos) {
      window.scrollTo(0, scrollPos);

  window.addEventListener('beforeunload', function() {
    localStorage.setItem('scrollPos', window.scrollY);

6. Click Save: After pasting the code, click the 'Save' button in the top-right corner to apply the changes.

Other Related Issues and Questions

Similar Problems Due to JavaScript

Q: My product page content doesn’t load correctly after pressing the back button, what can I do?

A: This could also be a result of how JavaScript re-renders content on your site. Ensuring dynamic content is appropriately handled and loading sequences are optimized can help mitigate this problem. You might need to review how your JavaScript is manipulating the DOM and consider using caching strategies for smoother navigation.

Q: My site loses user input in forms when navigating back to them. How can I preserve this data?

A: To preserve form inputs, you can extend the JavaScript code example above to save form data to localStorage or sessionStorage on unload, and repopulate the forms on load. This method will help maintain a smooth user experience.

Troubleshooting the Solution

Q: The JavaScript solution doesn't work on my theme. What could be wrong?

A: Make sure there are no conflicting scripts in your theme that override the scroll position behavior. Check for JavaScript errors in your browser console and ensure your theme files are correctly configured to include the custom script.

Q: The scroll position is still lost on certain browsers or devices. How can I fix this?

A: Different browsers and devices can handle scripts differently. Ensure that your theme is updated and compatible across all major browsers. You may need to test on different devices and tweak the script for compatibility.


The auto scroll-to-top issue when pressing back from a product page can be a nuisance, but with the right JavaScript implementation, you can preserve the scroll position and improve the user experience on your Shopify store. Follow the steps outlined in this guide to address the issue, and feel free to explore other related problems and solutions to maintain a smooth, user-friendly e-commerce site.

If you need further assistance or custom development, consider reaching out to a Shopify expert who can provide tailored solutions for your specific needs.