Make a Shopify image banner clickable (Dawn, no apps)
Dawn lets you put a button on the image banner. It does not make the image itself a link. You add a URL setting to image-banner.liquid and a transparent overlay. No app. Works on Dawn and the other free OS 2.0 themes. Last tested in 2026.
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!
After the banner click, people land on a product. If you want color swatches there without an app, that is this tutorial: add color swatches to the Shopify product page without apps.
1 comment
Thanks, that worked! Appreciate your help :)