Tutorial: Making Your Slideshow Clickable

[Bo]

One customization request that our team has seen a lot of demand for is making the slideshow of a theme clickable. In this guide, we will go through the necessary steps to achieve this by adding some code to the Slideshow theme file. The result will have your slideshow going from this:

To this:

Note: 

If you're using a free theme from Shopify, then our Support team might be able to help you with this tutorial. Although Shopify can help you with many customizations, some kinds of customizations aren't supported.

If you're using a paid theme, then your theme was made by a third-party developer and Shopify's Support team can't help you with it. If you need help customizing a paid theme, then consider hiring a Shopify Expert. Similar to free themes, some kinds of customizations aren't supported because of limitations associated with the theme or Shopify admin.

Disclaimer: 

The Supply theme already has this setting under ‘Slideshow > Link URL’.

Important: 

The following tutorials are tested on themes published on Sept 2020

Step One: Edit Your Theme Code:

Go to Online Store > Current Theme > Actions > Edit Code. 

Debut: 

1. Open slideshow.liquid
2. Find the following:

<div id="slickSlide-{{ block.id }}" 

On older versions of Debut it may be <div class="slideshow__slide slideshow__slide--{{ block.id }}" {{ block.shopify_attributes }}> 

    3. Add this snippet of code right below it:

<style>
  .slide__link {
    width: 100%;  
    height: 100%;  
    position: absolute;  
    z-index: 9;
  }
</style>
<a class="slide__link" href="{{ block.settings.button_link }}"></a>

    4 Click Save. 

Narrative: 

1. Open slideshow.liquid and find <img
2. Add the following right above it: 

   <style>
     .slide__link {
       width: 100%;
       height: 100%;
       position: absolute;
       z-index: 9;
     }
     {% if cta == blank %}
     .slideshow__heading-cta.btn {
       display: none;
     }
   {% endif %}
   </style>
   <a href="{{ block.settings.cta_link }}" class="slide__link"></a>
   

      3. Click Save. 

Minimal:

1. Open slider.liquid, find  <img
2. Add the following right above it: 

   <style>
     .slide__link {
       width: 100%;  
       height: 100%;  
       position: absolute;  
       z-index: 2;
     }
   </style>
   <a class="slide__link" href="{{ block.settings.button_link }}"></a>
   ​

     3. Click Save. 

Brooklyn, Boundless, and Simple:

1. Open slideshow.liquid, and find <img
2. Add this right above it: 

   <style>
     .slide__link {
       width: 100%;  
       height: 100%;  
       position: absolute;  
       z-index: 9;
     }
   </style>
   <a class="slide__link" href="{{ block.settings.button_link }}"></a>

3. Click Save. 

Venture:

1. Open slideshow.liquid
2. Find <img, add the following right above it: 

   <style>
     .slide__link {
       width: 100%;  
       height: 100%;  
       position: absolute;  
       z-index: 999999;
     }
     .hero-content__controls {
       width: fit-content;
     }
   </style>
   <a class="slide__link" href="{{ block.settings.button_link }}"></a>
   
   
   ​

3. Find <h2, add this right above it:
   

   <a class="slide__link" href="{{ block.settings.button_link }}"></a>​

4. Click Save. 

Step 2: 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 ‘Button link’.

Click Save.

If you have any questions regarding this tutorial, feel free to comment on this thread. Please note that this tutorial is for Shopify Supported themes only and that we will be unable to assist with any third-party themes.

[Exproarzana]

Hi, can you help with Dawn theme?

[Denzel]

@Exproarzana 

1. From your Shopify Admin go to: online store > themes > actions > edit code
2. Find the file named exactly “image-banner.liquid”
3. Delete everything in there and paste this code:
   

{% if section.settings.link != blank %}

<a class="ezfy-custom-link" 
   href="{{ section.settings.link }}"
   {% if section.settings.new_tab %}target="_blank"{% endif %}
   ></a>
<style>
.image-banner-section{
    position: relative;
}
#shopify-section-header{
z-index: 4 !important;
}
.image-banner-section a.ezfy-custom-link{
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}
</style>
{% endif %}

{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}

{%- if section.settings.adapt_height_first_image and section.settings.image != blank -%}
  {%- style -%}
  @media screen and (max-width: 749px) {
    #Banner-{{ section.id }}::before,
    #Banner-{{ section.id }} .banner__media::before,
    #Banner-{{ section.id }}:not(.banner--mobile-bottom) .banner__content::before {
      padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
      content: '';
      display: block;
    }
  }

  @media screen and (min-width: 750px) {
    #Banner-{{ section.id }}::before,
    #Banner-{{ section.id }} .banner__media::before {
      padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
      content: '';
      display: block;
    }
  }
  {%- endstyle -%}
{%- endif -%}

