Make slideshow image clickable

[CovFK]

Hi, I want to create a slideshow banner with 2/3 banners but I can't work out how to make the whole banner clickable. Tried a couple of things but not working. I have the Dawn theme.

www.mkfireworksking.co.uk

[NadiaAnthony · Accepted solution]

You'll need to do some custom coding to achieve this. Navigate to Online Store > Themes > "..." > Edit Code. Open the Section file titled "slideshow.liquid". Around line 157, you'll find something like:

<div class="slideshow__text-wrapper banner__content banner__content--{{ block.settings.box_align }} page-width{% if block.settings.show_text_box == false %} banner--desktop-transparent{% endif %}{% if settings.animations_reveal_on_scroll and forloop.index == 1 %} scroll-trigger animate--slide-in{% endif %}">

Make a new line break after this and add the following.

<a {% if block.settings.link %}
   href="{{ block.settings.link }}"
   {% else %}
   role="link" aria-disabled="true"
   {% endif %}
   style="position: absolute; height: 100%; width: 100%;"
>

 Here is the tricky part... You have to close this in the right place. Scroll down about 30 lines to about 189 and look for: 

{%- endif -%}
</div>

Make a new line break below the </div> and add: 

</a>

Final closing part should look like:

{%- endif -%}
</div>
</a>

You should now be able to add slides to your slideshows in the front end and be able to click the entire image instead of JUST the button.