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

jewellerystore1
Excursionist
76 0 8

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!

Replies 11 (11)

Dan-From-Ryviu
Shopify Partner
7860 1527 1554

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.

- Helpful? Like and Accept solution or ❤Donate❤
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

jewellerystore1
Excursionist
76 0 8

Hello!

 

Okay done now 🙂

Dan-From-Ryviu
Shopify Partner
7860 1527 1554

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

- Helpful? Like and Accept solution or ❤Donate❤
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

jewellerystore1
Excursionist
76 0 8

Hello, it is there now. 

 

Thanks

Dan-From-Ryviu
Shopify Partner
7860 1527 1554

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

- Helpful? Like and Accept solution or ❤Donate❤
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

jewellerystore1
Excursionist
76 0 8

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
Shopify Partner
7860 1527 1554

You added missing this code 

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

 

- Helpful? Like and Accept solution or ❤Donate❤
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

jewellerystore1
Excursionist
76 0 8

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

 

Screen Shot 2023-10-11 at 4.01.56 pm.png

Dan-From-Ryviu
Shopify Partner
7860 1527 1554

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

- Helpful? Like and Accept solution or ❤Donate❤
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

jewellerystore1
Excursionist
76 0 8

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
Visitor
1 0 0

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