Trying to link my image banner on home page to a collection page

Topic summary

Goal: Make the homepage banner clickable anywhere to a collection page, removing reliance on the outline button.

Key proposals:

  • Offer to write JavaScript once the target link was shared.
  • Alternative: add a Custom Liquid section below the banner that links to a desired URL (details not fully provided).
  • Implemented solution: edit the theme file to make the whole banner clickable via an inline redirect.

Steps that worked:

  • Go to Online Store → Themes → Edit code.
  • Open image-banner.liquid (the banner’s theme section file).
  • Find the first
    in this file and add: onclick=“location.href=‘YOUR-URL-HERE’;” and style=“cursor: pointer;”.
  • Replace YOUR-URL-HERE with the collection URL provided: https://thekurtalady.com/collections/black-friday-deals. Screenshots were shared to guide placement.

Clarifications:

  • The code change is in image-banner.liquid (not image.liquid).

Outcome:

  • The original poster confirmed the solution worked and expressed thanks. Issue resolved; no further action requested.
Summarized with AI on January 12. AI used: gpt-5.

I am trying to link the banner (clickable anywhere) to a collection page.

my website thekurtalady.com

I dont want the outline button as it almost defeats the message on the banner; i want it to be clickable without the button and clickable anywhere on the banner.

Any suggestions please?

Do you mean below banner? If yes, please provide me where you want to link this page to. I will write JS code accordingly.

Hi @thekurtalady ,

Add a ‘Custom Liquid’ section just below this banner and enter the following code then save:


Feel free to change ‘/collections/all/’ to any URL.

I hope this will help.

Best regards,

Hello @thekurtalady ,

I understand you are looking to make your banner image clickable, so that it can redirect users/visitors to collection on click.

This can be implemented with the help of following steps -:

  1. Go to Online Store ->Themes → Edit code https://prnt.sc/kY5vqwbLvpWO

  2. Next, search for the image-banner.liquid file and open it https://prnt.sc/-vig3NRWLA6r

  3. Now, click Ctrl+f and search for the first div tag in this file https://prnt.sc/y5FGlSNhJHex

  4. Add the below mentioned code at in the starting of this tag as mentioned in the screenshot https://prnt.sc/NT7atH8RG8wP

onclick=“location.href=‘YOUR-URL-HERE’;” style=“cursor: pointer;”

Note -: Please paste the URL of the collection page from where you are looking to redirect in place of ‘Your-URL-HERE’ https://prnt.sc/O7deH-un8MSW

  1. Save changes https://prnt.sc/L6jeLmUxI2aL

Please take a look at these steps, I have also attached screenshots for your reference.

I hope the solution helps you.

Please let me know if you need any assistance.

Thank you.

https://thekurtalady.com/collections/black-friday-deals

thanks a ton

please also suggest where will I have to add this code

can you tell me where exactly do i have to add this code? Is it under image.liquid?

many thanks for helping out here

thank you anshul you are a star !

Thank you, I am glad the solution helps you.