All things Shopify and commerce
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
Hey mates, Do You know how can I Make slideshow images Clickable (without a button) In Refresh Theme.
thanks in advance
Hi Dan,
Welcome to Shopify community.
What is your store url?
Do you want to redirect all slides to one url ?
Thanks.
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.
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.