fbpx
two differernt ways to make your banner image clickable using apps or manual coding

How to Make Image Banner Clickable Shopify for Free (2 Ways)

You understand that static images can’t grab the attention of your users. Whatever you are getting organic traffic or media buying on your store, users are not engaging with your generic banner image. That’s why they don’t have enough confidence to click any button or make a purchase from your store.

Then, are you looking for how to make image banner clickable Shopify? Don’t worry, you are in the right place where I’ll guide you to turn those plain pictures into dynamic links that drive traffic and sales.

After reading this blog post, you can add a link to the banner image on Shopify for a better UX and improved CTR. Good news! You don’t need to be a coding wizard or spend a lot of money on apps or plugins. You will get the required code for free from the expert team of ShopiDevs.

So, get ready to breathe new life into your Shopify store with clickable image banners!

13 Steps to Make Image Banner Clickable on Shopify for Free

Though there are different methods available to make your Shopify banner image clickable, adding a bit of code can be a good solution. Worry not, here you don’t need to generate code to make it clickable. I will provide everything for free, so let’s dive into the process:

Step 1: Login to Your Store Dashboard

Login to Your Store Dashboard as the first step of adding image

Step 2: Delete Existing Links (Button, Heading, or Text)

Now hover over the image banner heading, text, and buttons to delete the existing button, heading, or text links under the image banner section at the left sidebar. Then “Save” it; be careful, you shouldn’t delete the “Image banner” section.

Delete existing image banner, headings, and buttons from the Shopify store

Step-By-Step Guide on “How to Make Image Banner Clickable on Shopify” Using Custom Code with video instructions:

Step 3: Go to ‘Edit Code’ Option

Now exit ‘customize’ and go back to ‘Theme’

Click on the 3 dots (…) menu, at the left of the “Customize” opinion.

Go to the “Edit Code” option to add the clickable banner image code. (I recommend downloading the Theme File for backup purposes if something goes wrong.)

Shopify dashboard theme editor (three dots) option

Step 4: Search for ‘Image-banner.liquid’

Most probably you will be at the image-banner page because of the recent edits. If you aren’t on this page,

Search for ‘image-banner’. 

Select the ‘image-banner.liquid’ file to edit the file.

Find out the image-banner.liquid file from the Shopify theme editor

Step 5: Copy the CSS Code Below

{% if section.settings.banner_bg_link != blank %}
  {%- style -%}
    .hero-banner-full-link {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
    }
    .banner .banner__content .banner__box{
      z-index: 9;
    }
    .hero-banner-full-link {
      display: block !important;
    }
  {%- endstyle -%}
{%- endif -%}

Step 6: Paste the CSS Code After a Style Tag

Find out a Style tag {%- endstyle -%} and paste the CSS code you have from Step 5 after any one CSS tag.

Step 7: Copy the Liquid Code

{% if section.settings.banner_bg_link != blank %}
  <a class="hero-banner-full-link" {% if section.settings.banner_bg_link_open_new_tab %}target="_blank"{% endif %} href="{{ section.settings.banner_bg_link }}"></a>
{% endif %}

Step 8: Paste Liquid Code under

  • Search for “banner__box” to find out the content banner section <div>.
  • Go to the end of the <div class=”banner__box”> section.
  • Paste the liquid code after the closing of the banner box section.
Paste the liquid code for How to Make Image Banner Clickable Shopify

Step 9: Cut the Class Name ‘page-width’ and Paste it to Next <div>

  • At the first line of the “banner__box” div, you will find the class “page-width”.
  • Cut the “page-width” class from the first div (where it is now).
  • Paste it to the next div.
Cut and paste the class "page-width" to the next div

Step 10: Copy the Schema Json Code

{
  "type": "header",
  "content": "Background link"
},
{
  "type": "url",
  "id": "banner_bg_link",
  "label": "Banner background link"
},
{
  "type": "checkbox",
  "id": "banner_bg_link_open_new_tab",
  "default": false,
  "label": "Banner background open a new tab "
},

Step 11: Paste the Schema Json Code after “image-banner.settings” 

  • Copy the code “image-banner.setting”.
  • Paste the Json Schema code after the the ending of image-baanner.setting.
  • Click on “Save” 
Paste the Json schema code to make your banner image clickable

Step 12: Add Link to Shopify Banner Image

From the Dashboard > Online Store > Customize > Banner Image section click on the image banner, and you will have the option to add the link.

Also, you will have the option if you want to open the link in a new tab. Our developers also included a few animations on the banner for the best user experience for your store visitors. 

Add Link to Shopify Banner Image

Step 13: Test Shopify Image Banner Clickable or Not

Now click anywhere on the banner image to check your store has a clickable banner image. Yes, now your banner image is clickable as you can see here.

