Tutorial: Making Your Slideshow Clickable

Bo
Shopify Staff (Retired)
Shopify Staff (Retired)
1793 196 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 42 (42)
AndrewBrian
Excursionist
21 3 7

Hi Bo!

I used your guide and pasted the code below where you said - it definitely made the slideshow clickable, however it is clickable no matter what - even without an image or a link, you can still click on the slideshow and it reloads the page.

I don't necessarily want all of my slideshow pictures to be clickable, is there way to make it so it only has a link if you add a link url to the field?

Thanks,

vickybanoo
New Member
2 0 0

can use this code another theme like 3rd party theme it's works 

 

KrystalK87
Shopify Partner
11 0 5

Hi! Would you be able to provide the code to make the slideshow clickable on the Dawn theme?

peppep
Tourist
5 0 2

Hey, thank you for your great tutorial. I have  added the code, but when clicking on the slider image it will always reload the homepage. No matter what button link i am using. Can you help me with  that? Thank you.

kb338
Tourist
9 0 4

hello @Bo 

 

Thank you for your tutorial. I tested and works perfectly with Debut theme.

 

But when I switch to my favourite "Craft" theme and want to apply for the same approach, the coding is however totally different. Could you kindly advise?

 

Many thanks!

 

kb

 

Denzel
Shopify Partner
42 0 19

i need a code like this for DAWN theme 

PPUSA
Excursionist
34 0 11

Were you able to find this?

PPUSA
Excursionist
34 0 11

Were you able to find this?

KrystalK87
Shopify Partner
11 0 5

@diego_ezfy posted the code in this thread and it worked for me:

 

https://community.shopify.com/c/shopify-design/dawn-theme-make-image-banner-clickable/td-p/1308721/p... 

 

Thanks @Diego_ezfy! 

 

This is the tutorial to make dawn clickable:

https://ezfycode.com/blog/dawn-theme-clickable-banner-tutorial

Gina1682
Excursionist
14 0 8

Hi - I tried this for the debut theme and it didn't work. I saw someone else tried using it for the debut theme too and it didn't work. Mine was pasted in the same spot as his in the picture he shared. Any suggestions? 

Gina1682
Excursionist
14 0 8

Hi - did you get a resolution for this? I am having the same issue. I left a new comment but did exactly what you did and there is no button field that shows up. 

Denzel
Shopify Partner
42 0 19

hey, which theme are you trying to use it on?

Gina1682
Excursionist
14 0 8
Gina1682
Excursionist
14 0 8
Gina1682
Excursionist
14 0 8

Can you provide a solution for this?

AngelCompany1
Excursionist
22 1 4

This worked amazingly!!! I just wish I knew how to do this for image banners 

 

thomas06
Tourist
8 0 1

Hello,

I am using the free "refresh" theme.

Is there a procedure to succeed for this theme?

Thanks in advance.

CaitS
Tourist
4 0 1

Hi,

Is it possible to have updated coding for the new Shopify "Ride" theme?

Thanks

OliviaAnn
New Member
7 0 0

How can I implement this with 2.0 Sense theme?

briangllc
New Member
1 0 0

How can I add this feature to the Dawn theme?