[solved] How To Change Active nextArrow prevArrow On Product Thumbnails

[Lee]

Hi,

I am trying to change the active link on the arrow buttons on the product page thumbnail images, when viewed on mobiles.

When the thumbnails are displayed vertically next to the main image, the active arrow button is the top arrow, which is counter intuitive because one would normally scroll down through images, but the way it is set up you have to click the top arrow and then the images scroll up.

I've always thought that this should be the other way around - the active arrow should be the bottom one which when you click it scrolls down through the images.

I've tried to change the code around on product-cover-thumbnails.tpl but it's not changing anything.

Does anyone know how I can change this myself in the code?

Thanks

Edited May 19, 2022 by Lee (see edit history)

[Prestachamps]

Hi @Lee

Which theme are you using? Could you please paste the link to the webpage so that I can have a better understanding of the problem?

[Lee]

https://www.feederz.co.uk/squirrel-proof-bird-feeders-bird-seed-nuts/50-squirrel-proof-bird-nut-feeder-400g-peanuts.html

If you view it on a mobile

[Prestachamps]

Hi @Lee

You can add the following rule to the end of custom.css or theme.css:

#thumb-gallery.product-thumb-images.slick-vertical .slick-prev {
    top: -20px;
    bottom: auto;    
}
#thumb-gallery.product-thumb-images.slick-vertical .slick-next {
    top: auto;
    bottom: -20px;
}
#thumb-gallery.product-thumb-images.slick-vertical .slick-prev:before {
    content: "\f106";
}
#thumb-gallery.product-thumb-images.slick-vertical .slick-next:before {
    content: "\f107";
}

(be sure to back up those files before making any changes)

I hope that I could help.
Cheers, Leo

[Lee]

Hi Leo,

That worked perfectly, exactly what I needed!

Thank you so much for your response and assistance.

 

Kind regards,

Lee

[Prestachamps]

Hi @Lee

Very glad I could help!
Have a nice day

Cheers, Leo