Test Shopify Image Banner Clickable or Not after adding the custome code and link

Yes! it is working. Now your banner image is clickable.

How to Add Link to Image Banner Shopify (Without Code)

Now you are getting to know about something special to make your Shopify banner image clickable. Yes, you don’t need to know coding; even this method doesn’t require you to go to the custom theme editor. Let’s explore the easiest process of how to make your Shopify image banner clickable:

Step 1: Log in to Shopify Store’s Dashboard

First of all, you need to log in to your Shopify store. Then, from the left sidebar, click on “Apps” and search for “Slider Revolution in the Shopify app store.

Search Slider Revolution app from the Shopify Appstore after logging in on the dashboard

Step 2: Install the Slider Revolution & Section App

Now install the app for free to add a link to your Shopify store’s banner image. In the free plan, you can add one slider, which is more than enough to make your whole banner clickable. Also, it has a lot of amazing animations and advanced features that can make your store more attractive and conversion-friendly.

Here, you can see that I have already installed the app, but you will see the “Install” button. Then click on the app and simply press the ‘install’ button to install this amazing page builder on your store.

Find out the slider revolution app and install it

Step 3: Open the App and Create a ‘New Blank Slider’

After completing the app installation, you need to open the Slider Revolution app. Now you are not at the Shopify dashboard; you are at the Slider Revolution’s dashboard. Here, you can find the “My Sliders” option below the dashboard; click on “My Sliders”.

Now you can add sliders from 300+ ready templates for various sections, which are proven to increase conversion rate on Shopify. But, as of now, we are not going to add templates because we will just make our Shopify banner image clickable. So, click on the “New Blank Slider“. Now, it will provide distractions and a guide on how to use this app in your store. You can explore the guide to become familiar with the interface.

Open my slider app and create a 'New Blank Slider' at the Slider Dashboard

Don’t be confused by seeing this picture, I’m leveraging the premium plan of the Slider Revolution app, that’s why I can use 40 sliders (used 4). You can use only one slider for free, and you will see (0/1) in this section. Though the 1 slide is enough to make your Shopify banner image clickable, I recommend exploring their other advanced features.

Step 4: Upload the Banner Image on Slider Revolution

After following the instructions, now you can add your banner image to the Slider Revolution dashboard. To do this, click on the small image icon on the right side of the ‘Slide BG Animation‘.

Upload the clickable banner image to the Slider Revolution Dashboard

Now look at the right side under the ‘Source‘ section, here change the file type from ‘Transparent’ to ‘Image’.Then you will have the “Media Library” option to upload the Shopify banner image from your computer.

Step 5: Select the Image and Customize Setting

Now select the image from the library and customize the image setting based on your/client’s requirements.

I have optimized the image size, and I want to show the image size fixed; that’s why I have selected ‘Auto’, align ‘center’. Also, add image alt text and title to make your image SEO-friendly.

Select the Image and Customize Setting of the clickable banner image

Step 6: Click on the ‘Tags and Link’

After successfully uploaded the image and customized the image settings, now it’s time to add the link. So, scroll up to the ‘Slide Options’ and click on the “Tags and Link” option.

Click om to the tags and link option of the Slider Revolution App dashboard

Step 7: Add URL and Save the Slider

Scroll down and find the “Link & SEO” section, then turn on the “Slide Link” toggle. Then you will have the option to add a link to the image banner on Shopify. So, insert your target URL here, and you can change the target ‘self’ to ‘blank’, if you want.

Add Link to Image Banner Shopify

Step 8: Copy the Shortcode of this Clickable Banner Image

Click on the Setting icon, which is “Module General Options“, and copy the shortcode by clicking on the “Copy Shortcode” button. It will help to connect this clickable banner image to your Shopify store.

Copy the Shortcode of this Clickable Banner Image

Also, you can check the instructions in “How to Publish” to publish this slide on your Shopify store.

Step 9: Go to Shopify Store > Themes > Customize

We have created a clickable banner image by following the previous 8 steps and maximizing sales in Shopify; now we need to publish the image on the Shopify store. You don’t have any tasks on the Slider Revolution dashboard. So, go to the ‘Shopify store dashboard’, then go to the “Online Store”>”Themes,” then click on the “Customize” button.

Shopify dashboard to click at the customize button

Step 10: Delete the Non-Clickable Banner Image

Find out the “Image banner” option, where your existing non-clickable image banner section is showing. Then hover over on the image banner section where the arrow is pointing, and you will have the “delete icon” Click on it to delete it. Now you have removed the banner image from your store. Don’t worry!

Delete the Non-Clickable Banner Image from the Shopify store

Step 11: Add a General Slider Block

