Solved

Selecting a variant option (ex: size, color) causes the page to scroll upward slightly

JKLRedeemed
Excursionist
15 1 6

When viewing my site, bygracealonedesignco.com, on desktop I'm noticing that when I select a specific variant type, like a size or a color, the right side of the product page shifts up slightly. If you select a different variant, it does it again. If a customer decides to look through the colors, the page would continue to scroll up with each change. This is incredibly annoying and really needs to get fixed. I'm using the 9.0.0 Dawn Theme. I also have no password enabled. And if it's relevant, I do have my site set to show the relevant images of each variant color. Meaning, if you select 'yellow', it will show the yellow shirt image. 

 

I can't really show this issue in an image, so I hope I was clear enough. I have no idea what is causing this, so any help would be appreciated!

Accepted Solution (1)

JKLRedeemed
Excursionist
15 1 6

This is an accepted solution.

I finally found a solution on my own, thanks to Berricle's response on another very similar question. The solution is commenting out JS line item from media-gallery.js. 

 

Go to Assets > media-gallery.js and locate these lines of code:

 

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

 

Replace this with the following code or add two backslashes, "//", before each line to comment it out. This essentially turns these lines into comments that will not be used to affect your site. If done correctly, these lines will show up as a different color in the js code and the page will no longer shift upon clicking variant options.

 

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

 

Hope this helps!

View solution in original post

Replies 3 (3)

dmwwebartisan
Shopify Partner
12291 2547 3698

@JKLRedeemed 

I think this is code related issue. please disable all apps and check the product page. if not solve your problem Please hire a Shopify expert who can help you.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

JKLRedeemed
Excursionist
15 1 6

This is an accepted solution.

I finally found a solution on my own, thanks to Berricle's response on another very similar question. The solution is commenting out JS line item from media-gallery.js. 

 

Go to Assets > media-gallery.js and locate these lines of code:

 

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

 

Replace this with the following code or add two backslashes, "//", before each line to comment it out. This essentially turns these lines into comments that will not be used to affect your site. If done correctly, these lines will show up as a different color in the js code and the page will no longer shift upon clicking variant options.

 

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

 

Hope this helps!

cactusbecks
Visitor
3 0 0

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?