How to add a link to image banner without a button or rich text

[jewellerystore1]

Hello,

I have an image banner block on my site with a single image in and no text. I want to be able to add a link on this image to link to a collection when clicked. 

Website link : https://nuijewellery.com.au/

Please help

Thank you!

[Dan-From-Ryviu]

Hi @jewellerystore1 

Please add link to your image banner button so I can give you the code to make image banner clickable and hide button.

[jewellerystore1]

Hello!

Okay done now 🙂

[Dan-From-Ryviu]

Hi, I have a day off, so I cannot respond. Would you add the link again so I can help you?

[jewellerystore1]

Hello, it is there now. 

Thanks

[Dan-From-Ryviu]

Hi @jewellerystore1 

Please add this code at the bottom of your base.css file 

.banner__content {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: 0px !important;
}
.banner__buttons a,
.banner__content,
.banner__buttons,
.banner__box {
    opacity: 0;
    width: 100% !important;;
    max-width: 100% !important;
    height: 100% !important;;
    padding: 0px !important;
}

[jewellerystore1]

Thank you, that worked. But the image is only clickable at the top edge instead of the whole thing because the button is that the top. Is it possible to make the whole image clickable?

[Dan-From-Ryviu]

You added missing this code 

.banner__content {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: 0px !important;
}

[jewellerystore1]

I've added all the code. It's only clickable at the top

 

[Dan-From-Ryviu]

I cannot see that code is applied. Could you try to update this code like this and check again

.banner__content {
    position: absolute !important;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: 0px !important;
}
.banner__buttons a,
.banner__content,
.banner__buttons,
.banner__box {
    opacity: 0;
    width: 100% !important;;
    max-width: 100% !important;
    height: 100% !important;;
    padding: 0px !important;
}

[jewellerystore1]

I have added the code to the botton of the base.css file, now it is not working. 

You can see the button outline in the middle of the image. Before it worked, it removed the button and made the top of the image clickable. 

I'm not sure why the code is not working now?

[rouayda]

hi, I saw on your store that you managed to make your image clickable, can you help me do that please? the code provided on the forum does not work on my store, thank you in advance