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.

[chokhahaar]

I am unable to find   <img   after I open slideshow.liquid   ,

I am using Brooklyn theme.

Please help

[Bo]

Hey there, @chokhahaar ! If you are using the Brooklyn theme you should be able to find it using the "Find" keyboard shortcut. This guide details how to do so. 

All the Best,

Bo

[chokhahaar]

I did not find any search results for <img

[Bo]

Hey again! You will need to have clicked into the code for it to search the file. Click anywhere within the slideshow.liquid and then use your find shortcut to search for <img

All the Best,

Bo

[chokhahaar]

hey

is this where i should add the above mentioned code?

[Bo]

Yes, I would recommend adding the code right above <img as this tutorial outlines. 

Bo 

[chokhahaar]

thankyou so much your code has sorted the slideshow images for me, is there any chance you can help me with this header overlapping the slide show issue.

my website url is https://chokhahaar.com/

[Bo]

Hey there, @chokhahaar 

Please create a new topic in the Design board for this issue. This tutorial and thread is specifically for making the slideshow clickable, we do not want to populate the thread with posts and questions that are not directly related. 

All the Best,

Bo

[CristianXFree]

NVM.  thanks for this forum!

[mrdetente]

Is there a way to apply this to a custom content image? I'd love for all of my images (including text columns with images) to be clickable.

[Bo]

Hey there, @mrdetente ! 

This is not something that is currently supported by our themes team, however, I would recommend starting a new topic in the Design Forum to see if there are any developers out there that can help you with this. I would recommend checking out our Help Us Help You post before you post your query to make sure that you are providing all the relevant information that a developer will need. 

All the Best,

Bo

[aalkhaja]

thanks a lot for the tutorial very helpful.

is their a way to make the subheading of the slideshow also clickable?

[Luvita]

Hi There

Thanks for this. I noticed that for my mobile version, the slider buttons are not very well integrated with the image - it appears below each image - please see below. Is there a way to modify the slider buttons so that they appear centred and to the left and right of each image, whilst of course removing the white background and the tiny circle sliders?

[Soon]

I followed your steps but does not function for DEBUT THEME, please check if i added it in the right place?

[Soon]

The button is displaying even after adding the code 

[NicolasMaverde]

Hello @Bo ,

thanks for this, nice job!

I need the same function but instead on slideshow images I want to make the image in my hero liquid clickable?

So I don´t need a button anymore.

I am using the debut theme. Can you help me?

Thanks!

Nicolas

[Bo]

Hey there, @NicolasMaverde 

Bo here from Shopify Support! 

I would recommend posting this query in its own thread in the design board so more people will be able to see it and assist with it. Make sure to read Help Us Help You before posting. 

All the Best,

Bo

[readytocry]

I tried the same thing as "Soon" in the Debut Theme and unfortunately it did not work. Is this the correct place?

Edit: It works. However, each slide is clickable now, even if no link is stored. This is normal, isn't it?

[Bo]

Hey there, @readytocry!

That is the expected behavior, yes! 

All the Best,

Bo