Studio Theme: Clickable Slideshow

[PPUSA]

Hi there,

Does anyone know how to make the slideshow images clickable on the Studio theme rather than needing button overlays?

Thanks

[KetanKumar]

@PPUSA 

sorry for that issue can you please send slideshow section code so i will check and update

[AvadaCommerce]

Hi @PPUSA ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

[nelliott86]

Hey, I'm a novice here, but I was trying to do the same thing and think I got it working. This may not be the cleanest way to do it, but if it works, it works. I borrowed code from multiple tutorials for this....

Step One: Edit Your Theme Code:

Go to Online Store > Current Theme > Actions > Edit Code. 

1. Open slideshow.liquid
2. Find the following:

<img

    3. Add this snippet of code right above it:

<style>
  .slide__link {
    width: 100%;  
    height: 100%;  
    position: absolute;  
    z-index: 9;
  }
</style>
<a class="slide__link" href="{{ block.settings.image_link }}"></a>

Click Save.

Step 2: Add an option for an Image Link:

1. Editing code: slideshow.liquid

2. Find: image_picker

3. Insert your cursor after this section of existing code:

{
"type": "image_picker",
"id": "image",
"label": "t:sections.slideshow.blocks.slide.settings.image.label"
},

4. Paste this piece of code just after it:

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

Step 3: Add your link to your slideshow:

Once you have finished editing your code you will be ready to add your link to your slideshow. To do so, go to Online Store > Themes > Customize > Slideshow and click on an image block. You will then be able to add the link under the new option ‘Image Link’ (refresh page if it doesn't show up).

Click Save.

Done.

I DO NOT guarantee this will work for you, but I hope it does!

[JBMartin]

Hi, 

The second part of your instructions worked, thanks!  However, I cannot find where to insert the first part, so the image is still not clickable.  Everywhere I look, people are saying to insert it above <img, but I do not have a section saying <img within the slideshow.liquid file.  I am on Studio and I am searching within the code itself (not on the page), but cannot find this anywhere.  I've tried inserting in different places, but it's not working.

Any clues at all?  Thank you so much!

[made4Uo]

Hi @PPUSA,

Please check the video tutorial to teach you how developers handle the same issue. Just follow the simple instructions.