Code needed to making a banner image clickable in the new 15.0 Dawn theme

Store Design
, ,

Topic summary

A user seeks to make the first banner image in Shopify’s Dawn 15.0 theme clickable. Two developers provide competing solutions involving modifications to the image-banner.liquid file.

Solution 1 (Shadab_dev):

  • Adds JavaScript code using document.querySelector and an event listener
  • Creates a custom link field in the theme customizer
  • Initially causes a 404 error when clicking the banner
  • Later corrected by changing e.target to e.currentTarget in the JavaScript

Solution 2 (namphan):

  • Modifies CSS to add a clickable overlay layer
  • Uses Shopify’s built-in URL picker in the customizer
  • Avoids JavaScript-related errors
  • Points out two issues with the JS approach: problems with multiple sections and incorrect URL rendering

Resolution:
The original poster confirms namphan’s solution works successfully. Another user later validates this approach. The discussion highlights the importance of proper URL handling in Shopify themes and the potential pitfalls of using JavaScript event targeting with dynamic content.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
41

Yes it worked. thank you.

42

Hi @Steph1232aqwse ,

You just need to follow this guide, then add the link at Customize, it will work fine, no need to change any code according to anyone else’s instructions.

If you have any questions, you can contact me directly.

Happy to help you :blush:

43

@Steph1232aqwse I was facing this issue but i realised it was only happening when I linked to a page or product or any where within my store that was not correctly set up. Please make sure the page or link you are redirecting is set up properly. If it still persists let me know I will take a look at it again.

Thanks

44

Hi @Shadab_dev , @Steph1232aqwse

It has 2 errors that will happen if you use this JS code for this:

  • You use ‘document.querySelector’ so when you use 2 sections it will cause error in 2nd section.

  • Because you use Shopify ‘url’, so when selecting a product, the link will be rendered as ‘/products/handle product’, so you use 'window.location.href = ${target} ’ it will cause page 404.

Hope it’s clear :blush:

45

@Steph1232aqwse I get the mistake i was making. My Solution remains the same. Only change the code on the file that is down below after everything to this

Rest of the code is same. Man if this does not work i am not replying to this thread ever.

46

@namphan I see my mistake. i just had to use currentTarget instead of target so that even if someone clicks inside the banner to different element it will look for the banner since i have the click listener on the banner.

Hope you get the point.

Thanks

47

just followed your instructions and it was perfect!!! Thank you!!!

1 Like
48

Great it worked out for you. The repetition in exclamation marks tells that you really wanted this. Glad I could be of help.

Good luck on your store and your business.

Best Regards

Shadab

49

Hi @CuttingEdgeProm ,

You’re welcome and happy to help you