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

By Tony Ng.
June 16th, 2024

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:

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

  window.addEventListener('beforeunload', function() {
    localStorage.setItem('scrollPos', window.scrollY);
  });
</script>

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