I Need Help Making The Homepage Image Of Image Banner Clickable

Solved
jenok
Tourist
7 1 0

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
5593 1026 1056

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 and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

View solution in original post

jenok
Tourist
7 1 0

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
5593 1026 1056

This is an accepted solution.

Ah, my mistake!

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

View solution in original post

Replies 9 (9)
Dan-From-Ryviu
Shopify Partner
5593 1026 1056

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 and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

jenok
Tourist
7 1 0

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
5593 1026 1056

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 and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

jenok
Tourist
7 1 0

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
5593 1026 1056

In mobile device?

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

jenok
Tourist
7 1 0

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
5593 1026 1056

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 and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

jenok
Tourist
7 1 0

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
5593 1026 1056

This is an accepted solution.

Ah, my mistake!

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now