Make both images on image banner clickable - Refresh Theme

[YasStones]

Hi - Hopefully someone can help. 

I am looking to have both images on my image banner clickable. 

Screenshot here for clarity: 

I want the image on the left to pull through to 'Product page A' and the image on the right to click through to 'Product page B'. (I will be hiding the buttons eventually so ignore these)

Preview of my website link: https://i3it4fwtnli1gna7-64227115244.shopifypreview.com

I have managed to find some code to get the entire image banner clickable. Here is the tutorial and code I followed which has worked I just need the same for 'Image 1' and 'Image 2'. Link to code I followed successfully: https://websensepro.com/blog/how-to-make-the-image-banner-clickable-shopify/

 Thanks

[Posstack-Annt · Accepted solution]

@YasStones 

If you are considering an app (Easy Content Builder), you can add two clickable images, each of which will link to a separate product.

To achieve that, you simply add the free Image With Text section, then enable the overlay option and image link.

Disclaimer: I am the co-creator of the app. If that's something you consider, I can provide more detailed steps.

[YasStones]

Thank you! I have just tried out your app and it has worked perfectly. I really appreciate the help! 

[Posstack-Annt]

Hi @YasStones , 

Our team is about to make an essential change to the Image With Text's overlay option that I suggested in this thread. Starting May 21, 2024, this feature will be part of the Pro plan. 

If you're using that overlay option, please consider switching to our other FREE styles for the Image With Text (such as Default, Primary, Secondary, or No card). 

I'm sorry for the inconvenience this causes. 

Regards,

Annt

[diego_ezfy]

@YasStones@YasStones,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<style>

#MainContent > *:nth-child(3) .banner__content,
#MainContent > *:nth-child(3) .banner:after, 
#MainContent  > *:nth-child(3) .banner__media:after{
pointer-events: none;

}

#MainContent > *:nth-child(3) img{
display: block;
cursor: pointer;
}

</style>
<script>

function clickableImages(){
try{

var leftURL = `https://www.google.com/`
var rightURL = `https://www.youtube.com/`
var $images = document.querySelectorAll(`#MainContent > *:nth-child(3) .banner__media-half`);

if (!$images){
return;
}

$images[0].addEventListener(`click`, function(){

window.location.href = leftURL;
});

$images[1].addEventListener(`click`, function(){
window.location.href = rightURL;
});
} catch(err){


}
}

clickableImages();


</script>

This will work only if this section is the third one. This will work, but ideally you'd want this custom coded into your section, this way you could choose the URLs and everything else from the Customize page.

You can change the left and right URLs as per your wish.

If it helps you please click on the "like" button and mark this answer as a solution!

Thank you.


Kind regards,
Diego

[YasStones]

Thank you for your help on this, I really appreciate it but unfortunately it didn't work for me.

I have attached a screen shot of the code I pasted and the position according to your instructions. Have you any suggestions on where I have gone wrong please? 

Thanks, 

Yas

[diego_ezfy]

@YasStones 

Did you paste the code on the right theme? Because it is not showing up on the preview. 

https://i3it4fwtnli1gna7-64227115244.shopifypreview.com/