Page jumps down if I click on product image or variant - please help.

Solved
tiptoesteps
New Member
3 0 0

Hello all, 

I am having a problem with my product page. 

I am using the brooklyn them. 

On desktop if an image or variant is selected the page sometimes jumps down. Its very strange.

Does anyone know a solution to this? I would greatly appreciate some help. 

Link to product page: https://tiptoesteps.com/products/support

Kind regards,

 

Accepted Solution (1)

Accepted Solutions
Jasoliya
Shopify Expert
4461 574 1119

This is an accepted solution.

Hi for that i need to check in code because cant find issue from front side. you can hire developer for that or pm me 

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Replies 17 (17)
Jasoliya
Shopify Expert
4461 574 1119

Hi @tiptoesteps 

I have checked but i cant see this, if you can share video then share it.  so we can get issue exact.

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
tiptoesteps
New Member
3 0 0
Jasoliya
Shopify Expert
4461 574 1119

Give me access or send me video on private msg or mail. 

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Gustavoheraclio
Tourist
8 1 0

Hello .. Good night. I'm having the same problem as our colleague. When I click on a variant the site takes me down for no reason. I've tried everything, change photo format, take description, put description, but nothing worked. I do not know what else to do. I use Brooklyn too. I am willing to resolve this issue at any time, thanks for listening.

https://drive.google.com/file/d/1UlKBRO8zWCMSK5g6P2d9qb4V6H7_3sWf/view?usp=drivesdk 

 

 

 

 

Jasoliya
Shopify Expert
4461 574 1119

Hi 

Thats because of brooklyn theme have sticky section function, i have solved it by custom code based on issue for @tiptoesteps 

Send me store url or pm me

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Gustavoheraclio
Tourist
8 1 0

Hi, thanks for listening.

my website is https://thefoxbrazil.com/
and the password is flathu

in case you need anything else, I will be here to help

Jasoliya
Shopify Expert
4461 574 1119

This is an accepted solution.

Hi for that i need to check in code because cant find issue from front side. you can hire developer for that or pm me 

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Gustavoheraclio
Tourist
8 1 0

i just wanna solve this...

whats your email? and how can i contract you?

Gustavoheraclio
Tourist
8 1 0

I just saw your email, I'll send you a message for it

nielskliim
New Member
1 0 0

I have the same problem, as I guess many others do. Very strange that "jump down" is an acceptable feature of the Brooklyn theme. Did you pay for the solution or is it something you will share?

pauafactory
New Member
4 0 0

 

Hey, have you found a solution? Dealing with the same problem.

pauafactory
New Member
4 0 0

@Gustavoheraclio @Jasoliya @tiptoesteps @nielskliim 

 

Has anyone found a solution to this issue?

Thanks!

Jasoliya
Shopify Expert
4461 574 1119

Yes we have to change some js code as per theme, you have to hire developer or pm me

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
omidmirzaee
Tourist
8 0 1

Hi,

I found a solution seem to be working for me, 

Short answer:

Open timber.css and search for "hide", you will find a rule that assigns 

display: none;

to the "hide" class. Now change "display:none;" to:

width: 0;

Vola, it should work now!

 

Methodology:

I went deep through the js code and realized when you click on a variant image it adds a "hide" class to the images that are not showing and removes the hide class from the new image, and in timber.css in my case the "hide" class has a property 

 

display : none;

 

which basically makes the object disappear from the viewport that's why browser jumps down, because for couple of milliseconds there is nothing there to show.

What I did to solve the problem doesn't actually solve it, its a way to get around that issue, its to put 

 

width : 0;

 

in the class "hide" instead of "display : none". It essentially makes the image invisible while keeping the same height and thus the page wont jump down.

Let me know if you need anything else and if the solution worked for you.

Cheers

rghamari
New Member
2 0 0

I am having the same problem on my site. Did anyone else tried Omidmirzaee solution?

rghamari
New Member
2 0 0

I actually tried your solution, but it ended causing issues with the cart button showing twice on my header menu. 

Al4j0
Shopify Partner
3 0 1

Hello everyone, this is really a problem with the Brooklyn theme with the hide class of the first element, it happens when clicking on a different image from the first one, scrolling and clicking on the first thumbnail.
Here I have a solution that although it is not perfect, it allows to reduce the problem:
Add to the bottom of your theme.js file:
$(".product-single__thumbnail").click(function(){return $("html, body").animate({scrollTop:150},600),!1});