How to make slideshow images clickable in Studio theme?

How to make slideshow images clickable in Studio theme?

PPUSA
Excursionist
36 0 11

Hi there,

 

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

 

Thanks

 

 

Replies 6 (6)

KetanKumar
Shopify Partner
36929 3642 11996

@PPUSA 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

AvadaCommerce
Shopify Partner
3879 839 973

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.

banned

nelliott86
Visitor
1 0 1

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
Excursionist
22 0 7

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!

nenad_pantic
New Member
4 0 0

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 <img> tag in this case, so the anchor tag(<a>) code needs to go just before:

 

<div class="slideshow__media banner__media media ...

 

part, and it needs to be:

 

{%- if block.settings.image_link -%}
  <a class="slide__link" href="{{ block.settings.image_link }}"></a>
{%- endif -%}

 

and css needs to be:

 

<style>
  a.slide__link {
    display: block;
    width: 100%;  
    height: 100%;  
    position: absolute;  
    z-index: 9;
  }
</style>

 


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

made4Uo
Shopify Partner
3839 716 1177

Hi @PPUSA,

 

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free