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

Store Design
,

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

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?

2

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

makkaomakka_0-1700647779344.png
makkaomakka_0-1700647779344.png1908×946 296 KB

3

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,

4

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.

5

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

thanks a ton

please also suggest where will I have to add this code

6

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

many thanks for helping out here

7

thank you anshul you are a star !

8

Thank you, I am glad the solution helps you.