Notice: End-of-Life Announcement for all Shopify themes by Barrel > Read More

Close

Make entire slideshow image clickable

This tutorial was written for version 1.0.12 of Mosaic. It should work for most other versions of the theme as well.

By default, the slideshow images in the homepage hero module are not clickable — only the buttons that are featured on each slideshow image.

This tutorial will show you how to make the entire slideshow image link to the page that the button (on that slideshow image) links to.

In order for this tutorial to work, you must have the link URL specified in the slideshow image theme settings here:

button link

 

  1. Go to Edit HTML/CSS to edit the theme code. Shopify has a guide on how to do this here.
  2. Go to the Snippets folder and open the file called module-hero.liquid.
  3. Starting around line 14, look for the piece of code that looks like this::
    <div class="hero-slide js-slide">
      <div class="slide-inner" data-bg-src="{{ image | asset_url }}">
        <div class="container">
          <div class="row row-lg">
            <div class="slide-content">
              <h1 class="h0 bold">{{ settings[title] }}</h1>
    
              {% if settings[subtitle] != '' %}
                <h2>{{ settings[subtitle] }}</h2>
              {% endif %}
    
              {% if settings[cta] != '' %}
                <a href="{{ settings[href] }}" class="button">{{ settings[cta] }}</a>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
    </div>
  4. Add in the code in blue, as you see below:
    <div class="hero-slide js-slide">
      <div class="slide-inner" data-bg-src="{{ image | asset_url }}">
        <div class="container">
          <a href="{{ settings[href] }}"><div class="row row-lg">
            <div class="slide-content">
              <h1 class="h0 bold">{{ settings[title] }}</h1>
    
              {% if settings[subtitle] != '' %}
                <h2>{{ settings[subtitle] }}</h2>
              {% endif %}
    
              {% if settings[cta] != '' %}
                <a href="{{ settings[href] }}" class="button">{{ settings[cta] }}</a>
              {% endif %}
            </div>
          </div></a>
        </div>
      </div>
    </div>

Voila! That’s it.

 

NOTE: If you’d like for the button to not appear at all, simply leave the “Button” field blank, like this…

button optional