I Need Help Making The Homepage Image Of Image Banner Clickable

Solved

I Need Help Making The Homepage Image Of Image Banner Clickable

jenok
Excursionist
22 1 4

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!

Accepted Solutions (3)
Dan-From-Ryviu
Shopify Partner
11612 2276 2456

This is an 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;
}

 

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...
Sign up now.

View solution in original post

jenok
Excursionist
22 1 4

This is an 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. 🙂

View solution in original post

Dan-From-Ryviu
Shopify Partner
11612 2276 2456

This is an accepted solution.

Ah, my mistake!

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...
Sign up now.

View solution in original post

Replies 9 (9)

Dan-From-Ryviu
Shopify Partner
11612 2276 2456

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;
}

 

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...
Sign up now.

jenok
Excursionist
22 1 4

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
Shopify Partner
11612 2276 2456

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

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...
Sign up now.

jenok
Excursionist
22 1 4

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
Shopify Partner
11612 2276 2456

In mobile device?

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...
Sign up now.

jenok
Excursionist
22 1 4

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
Shopify Partner
11612 2276 2456

This is an 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;
}

 

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...
Sign up now.

jenok
Excursionist
22 1 4

This is an 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
Shopify Partner
11612 2276 2456

This is an accepted solution.

Ah, my mistake!

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...
Sign up now.