Tutorial: Making Your Slideshow Clickable

Bo
Shopify Staff (Retired)
Shopify Staff (Retired)
1784 193 556

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

chokhahaar
Excursionist
40 0 5

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

I am using Brooklyn theme.

Please help

0 Likes
Bo
Shopify Staff (Retired)
Shopify Staff (Retired)
1784 193 556

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

0 Likes
chokhahaar
Excursionist
40 0 5

 

I did not find any search results for <img

 

slideshow.png

Bo
Shopify Staff (Retired)
Shopify Staff (Retired)
1784 193 556

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
40 0 5

hey

is this where i should add the above mentioned code?

 

Screenshot_6.png

0 Likes
Bo
Shopify Staff (Retired)
Shopify Staff (Retired)
1784 193 556

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

 

Bo 

Bo | Retired Staff Member

0 Likes
chokhahaar
Excursionist
40 0 5

 

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

0 Likes
Bo
Shopify Staff (Retired)
Shopify Staff (Retired)
1784 193 556

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

0 Likes
CristianXFree
New Member
2 0 0

NVM.  thanks for this forum!

0 Likes