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

[Kevin110]

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). 

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!

[RichardNguyen]

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

[Kevin110]

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

---

[RichardNguyen]

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)