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

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

DanGadgets
New Member
4 0 0

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

thanks in advance

Replies 3 (3)

JabirKhan
Shopify Partner
75 7 16

Hi Dan,

 

Welcome to Shopify community.

 

What is your store url? 

Do you want to redirect all slides to one url ?

 

Thanks.

-Use the new day to learn something new that you enjoy. Happy Coding.
- If you find my reply helpful, please hit Like and Mark as Solution
A-website-maker
Visitor
3 0 0

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. 

bcm1313
Tourist
8 1 0

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.