How to Make a slideshow image Clickable (without a button) In Refresh Theme

Shopify Discussion
1

Hey mates, Do You know how can I Make slideshow images Clickable (without a button) In Refresh Theme.

thanks in advance

2

Hi Dan,

Welcome to Shopify community.

What is your store url?

Do you want to redirect all slides to one url ?

Thanks.

3

I’m interested to know too, there is an option for adding your link to a button on the slideshow, but not to make the whole slideshow clickable. I would like to make it clickable per photo (slide), so different URL per time. Is that possible? Let me know how to add the code.

4

I did it with Javascript. Added at the end of global.js

const slideOne = document.querySelector(‘#Slide-template–Your Slideshow ID Goes Here-1’);
slideOne.addEventListener(‘click’, function() {
window.location.href = ‘/slideOneURL’;
});

const slideTwo = document.querySelector(‘#Slide-template–Your Slideshow ID Goes Here-2’);
slideTwo.addEventListener(‘click’, function() {
window.location.href = ‘/slideTwoURL’;
});

I also added code to my custom.css file to change the cursor to a pointer for each slide:

#Slide-template–Your Slideshow ID Goes Here-1:hover {
cursor: pointer;

}

#Slide-template–Your Slideshow ID Goes Here-2:hover {
cursor: pointer;

}

Yeah, it’s a bit clunky because you have to do this for each slide and I need to create a separate JS file so this doesn’t get overwritten with each update. But I’m new to Shopify and we’re on a deadline and I’m tired. And this works.