FROM CACHE - en_header

Tutorial: Making Your Slideshow Clickable

Bo
Shopify Staff (Retired)
Shopify Staff (Retired)
1793 197 461

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:

 

 

 

 

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’.

20-09-z5609-bakpg

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.

 

Bo | Retired Staff Member

Replies 39 (39)
chokhahaar
Excursionist
41 0 8

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

I am using Brooklyn theme.

Please help

Bo
Shopify Staff (Retired)
Shopify Staff (Retired)
1793 197 461

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

Bo | Retired Staff Member

chokhahaar
Excursionist
41 0 8

 

I did not find any search results for <img

 

slideshow.png

Bo
Shopify Staff (Retired)
Shopify Staff (Retired)
1793 197 461

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

Bo | Retired Staff Member

chokhahaar
Excursionist
41 0 8

hey

is this where i should add the above mentioned code?

 

Screenshot_6.png

Bo
Shopify Staff (Retired)
Shopify Staff (Retired)
1793 197 461

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

 

Bo 

Bo | Retired Staff Member

chokhahaar
Excursionist
41 0 8

 

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/

Screenshot_9.pngScreenshot_8.png

Bo
Shopify Staff (Retired)
Shopify Staff (Retired)
1793 197 461

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

Bo | Retired Staff Member

CristianXFree
New Member
2 0 0

NVM.  thanks for this forum!

mrdetente
Tourist
5 0 7

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
Shopify Staff (Retired)
Shopify Staff (Retired)
1793 197 461

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

Bo | Retired Staff Member

aalkhaja
New Member
2 0 0

thanks a lot for the tutorial very helpful.

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

Luvita
Excursionist
55 0 9

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?

Screenshot 2020-11-16 at 13.35.28.png

Soon
Tourist
9 0 2

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

a.png

Soon
Tourist
9 0 2

The button is displaying even after adding the code 

NicolasMaverde
Explorer
74 1 33

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
Shopify Staff (Retired)
Shopify Staff (Retired)
1793 197 461

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

Bo | Retired Staff Member

readytocry
New Member
5 0 0

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
Shopify Staff (Retired)
Shopify Staff (Retired)
1793 197 461

Hey there, @readytocry!

 

That is the expected behavior, yes! 

 

All the Best,

Bo 

Bo | Retired Staff Member