{%- style -%}
  #Banner-{{ section.id }}::after {
    opacity: {{ section.settings.image_overlay_opacity | divided_by: 100.0 }};
  }
{%- endstyle -%}

<div id="Banner-{{ section.id }}" class="banner banner--content-align-{{ section.settings.desktop_content_alignment }} banner--content-align-mobile-{{ section.settings.mobile_content_alignment }} banner--{{ section.settings.image_height }}{% if section.settings.stack_images_on_mobile and section.settings.image != blank and section.settings.image_2 != blank %} banner--stacked{% endif %}{% if section.settings.adapt_height_first_image and section.settings.image != blank %} banner--adapt{% endif %}{% if section.settings.show_text_below %} banner--mobile-bottom{%- endif -%}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %}">
  {%- if section.settings.image != blank -%}
    <div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}">
      <img
        srcset="{%- if section.settings.image.width >= 375 -%}{{ section.settings.image | img_url: '375x' }} 375w,{%- endif -%}
          {%- if block.settings.image.width >= 550 -%}{{ block.settings.image | img_url: '550x' }} 550w,{%- endif -%}
          {%- if section.settings.image.width >= 750 -%}{{ section.settings.image | img_url: '750x' }} 750w,{%- endif -%}
          {%- if section.settings.image.width >= 1100 -%}{{ section.settings.image | img_url: '1100x' }} 1100w,{%- endif -%}
          {%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
          {%- if section.settings.image.width >= 1780 -%}{{ section.settings.image | img_url: '1780x' }} 1780w,{%- endif -%}
          {%- if section.settings.image.width >= 2000 -%}{{ section.settings.image | img_url: '2000x' }} 2000w,{%- endif -%}
          {%- if section.settings.image.width >= 3000 -%}{{ section.settings.image | img_url: '3000x' }} 3000w,{%- endif -%}
          {%- if section.settings.image.width >= 3840 -%}{{ section.settings.image | img_url: '3840x' }} 3840w,{%- endif -%}
          {{ section.settings.image | img_url: 'master' }} {{ section.settings.image.width }}w"
        sizes="{% if section.settings.image_2 != blank and section.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif section.settings.image_2 != blank %}50vw{% else %}100vw{% endif %}"
        src="{{ section.settings.image | img_url: '1500x' }}"
        loading="lazy"
        alt="{{ section.settings.image.alt | escape }}"
        width="{{ section.settings.image.width }}"
        height="{{ section.settings.image.width | divided_by: section.settings.image.aspect_ratio }}"
        {% if section.settings.image_2 != blank %}class="banner__media-image-half"{% endif %}
      >
    </div>
  {%- elsif section.settings.image_2 == blank -%}
    <div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}">
      {{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
    </div>
  {%- endif -%}
  {%- if section.settings.image_2 != blank -%}
    <div class="banner__media media{% if section.settings.image != blank %} banner__media-half{% endif %}">
      <img
        srcset="{%- if section.settings.image_2.width >= 375 -%}{{ section.settings.image_2 | img_url: '375x' }} 375w,{%- endif -%}
          {%- if section.settings.image_2.width >= 750 -%}{{ section.settings.image_2 | img_url: '750x' }} 750w,{%- endif -%}
          {%- if section.settings.image_2.width >= 1100 -%}{{ section.settings.image_2 | img_url: '1100x' }} 1100w,{%- endif -%}
          {%- if section.settings.image_2.width >= 1500 -%}{{ section.settings.image_2 | img_url: '1500x' }} 1500w,{%- endif -%}
          {%- if section.settings.image_2.width >= 1780 -%}{{ section.settings.image_2 | img_url: '1780x' }} 1780w,{%- endif -%}
          {%- if section.settings.image_2.width >= 2000 -%}{{ section.settings.image_2 | img_url: '2000x' }} 2000w,{%- endif -%}
          {%- if section.settings.image_2.width >= 3000 -%}{{ section.settings.image_2 | img_url: '3000x' }} 3000w,{%- endif -%}
          {%- if section.settings.image_2.width >= 3840 -%}{{ section.settings.image_2 | img_url: '3840x' }} 3840w,{%- endif -%}
          {{ section.settings.image_2 | img_url: 'master' }} {{ section.settings.image_2.width }}w"
        sizes="{% if section.settings.image != blank and section.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif section.settings.image != blank %}50vw{% else %}100vw{% endif %}"
        src="{{ section.settings.image_2 | img_url: '1500x' }}"
        loading="lazy"
        alt="{{ section.settings.image_2.alt | escape }}"
        width="{{ section.settings.image_2.width }}"
        height="{{ section.settings.image_2.width | divided_by: section.settings.image_2.aspect_ratio }}"
        {% if section.settings.image != blank %}class="banner__media-image-half"{% endif %}
      >
    </div>
  {%- endif -%}
  <div class="banner__content banner__content--{{ section.settings.desktop_content_position }} page-width">
    <div class="banner__box color-{{ section.settings.color_scheme }}">
      {%- for block in section.blocks -%}
        {%- case block.type -%}
          {%- when 'heading' -%}
            <h2 class="banner__heading {% if block.settings.heading_size == 'medium' %}h1{% else %}h0{% endif %}" {{ block.shopify_attributes }}>
              <span>{{ block.settings.heading | escape }}</span>
            </h2>
          {%- when 'text' -%}
            <div class="banner__text {{ block.settings.text_style }}" {{ block.shopify_attributes }}>
              <span>{{ block.settings.text | escape }}</span>
            </div>
          {%- when 'buttons' -%}
            <div class="banner__buttons{% if block.settings.button_label_1 != blank and block.settings.button_label_2 != blank %} banner__buttons--multiple{% endif %}" {{ block.shopify_attributes }}>
              {%- if block.settings.button_label_1 != blank -%}
                <a{% if block.settings.button_link_1 == blank %} role="link" aria-disabled="true"{% else %} href="{{ block.settings.button_link_1 }}"{% endif %} class="button{% if block.settings.button_style_secondary_1 %} button--secondary{% else %} button--primary{% endif %}">{{ block.settings.button_label_1 | escape }}</a>
              {%- endif -%}
              {%- if block.settings.button_label_2 != blank -%}
                <a{% if block.settings.button_link_2 == blank %} role="link" aria-disabled="true"{% else %} href="{{ block.settings.button_link_2 }}"{% endif %} class="button{% if block.settings.button_style_secondary_2 %} button--secondary{% else %} button--primary{% endif %}">{{ block.settings.button_label_2 | escape }}</a>
              {%- endif -%}
            </div>
        {%- endcase -%}
      {%- endfor -%}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "t:sections.image-banner.name",
  "tag": "section",
  "class": "spaced-section spaced-section--full-width image-banner-section",
  "settings": [
   {
      "type": "url",
      "id": "link",
      "label": "Link"
    },
     {
      "type": "checkbox",
      "id": "new_tab",
      "default": false,
      "label": "Open in new tab?"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "t:sections.image-banner.settings.image.label"
    },
    {
      "type": "image_picker",
      "id": "image_2",
      "label": "t:sections.image-banner.settings.image_2.label"
    },
    {
      "type": "range",
      "id": "image_overlay_opacity",
      "min": 0,
      "max": 100,
      "step": 10,
      "unit": "%",
      "label": "t:sections.image-banner.settings.image_overlay_opacity.label",
      "default": 0
    },
    {
      "type": "select",
      "id": "image_height",
      "options": [
        {
          "value": "small",
          "label": "t:sections.image-banner.settings.image_height.options__1.label"
        },
        {
          "value": "medium",
          "label": "t:sections.image-banner.settings.image_height.options__2.label"
        },
        {
          "value": "large",
          "label": "t:sections.image-banner.settings.image_height.options__3.label"
        }
      ],
      "default": "medium",
      "label": "t:sections.image-banner.settings.image_height.label",
      "info": "t:sections.image-banner.settings.image_height.info"
    },
    {
      "type": "checkbox",
      "id": "adapt_height_first_image",
      "default": false,
      "label": "t:sections.image-banner.settings.adapt_height_first_image.label",
      "info": "t:sections.image-banner.settings.adapt_height_first_image.info"
    },
    {
      "type": "select",
      "id": "desktop_content_position",
      "options": [
        {
          "value": "top-left",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__1.label"
        },
        {
          "value": "top-center",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__2.label"
        },
        {
          "value": "top-right",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__3.label"
        },
        {
          "value": "middle-left",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__4.label"
        },
        {
          "value": "middle-center",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__5.label"
        },
        {
          "value": "middle-right",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__6.label"
        },
        {
          "value": "bottom-left",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__7.label"
        },
        {
          "value": "bottom-center",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__8.label"
        },
        {
          "value": "bottom-right",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__9.label"
        }
      ],
      "default": "middle-center",
      "label": "t:sections.image-banner.settings.desktop_content_position.label"
    },
    {
      "type": "checkbox",
      "id": "show_text_box",
      "default": true,
      "label": "t:sections.image-banner.settings.show_text_box.label"
    },
    {
      "type": "select",
      "id": "desktop_content_alignment",
      "options": [
        {
          "value": "left",
          "label": "t:sections.image-banner.settings.desktop_content_alignment.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.image-banner.settings.desktop_content_alignment.options__2.label"
        },
        {
          "value": "right",
          "label": "t:sections.image-banner.settings.desktop_content_alignment.options__3.label"
        }
      ],
      "default": "center",
      "label": "t:sections.image-banner.settings.desktop_content_alignment.label"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.image-banner.settings.color_scheme.options__1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.image-banner.settings.color_scheme.options__2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.image-banner.settings.color_scheme.options__3.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.image-banner.settings.color_scheme.options__4.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.image-banner.settings.color_scheme.options__5.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.image-banner.settings.color_scheme.label",
      "info": "t:sections.image-banner.settings.color_scheme.info"
    },
    {
      "type": "header",
      "content": "t:sections.image-banner.settings.header.content"
    },
    {
      "type": "select",
      "id": "mobile_content_alignment",
      "options": [
        {
          "value": "left",
          "label": "t:sections.image-banner.settings.mobile_content_alignment.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.image-banner.settings.mobile_content_alignment.options__2.label"
        },
        {
          "value": "right",
          "label": "t:sections.image-banner.settings.mobile_content_alignment.options__3.label"
        }
      ],
      "default": "center",
      "label": "t:sections.image-banner.settings.mobile_content_alignment.label"
    },
    {
      "type": "checkbox",
      "id": "stack_images_on_mobile",
      "default": true,
      "label": "t:sections.image-banner.settings.stack_images_on_mobile.label"
    },
    {
      "type": "checkbox",
      "id": "show_text_below",
      "default": true,
      "label": "t:sections.image-banner.settings.show_text_below.label"
    }
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "t:sections.image-banner.blocks.heading.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "Image banner",
          "label": "t:sections.image-banner.blocks.heading.settings.heading.label"
        },
        {
          "type": "select",
          "id": "heading_size",
          "options": [
            {
              "value": "medium",
              "label": "t:sections.image-banner.blocks.heading.settings.heading_size.options__1.label"
            },
            {
              "value": "large",
              "label": "t:sections.image-banner.blocks.heading.settings.heading_size.options__2.label"
            }
          ],
          "default": "medium",
          "label": "t:sections.image-banner.blocks.heading.settings.heading_size.label"
        }
      ]
    },
    {
      "type": "text",
      "name": "t:sections.image-banner.blocks.text.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "text",
          "default": "Give customers details about the banner image(s) or content on the template.",
          "label": "t:sections.image-banner.blocks.text.settings.text.label"
        },
        {
          "type": "select",
          "id": "text_style",
          "options": [
            {
              "value": "body",
              "label": "t:sections.image-banner.blocks.text.settings.text_style.options__1.label"
            },
            {
              "value": "subtitle",
              "label": "t:sections.image-banner.blocks.text.settings.text_style.options__2.label"
            },
            {
              "value": "caption-with-letter-spacing",
              "label": "t:sections.image-banner.blocks.text.settings.text_style.options__3.label"
            }
          ],
          "default": "body",
          "label": "t:sections.image-banner.blocks.text.settings.text_style.label"
        }
      ]
    },
    {
      "type": "buttons",
      "name": "t:sections.image-banner.blocks.buttons.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "button_label_1",
          "default": "Button label",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_label_1.label",
          "info": "t:sections.image-banner.blocks.buttons.settings.button_label_1.info"
        },
        {
          "type": "url",
          "id": "button_link_1",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_link_1.label"
        },
        {
          "type": "checkbox",
          "id": "button_style_secondary_1",
          "default": false,
          "label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_1.label"
        },
        {
          "type": "text",
          "id": "button_label_2",
          "default": "Button label",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_label_2.label",
          "info": "t:sections.image-banner.blocks.buttons.settings.button_label_2.info"
        },
        {
          "type": "url",
          "id": "button_link_2",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_link_2.label"
        },
        {
          "type": "checkbox",
          "id": "button_style_secondary_2",
          "default": false,
          "label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_2.label"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.image-banner.presets.name",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "text"
        },
        {
          "type": "buttons"
        }
      ]
    }
  ]
}
{% endschema %}

[rlomax87]

hi! thanks for this code! it worked for my image banner, but do you have a fix for the slideshow? right now, it's only clickable if i create/add a shopify button. the "button" that i wanna use is a part of my slide image design.

[NainaandNoor]

I did this with the theme "fashe". However, I couldn't find the img or div so I had to put it under a different section. While I made the slideshow clickable, I can't figure out where to link it because it didn't add a "button link" option on the theme. Any suggestions? My shop is "nainaandnoor.com". Thank you!