Modify Shop Select Block - Change Image on Button Hover

Question

Hi! I'm trying to change the Product Image from your block shop select template on button hover. I've already made it do change the Product Decriptions on hovering the buttons modifying the script: But i'm pretty lost changing the rest do you have any tips to do that? Thanks in advance :)

SemiColonWeb · Accepted Answer

Hello,

You can consider using something like this:
[ch_pre]
$(document).ready(function () {
$('.earpods-colors .nav-link').on('mouseover', function (e) {
let data = $(this).attr("data-desc");
$('.item-name').html(data);

        let image = $(this).attr("data-src");
		$( '.tab-pane img' ).attr( 'src', image );
    });
});

[/ch_pre]

However, you will need to update these codes manually as Customization Support is not currently provided.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

suppenhuhn · Answer

Thank you very much helps so much!

Semicolon Web · Answer

Very Happy to Help! :) Do let us know if we can help you with anything else.