Re: Make both images on image banner clickable - Refresh Theme

Solved

Make both images on image banner clickable - Refresh Theme

YasStones
Tourist
3 0 1

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)

 

Screenshot 2024-03-26 at 15.50.13.png

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

Accepted Solution (1)

Posstack-Annt
Shopify Partner
50 2 12

This is an 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.

(Free!) Easy Content Builder - No-code theme sections and metaobject templates for any Shopify store. Add pre-built sections, multi-column layouts, and customize right in the Shopify theme editor.

View solution in original post

Replies 6 (6)

Posstack-Annt
Shopify Partner
50 2 12

This is an 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.

(Free!) Easy Content Builder - No-code theme sections and metaobject templates for any Shopify store. Add pre-built sections, multi-column layouts, and customize right in the Shopify theme editor.
YasStones
Tourist
3 0 1

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

Posstack-Annt
Shopify Partner
50 2 12

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

(Free!) Easy Content Builder - No-code theme sections and metaobject templates for any Shopify store. Add pre-built sections, multi-column layouts, and customize right in the Shopify theme editor.

diego_ezfy
Shopify Partner
2967 571 901

@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
Tourist
3 0 1

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? 

 

Screenshot 2024-03-26 at 21.54.22.png

 

Thanks, 

 

Yas

diego_ezfy
Shopify Partner
2967 571 901

@YasStones 

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

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