How to make the image banner clickable [all free themes, 2025 update]
Want to make your Dawn theme's banner image clickable? You're in the right place! While the Dawn theme allows adding buttons with links, it doesn't let you make the banner image itself clickable—until now.
In this step-by-step guide, I’ll show you how to make your banner image clickable by simply pasting some code into your theme.
This tutorial is compatible only with Shopify's official free themes: Colorblock, Craft, Crave, Dawn, Origin, Publisher, Refresh, Ride, Sense, Spotlight, Studio, Taste & Trade.
Looking to install this on a premium or custom theme? Contact us.
👉 Click here for a live preview of the final result.
Step 1: Add the Code to Your Theme
- In your Shopify Admin, go to: Online Store > Themes > Actions > Edit code
- Open the file named exactly image-banner.liquid
- Use CTRL + F (or CMD + F on Mac) to trigger the search bar. Search for:
banner--c
You will find this specific line:
- A few lines below it, you will find a line with the text "section.settings.image != blank".
Paste the following code above this line. Take a look:{% if section.settings.url != blank %}<a data-information="clickable-banner by ezfycode.com" href="{{ section.settings.url }}" class="clickable-banner-link" style=""></a><style>.banner{position:relative}.clickable-banner-link{position:absolute;inset:0;z-index:3;width:100%;height:100%;left:0;top:0;bottom:0;right:0;display:block!important;cursor:pointer;background:transparent}</style>{% endif %}
-
Now, press CTRL + F to trigger the search box again and search for exactly:
{% schema
Once found, you will see the word "settings", between quotes, a few lines below it.
Paste the following code below the "settings" line:{
"type": "url",
"id": "url",
"label": "Banner Link by ezfycode.com"
},
Final step: setting it up at the customize page
- Click “Save” in the top right corner. Now, on the top left corner, click on ... > Customize Theme.
- Add the "Image Banner" section and click on it. You will find the link as the very first option.
Conclusion
And that’s it! With just a few lines of code, you’ve now turned your Dawn theme’s banner image into a fully clickable link—something Shopify doesn’t offer out of the box. This small tweak can go a long way in improving user experience and driving more clicks to key pages.
If anything didn’t work quite right or you have questions, don’t hesitate to reach out through the contact form. I’m here to help.
Happy customizing!