Disable Auto-Scroll on Variant Click in Shopify Dawn Theme

Have you noticed a jarring behavior in the Shopify Dawn theme where selecting a product variant automatically scrolls the screen back up to the product image? While this is intended to help users see the visual change, some store owners find it disruptive to the user experience.

In this tutorial, I will walk you through a quick, one-line code modification to disable this auto-scroll behavior. This is a beginner-friendly fix that involves editing a single JavaScript file.

Prerequisites

Before making any code changes, it is crucial to protect your live store.

1. Duplicate Your Theme: Go to your Shopify Admin, navigate to Online Store > Themes. Click the Actions (three dots) button next to your current theme and select Duplicate. This ensures you have a backup if you need to revert changes.

Step-by-Step Implementation

Once you have backed up your theme, follow these steps to disable the scroll effect.

1. Open the Code Editor

Navigate to your theme dashboard and click the Edit code button to access the backend files.

2. Locate the Global JavaScript File

In the file search bar on the left, type global. You are looking for a file located in the Assets folder named:

global.js

Click to open this file.

3. Find the Scroll Logic

We need to find the specific line of code responsible for the scrolling action.

1. Click inside the code area.
2. Press Command + F (Mac) or Ctrl + F (Windows) to open the search bar.
3. Search for the term: scrollIntoView (ensure there are no spaces).

This code is typically found around line 620, though it may vary slightly depending on your version of the Dawn theme.

4. Comment Out the Code

Once you have located the line containing scrollIntoView, you simply need to "comment it out." This tells the browser to ignore this specific instruction.

• Add a comment note: It is best practice to leave a note for yourself explaining why you changed the code. Create a new line above the code and add:

  // prevent scroll on variant change
  

• Disable the line: Add two forward slashes // to the beginning of the line containing the scroll code.

Your code should look something like this:

// prevent scroll on variant change
// this.el.scrollIntoView({behavior: 'smooth'}); 

5. Save and Test

Click the Save button in the top right corner.

navigate to a product page on your live store or preview environment. Click through different variants (e.g., sizes or colors). You should notice that the screen now stays stationary, allowing for a smoother browsing experience without the forced scroll.

Conclusion

And that's it! You have successfully customized the behavior of your Dawn theme with a single line of code. If you found this tutorial helpful, be sure to check back for more actionable Shopify development tips.