How To Make Each Slideshow Slide Clickable In Shopify

By /

Want to make your Shopify homepage slideshow more effective? By default, some themes only let you link buttons or text overlays, not the full slide image. But with a simple tweak, you can make the entire image of each slide clickable, creating a more intuitive shopping experience.

Why Make the Whole Slide Clickable?

Clickable slideshow images can:

  • Increase click-through rates (CTR)
  • Improve user experience, especially on mobile
  • Direct users more easily to collections, product pages, or promos

Here’s how to do it in just a few steps.

1. Access Your Theme Code And Locate The Slideshow Section File

In your Shopify admin, go to Online Store > Themes and click Actions > Edit Code on your active theme. Locate the slideshow.liquid file (or similar, depending on your theme).

2. Add The Setting To Include a Link In Your Image Banner

Inside the file, find the {% schema %} section, and look for the slide setting included in the “blocks” list. It will look like this:

"blocks": [
    {
      "type": "slide",
      "name": "t:sections.slideshow.blocks.slide.name",
      "limit": 5,
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "t:sections.slideshow.blocks.slide.settings.image.label"
        },
        {
          "type": "range",
          "id": "image_overlay_opacity",
          "min": 0,
          "max": 100,
          "step": 10,
          "unit": "%",
          "label": "t:sections.slideshow.blocks.slide.settings.image_overlay_opacity.label",
          "default": 0
        },

Add the following code directly below the code mentioned in the previous block. This will add a setting to assign a link to each of your slideshow’s your slides.

        {
          "type": "url",
          "label": "Slide Link",
          "id": "slide_link"
        },

3. Add The Code That Will Assign The Link To Your Slides

In the same slideshow.liquid file, find the code that generates each slide. It will usually start with the following line:

<div class="slideshow__text-wrapper banner__content

Add the following code directly in the line above, before the code just mentioned:

{% if block.settings.slide_link != blank %} <a href="{{ block.settings.slide_link }}" style="display: block;position: absolute;width: 100%;height: 100%;left: 0;top: 0;z-index: 999;"></a>{% endif %}

4. Save And Test Your Changes

Save the file and go to the Theme Editor. Make sure to reload it if it was already open on a different browser tab.

Now, you can add a new slideshow or edit an existing one on your website. To add a link, make sure to access each slide’s settings separately, not the general slideshow settings. Paste the desired URL in the Slide Link field, save your changes, and test your website. Click your slides and confirm that the links you just assigned open correctly.

Now, your Shopify slideshow is clickable and can redirect visitors to any page you choose! With this simple tweak, you can improve navigation and boost conversions.

Need personalized help? Feel free to get in touch!

Scroll to Top