Have main product image change when mouse hovers over thumbnails on product page - Debut Theme

Highlighted
New Member
7 0 0

As the title says, I want the main image to change on the product page whenever I move my mouse over the smaller thumbnail images below (see attached screen shot). 


Screen Shot 2020-03-25 at 7.44.51 PM.png

 

Link: https://alilang.com/collections/sequins/products/y91132p

I am using the default debut theme. Any help to adding or adjusting the code to add this feature would be greatly appreciated, thank you!

0 Likes

Add this custom JS code into bottom of theme.js file

 

$('.product-single__thumbnail--product-template').each(function(){
  $(this).hover(function(){
    $(this).trigger('click')
  })
})

I hope it helps

- [Tutorial] How to customize Shopify product page: academy.pagefly.io/customize-shopify-product-pages
- Are you having problems customizing your Shopify pages? Check out PageFly - Advanced Shopify Page Builder
0 Likes
Highlighted
New Member
7 0 0

Hey Richard, unfortunately the code did not work :(


@RichardNguyen wrote:

Add this custom JS code into bottom of theme.js file

 

$('.product-single__thumbnail--product-template').each(function(){
  $(this).hover(function(){
    $(this).trigger('click')
  })
})

I hope it helps


 

0 Likes
Highlighted

I did not see the code in this file https://cdn.shopify.com/s/files/1/0275/8180/8718/t/49/assets/theme.js?v=3553144428272866364 (this file from your store)

- [Tutorial] How to customize Shopify product page: academy.pagefly.io/customize-shopify-product-pages
- Are you having problems customizing your Shopify pages? Check out PageFly - Advanced Shopify Page Builder
0 Likes