How To Make An Image Banner Clickable In Shopify

By /

Adding a clickable image banner in Shopify can improve user experience and drive traffic to key pages like product collections, promotions, or special offers. Unfortunately, the default image banner section in Shopify free themes doesn’t include an option to make the entire banner clickable. But don’t worry! You can easily achieve this by making a few simple changes.

1. Access Your Theme Code And Locate The Image Banner Section File

In your Shopify admin, go to Online Store > Themes and click Actions > Edit Code on your active theme. Locate the image-banner.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. It will look like this:

{% schema %}
{
  "name": "t:sections.image-banner.name",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "t:sections.image-banner.settings.image.label"
    },
    {
      "type": "image_picker",
      "id": "image_2",
      "label": "t:sections.image-banner.settings.image_2.label"
    },

Add the following code directly below the code mentioned in the previous block. This will add a setting to assign a link to your banner.

{
    "type": "url",
    "label": "Banner Link",
    "id": "banner_link"
},

3. Add The Code That Will Assign The Link To Your Image Banner

In the same image-banner.liquid file, find the following code:

id="Banner-{{ section.id }}"

Add the following code directly in the same line after the code just mentioned:

{% if section.settings.banner_link != blank %} onclick="location.href='{{ section.settings.banner_link }}';" style="cursor: pointer;" {% 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 image banner or edit an existing one on your website. In both cases, there should be an option to add a link to them. Paste the desired URL in the Banner Link field, save your changes, and test your website. Click your image banner and confirm that it opens the link you just assigned it.

Now, your Shopify banner 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