How to make slideshow images clickable in Studio theme?

Technical Q&A
1

Hi there,

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

Thanks

1 Like
2

@PPUSA

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

3

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.

4

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

  1. Add this snippet of code right above it:

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ā€
},

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

1 Like
5

Hi @PPUSA ,

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

6

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!

7

I know ages have passed but just a hint for people wanting to implement this.

Instructions from @nelliott86 are ok for the most part, but I suspect the reason why itā€™s not working for the first part is that you have a newer version of the template. Indeed there is no tag in this case, so the anchor tag() code needs to go just before:


part, and it needs to be:

```markup
{%- if block.settings.image_link -%}
  
{%- endif -%}

and css needs to be:

Clarifications:

Css is different as it adds a. in front of slide__link. This makes it possible to override template css which makes any links with no children hidden (display: none;), by adding additional display: block;

The anchor tag is wrapped in conditional if, so if you didnā€™t provide slide__link for a slide, the link would not be rendered, thus allowing you to display other embedded buttons.

Note that this solution is a bit hacky, it has arbitrary z-index and link without text with overlay. SEO / ranking of this approach is questionable. It is tempting to wrap the whole block in the tag as @made4Uo did in his video but then you canā€™t do conditional if. Propper solution would require more changes and little bit more restructuring of the code.

Also downside of this approach is that if you added this link overlay but then added any other buttons as elements of a slide, they will not be clickable - only slide overlay link would be clickable.

Also note to a (distant) future reader that this might not work again if the developers make more changes to the slideshow.liquid file.

If I find time I might provide a better solution.