I Need Help Making The Homepage Image Of Image Banner Clickable

[jenok]

I just upgraded from 1.0 to 2.0 theme. On my previous theme, I had my image banner customized to be clickable to a collection or product. If you look at my current homepage image banner - www.yummaliciouschocolates.com - you will see 2 buttons. The lime green button is the Shopify button. No matter where I choose from the Shopify options to place this button, it will not work with my image in the image banner. So I therefore create my own button as a graphic (the red button on the right) in Canva when I create my image. I don't want to use Shopify's buttons. How can I make my the image banner clickable? Thanks!

[Dan-From-Ryviu · Accepted solution]

Hi @jenok 

Please update code to this one 

.banner__content,
.banner__box,
.banner__buttons,
.banner__buttons .button {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
padding: 0px !important;
opacity: 0 !important;
postion: absolute;
left: 0;
right: 0;
}

[jenok · Accepted solution]

Hi - At first, it did not work, and caused an error with my page saving in Theme Editor. I thought Shopify was having technical issues so I chatted live with them. I told them what I was working on with you and sent them the 1st and 2nd codes. They noticed a slight misspelling in the word "position." That was causing the error. IT WORKS NOW!!! Thank you so much! This is awesome!!! I will be back for future help. 🙂

[Dan-From-Ryviu]

Hi @jenok 

You can do that by adding his CSS code at the bottom of your base.css file or Custom CSS of this section in your customize theme

.banner__content,
.banner__box,
.banner__buttons,
.banner__buttons .button {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
padding: 0px !important;
opacity: 0 !important;
}

[jenok]

Hi - Thanks for responding. Can you please tell me what this does? I need to be able to add a collection to link the image banner to. Where does it say this anywhere in your code? 

[Dan-From-Ryviu]

Hi, this code will make your button link cover your image banner but hidden. Please just try to add the code and check

[jenok]

Hi - I added the code. For some reason, it only partially worked. If I click randomly on the image, it does not work. But then I hovered my mouse over all areas of the image. The top center of the image is clickable and it does go to the collection page I want. I figured out the linking. But, the entire image needs to be clickable. Can you please help?

[Dan-From-Ryviu]

In mobile device?

[jenok]

Not mobile - on my website... Let me clarify... Being that I could not get the image banner to work, I turned it off earlier b/c I was about to send an email to my customers. I then found another post from you for the same situation for the slideshow. I got that to work - awesome! So the image you see now at the top of my website is a slideshow image (with only 1 image, so it doesn't rotate). I have now turned back on the image banner at the very bottom of my homepage so no one sees it. If you hover over the "Holiday Chocolate Pretzel" wording at the top of the graphic, you get the hand to click and will link to the product page. If you hover any place else on the image, you only get the regular mouse arrow and therefore the image is not clickable. Please advise. Thanks!

[Dan-From-Ryviu · Accepted solution]

Hi @jenok 

Please update code to this one 

.banner__content,
.banner__box,
.banner__buttons,
.banner__buttons .button {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
padding: 0px !important;
opacity: 0 !important;
postion: absolute;
left: 0;
right: 0;
}

[jenok · Accepted solution]

Hi - At first, it did not work, and caused an error with my page saving in Theme Editor. I thought Shopify was having technical issues so I chatted live with them. I told them what I was working on with you and sent them the 1st and 2nd codes. They noticed a slight misspelling in the word "position." That was causing the error. IT WORKS NOW!!! Thank you so much! This is awesome!!! I will be back for future help. 🙂

[Dan-From-Ryviu · Accepted solution]

Ah, my mistake!