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

Kevin110
New Member
11 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

CRO Expert at PageFly - Advanced Shopify Page Builder - Empowering 90.000+ active merchants.
- Inspiring example: PageFly builds a complete Shopify landing page base on Nike.com
- PageFly Page Builder: Website | Facebook | LinkedIn | Twitter | Group | Youtube
Kevin110
New Member
11 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

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)

CRO Expert at PageFly - Advanced Shopify Page Builder - Empowering 90.000+ active merchants.
- Inspiring example: PageFly builds a complete Shopify landing page base on Nike.com
- PageFly Page Builder: Website | Facebook | LinkedIn | Twitter | Group | Youtube
0 Likes