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.
21

Hi @Steph1232aqwse ,

I don’t understand, can you explain more about it?

Please send me the site link, I will check it

22

@namphan thank you for your quick reply. please see the link below to our site if you click on the banner you will see it takes you to an error page rather than it directing you to the product page of the pink blazer.

www.shopobso.com

23

Hi @Steph1232aqwse ,

Did you add the link here?

Screenshot (1).png
Screenshot (1).png339×652 24.3 KB

24

@namphan Yes, as i have products already saved in my store, i was able to select the product link from the drop down menu that appeared when i clicked in that section.

25

Hi @Steph1232aqwse ,

You selected the link but it still doesn’t work? Or do you want to change the way link selection works

26

Hi @namphan it still doesn’t work. if you click on the banner from my site you will see the error page 404 message that comes up.

in essences the code for the clickable feature on my site was installed properly, however when you actually click on the banner it directs you to a 404 error page instead on the actual page of the product.

Hope thats makes sense

27

Hi @Steph1232aqwse ,

Can I send you a collaborator invitation? I will check it for you

28

Yes. sure, that will be helpful.

thanks

29

Hi @Steph1232aqwse ,

Please send me your collaborator code and I will send you an invitation

30

@namphan 0351

31

Hi @Steph1232aqwse ,

I sent it

32

access has been granted.

33

Hi @Steph1232aqwse ,

Access is still pending, may be delayed, when access is granted, I will check it soon

34

please check i have granted you access

35

Hi @Steph1232aqwse ,

i checked and JS code was added, it causes this error:

Screenshot.png
Screenshot.png1848×1310 239 KB

You just need to change everything like the code I instructed, then go to customize:

Screenshot.png
Screenshot.png1966×318 61.3 KB

add link here:

Screenshot.png
Screenshot.png750×776 56 KB

it will work fine

36

Hey @Steph1232aqwse I thought your query was solved. I posted the code and you were positive with it.

37

Hi @Shadab_dev the code work but when i tested it. it is showing an error 404 page when even you click on the banner

38

Hi @Steph1232aqwse ,

Did everything work fine?

39

Hi

i think i used another partners code. with all these messages coming through its quite confusing who sending and advising me apologies.

40

am not 100% clear what your advising me to do next. after seeing the error on the banner. what do you suggest i do so resolve the issue