Hover your mouse cursor under the ‘template’ to view the ‘+’ icon for adding a new block to the theme. Click on the Plus ‘+’ icon, then you can see two columns called ‘Section’, which is default, and ‘Apps’.

Click on the ‘Apps’, then you can see all the features of your installed apps, including slider revolutions. Here you need to add the “General Slider” section from the Slider Revolution app.

Add a General Slider Block from the slider revolution app on Shopify

Step 12: Open the General Slider App

Now open the “General Slider” section where you will have the option to input the shortcode you have copied from Slider Revolution (Step 8th).

Open General Slider App from the Shopify store customization

Step 13: Paste the Shortcode

Paste the clickable banner image shortcode for Shopify on this field. This code you have copied from the Slider Revolution app’s dashboard. You can consider this shortcode as the key of your clickable image (Designed on the App).

Paste the short code, which is copied in step 8th

Have you pasted the code, but the banner is not showing? Don’t panic; it will not work until you activate the app. So, you can just click on the “Save” button without seeing anything change at the front end.

Step 14: Activate the Slider Revolution App and Save

Look at the left sidebar, below the setting icon, where you can see the “App Embedes” icon. Click on this icon, where you will have all the apps you have installed on this store. Here, you will have the app deactivated, so click on the toggle to turn on and activate the Slider Revolution app. And, “Save” it.

Activate the Slider Revolution App for the solution of How to Make Image Banner Clickable Shopify

Congratulations!

You have completed all steps successfully, and you have made the image banner clickable on Shopify. If we wrap up these 14 steps of how to add a link to the Shopify Store banner image, then we can divide it into 3 main parts.

First, we need to create a clickable banner image using the Slide Revolution App. Second, we need to connect a clickable image to the Shopify store using the shortcode. Finally, activate the app on the store and ‘Save’ this. If are facing any issues with making the banner image clickable, feel free to consult with our support team.

5 Best Practices Add Link to Image Banner Shopify

Making image banners clickable on Shopify is essential for better navigation and conversions. But only adding a generic image can’t attract your shop visitors. So, check these 5 best practices to make persuasive and effective clickable image banners.

  • Use high-quality images to attract attention while maintaining your brand’s theme color.
  • Add a clear CTA like “Shop Now,” ensuring strategic placement and action-oriented language to encourage clicks.
  • Ensure your store’s banner image is responsive for all devices by using the perfect banner image size for Shopify.
  • Optimize images for search engines by using ALT text, captions, file size optimizations, etc.
  • Monitor CTR and implement A/B Testing with different banner designs, CTR placement, changing copy, etc.

Conclusion

Adding a link to your store’s banner image can be a bit functional and a hassle for a non-techy person. But it is true that this is one of the most important places to convert your first visitors into customers.

That’s why I have shown two different ways of ‘How to Make Image Banner Clickable Shopify’ for free without coding. The first one is by editing image-banner.liquid code (I have provided the code for free). Also, the second one is by using the Slider Revolution App for free. You can choose any one of these two methods, which is more suitable for you.

By following these step-by-step guides, you can easily transform your static banner image into a compelling and clickable banner image.

FAQs

What if My Theme Doesn’t Support Clickable Banners?

You’re right, there are a lot of themes that don’t support clickable banner images on the Shopify store. But don’t worry, you can still make your banner clickable by adding a bit of custom code. If you are afraid of listening to ‘custom code’, then we have another easiest option like “Slider Revolution.”

Can I Make Multiple Banners Clickable on Shopify?

Yes! You can make multiple banners clickable on Shopify by following the same steps for each banner section. Whether through the theme editor or custom code, you can make as many banners clickable as you need. But remember to consider the placement of your banners. Because too many banners can clutter your store and distract visitors.

Do Clickable Banners Affect SEO?

No, if you follow the basic rules of SEO, then a clickable banner will not affect SEO. Even it can improve your ranking by increasing engagement, CTR, and user experience. But if you don’t maintain SEO rules like optimizing image size, using alt text, etc., then it might show down your page by increasing FCP and LCP.

Leave a Comment

Your email address will not be published. Required fields are marked *

🚀🔥 BFCM Big Deals: Big savings up to 60% off on our Shopify apps!

X
Scroll to Top

Check out these Top rated apps and themes to help your business thrive!

Easy Display Product Showcase

Boost revenue with best-sellers,countdown, recommendations,discounts, and more.

Slider Revolution Shopify

Create customizable image sliders, banners, and carousels with 250+ templates.

Essential Grid Gallery Shopify

Design responsive grids for images, videos, products, and social media galleries.

Pesto Food & Restaurant Theme

Tailored for restaurant and cafe businesses, offering stylish design and customizable features.