Page scroll to top automatically after selecting product variant

Store Design
, , ,
1

This issue only apply to Dawn theme > mobile device.

Scenario: User is on product page and scroll down until they see variant options such as size / color.

Whenever a product variant is selected (either dropdown or pill format), page is scrolled back to the top automatically which is a bad user experience. Spent the last a few hours and couldn’t figure out how to disable auto scroll.

Has anyone experience similar issue and has a solution?

Here is example product page

https://www.berricle.com/products/sterling-silver-925-round-cubic-zirconia-cz-wedding-engagement-ring-r292

Any help is greatly appreciated. Thanks

1 Like
2

this this code

$(document).ready(function(){
  $('select, input[type="radio"]').on('change', function() {
    var currentPos = $(window).scrollTop();
    $('html, body').scrollTop(currentPos);
  });
});

This code should prevent the page from scrolling to the top by saving the current scroll position and restoring it after the variant is selected.

3

Thank you so much for your solution which works :+1: .

We also found another solution which is commenting out JS line item from media-gallery.js.

if (!this.elements.thumbnails || this.dataset.desktopLayout === ‘stacked’) {
//activeMedia.scrollIntoView({behavior: ‘smooth’});
}

7 Likes
4

I was having the same issue as OP and this did the trick. Thank you!

5

Where do you paste this code and does it work for the Studio Theme as well. Also does this work for the size of a product as well?

2 Likes
6

Works perfect man :slightly_smiling_face: thanks

7

I am having the same issue. Where are you placing this code?

8

Disclaimer: You understand the risks in modifying your code and either are able to undo these changes or have saved your code before making modification. DO NOT attempt if you don’t feel confident in modifying your Shopify Theme code. I am not responsible for your mess :wink:

If you have not solved this by now, go to Online Store / Themes, click the 3 dots/menu button of your current theme, then Edit Code.
On the new page, on the left hand side, type “media-gallery.js” (without the quotes) in the search box.
Click the media-gallery.js file.

On your keyboard, hit CTRL+F to search the file for “if (!this.elements.thumbnails || this.dataset.desktopLayout === ‘stacked’) {”. On my file, it is at line 46 but it could be different for you theme.

Once you have located this code, look at the line underneath it. You should see this:

activeMedia.scrollIntoView({behavior: 'smooth'});

Add // in front of the word active.
It should now look like this:

//activeMedia.scrollIntoView({behavior: 'smooth'});

Hit the Save button (top right of the page).

This is the easiest way to manage what the OP tried to accomplish.

Hope this helps.

4 Likes
9

THIS IS THE BEST!!! IT WORKS!!!

THANK YOU THANK YOU THANK YOU!!!

10

For me commenting out the code did solve the scroll issue but on mobile it didn’t switch the variant image anymore, so I had to add one more line of code to manualy scroll to the 1st image in the slider when variant changes. I wrote a post about it.

11

This was such an easy fix! Thank you.

12

Hello, this doesnt work on the dawn theme version 13. Could you please have a look at this version? Thanks

1 Like
13

So I use Dawn version 13.0.1, but I can not find this text in the media-gallery asset folder. Any one a solution please?

14

Where do you put this code?

15

Hi! I am having this same issue. Where do I add this code?

16

Hello,

I am having the same issue in the sense theme and ctrl+f does not show an “if (!this.elements.thumbnails || this.dataset.desktopLayout === ‘stacked’) {” in “media-gallery.js”
Could the code be something else in this newer version?

Thanks

17

Hi all, sorry for the late reply, the code changed a little with the newer versions of the Dawn theme, now you just need to comment out a few lines. I’ve updated the post to include the change for the newer version look at my post here.

1 Like
18

hey did you figure out how to fix it now on the new theme? Im using Sense 15.0.0 i guess its the same as Dawn 15.0.0

19

Hey!

First of all I am just building my website and have worked so many hours on that problem…

I saw your response and THANK YOU!!!

I just have something to add in favor of future people with the same problem but with a different theme than Dawn.

So I am using Spotlight Theme and it’s very good-looking but I find myself need to add many customizations in the code myself that don’t exist in the basic theme.

Anyhow, I saw your post and for me the line “if (!this.elements.thumbnails || this.dataset.desktopLayout === ‘stacked’) {” doesn’t exists, so I entered media-gallery.js file like you and searched (with CTRL + F) for “behavior:” (without the quotes).

It then occurred to me that there was only one line which is: “window.scrollTo({ top: top, behavior: ‘smooth’ });”. For me it was at line 63.

So I added the comment “//” in the beginning of this line and it worked like a charm!!!

I can’t believe how many hours I spent on this… minimum of 5…

So if anyone in the future sees this and use spotlight theme (or any other theme) just look for “behavior:” and you’ll find it.

Hope I’ll help someone :slightly_smiling_face:

–

Eyal

3 Likes
20

This works! Wish I’d looked sooner. Thank you so much.

Not to be greedy, but is there a way to keep te scrolling for the color variant buttons, but not the size variant buttons? It seems like when you choose another color, it should scroll up to show you, but when you choose a size, it should not.