Clicking on Product Photo Thumbnails Shifts Page Down

Store Design
1

Hi all,

We’re encountering an issue where after a user clicks between thumbnails a couple of times, the page automatically shifts down to the bottom of the page.

Is there a solution for this? Our page URL is https://footyintl.com

Thank you in advance!

2

@MitchellFly

Do not use to call your images. There are several ways to call the large images with the thumbnails. You can use dataset or loop.index

3

Hi @MitchellFly ,

I checked and it could be Focus error in JS. Please go to assets > theme.js file, find ‘productThumbnailSwitch:’, and remove code: https://i.imgur.com/MtwbScC.png

Hope it helps!

4

Hi there–apologies for the late response! I went through and found that code, deleted it, and still had the same result where clicking between photos would send the pageview to the bottom. Thank you though!

5

@LitCommerce this is what our code looks like currently (I added in the deleted code here). Not sure if this helps, but it’s what we’re looking at!

Screen Shot 2021-11-28 at 11.25.59 PM.png
Screen Shot 2021-11-28 at 11.25.59 PM.png1362×714 116 KB

6

Hi @MitchellFly ,

This is just a suggestion, can you remove it and check again? https://i.imgur.com/jHPqOX4.png

7

This is probably because the images are not the same height? Adding a fixed height to the image container would help, but the best solution is to make sure all the images are the same dimension.

8

Thank you, Ketan! Do you know how we can set fixed image heights for our product photography?

9

Hi @LitCommerce ,

I tried deleting it and didn’t have any success–still faced the same issues. Thank you for your input!

  • Mitchell
10

Hi @MitchellFly , the easiest and the best solution is to upload all your images at the same size, e.g. 1024 x 1024px. If you do it this way, there’ll be fewer layout issues and everything is consistent. It can be done using CSS, but it gets very complicated.

11

Thank you!