How to make slide image clickable with link

Highlighted
Shopify Partner
31 0 22

here it is in a video step by step

1 Like
Highlighted
Excursionist
50 0 2

Hey, 

So much for this!

I've just tried this - but i dont have '<div class="slideshow__image box' in my slideshow.liquid

i'm using Venture theme 

Do you have any advice or any update that I could use to make this work for me please? 

Thanks so much, 

Aneesha 

www.devti.co.uk

0 Likes
Highlighted
Excursionist
19 0 0

Code from the video above, if anyone needs:

Part 1. 

 

{% if block.settings.image_link != blank %}
<a href="{{block.settings.image_link}}">
{% endif %}

 

</a>

 

Part 2.

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

 

0 Likes
Highlighted
Excursionist
19 0 0

Sadly, I have a debut theme and the second code was rejected as an error. Can you advice? Thank you

0 Likes
Highlighted
New Member
1 0 0

Thanks for the tutorial!

Somehow it didn't work for my theme, so I took a less clean solution instead.

 

I took the file "slider.liquid", there the slider is divied into several divs and also includes a <ul> list.

 

I placed a  hard coded link in the line above the opening <ul> tag.

Like this:

  • <a href="/collections/all">
  • <ul class=" ...

To close the link I placed the closing </a> tag in the line behind the closing </ul> tag.

  • </ul>
  • </a>
  • <noscript> ....

 

I know this solution is not very clean and cam make problems if someone else will work on the theme, but it works for now and I document all changes I make to the theme via screenshot just in case. ;)

 

- - - - -

Just in case anyone knows the solution:

I tried the solution in the tutorial before, although the theme is slightly different.

  • To get the "image_link" into the theme cofigurator worked. You could choose a link in the frontend configurator.
  • I had placed the " {% if block.settings.image_link != blank %}
    <a href="{{ block.settings.image_link }}">
    {% endif %}
    above a div containing the slider image, and also the closing </a> tag below.
    • I then changed "block.settings.image_link" to "blocks.settings.image_link" because it was named "blocks" in my theme instead of "block".
  • After that the slider image was clickable, but the link went to nowhere.
  • The image_link was empty although I placed a link in the frontend configurator.

If anyone knows where the error was, I'd be thankful but until then the hard coded link might work. ;)

0 Likes