Cacher is the code snippet organizer for pro developers

Theme: Debut

Version(s) successfully tested on: 11.3.0

Recommended design time: 10 mins

---

What you have

A slideshow without link:

What you want

To make the slideshow clickable:

How you get it

Step 1:

1. Open up slideshow.liquid Find this code {% if block.settings.image == blank %}. Add this code below it:

 {% if block.settings.whole_slide_as_link and block.settings.button_link %}
          <a href="{{ block.settings.button_link}}">
 {% endif %} 

It should look like this:

2. In the same file, find this code <div class="slideshow__image js. Add this code below the entire div:

 {% if block.settings.whole_slide_as_link and block.settings.button_link %}
            </a>
 {% endif %}

It should look like this:

3. In the same file, find this code <div class="slideshow__image box. Add this code above it:

 {% if block.settings.whole_slide_as_link and block.settings.button_link %}
          <a href="{{ block.settings.button_link}}">
 {% endif %}  

It should look like this:

4. In the same file, find this code </noscript>. Add this code below it:

  {% if block.settings.whole_slide_as_link %}
        </a> 
  {% endif %}

It should look like this:

5. In the same file, find this code slideshow__text-content-list. Add this code above it:

  {% if block.settings.whole_slide_as_link and block.settings.button_link %}
                    <a href="{{ block.settings.button_link}}">
        {% endif %}

It should look like this:

6. Now find the 2nd instance of this code assign show_link_button = false. Add this code above the {%- endunless -%}:

  {% if block.settings.whole_slide_as_link %}
                 </a> 
  {% endif %}

It should look like this:

Step 2:

In the same file find this code image_picker, add this code above it:

 {
  "type": "checkbox",
  "id": "whole_slide_as_link",
  "label": "Whole slide as link",
  "default": true
},

Save it and it's ready!