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

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)

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 ?



-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
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. 

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.