Custom code to make slideshow image clickable (Crave Theme)

[SocknRoll]

 Hello,

I have already created a thread regarding this, but only had one person reply once and then stop responding to me, so I have created another post.

We have recently had a rebrand of the company, and decided to use a new theme.

The Crave theme seemed perfect, until I actually started doing some work on it. I've used multiple themes from Shopify, and none of them have had this issue, with unclickable slideshows.

I have seen other people posting this similar question, but the people who have helped them have said the code needs to be custom made, so I can't just copy the code they have given to the other people.

Currently we are using the default setting, which adds a small clickable button on the slideshow, but honestly it gets in the way of the promotions, so we'd rather have the ability to make the whole image clickable instead of having a button there in the way of the promos.

I have left the button on at the moment, so you are able to see what I'm talking about.

Is there any chance someone could create/edit the code so that it makes the whole slideshow image clickable, instead of a button, to go to specific pages/collections?

Our URL is: www.sock-n-roll.com

Many thanks in advance!

[BlackCro · Accepted solution]

Absolutely, with just a couple lines of code you can add this functionality. 

Firstly navigate to slideshow.liquid by going to Online Store, clicking the three dots next to Customize and selecting Edit code. Here you can search for slideshow.liquid or find it in the Section folder. 

On line 154 add the following code. It should sit between <div class="slideshow__text-wrapper... and <div class="slideshow__text...

<a href="{{ block.settings.image_link }}" style="display: block;position: absolute;width: 100%;height: 100%;left: 0;top: 0;z-index: 999;"></a>

Then scroll down to where the {% Schema %} starts and add the following code below the image picker on line 386

        {
          "type": "url",
          "id": "image_link",
          "label": "Image Link"
        },

Now in the Customize menu there will be a new input field to select the page you'd like the banner image to link to, so you shouldn't have to revisit the code every time you want to change the link. 

Hope this helps

Simon 

[SocknRoll]

Simon, you are an absolute LEGEND!

Thank you so much for that, it seems to be working perfectly 🙂

On the other posts I saw related to this, the coders had said the code was individual to each store, and it looked like the whole code needed updating, but those few lines have done the job, so thank you for making it so easy to deal with!

I really appreciate your help.

If you have a business address please let me know and I'll happily post you a pair of funky socks! 🙂

Thanks again,

Marc

[argnarb]

Hi, I'm also using the crave theme and I tried this on my site and it seems to be working fine for the desktop, however, the mobile images aren't clickable. Do you know why that might be?

Site: www.moosh-moosh.com