Solved

How to create a clickable image banner without text or buttons?

BarelyTolerated
New Member
7 0 0

Hi all,

I'm trying to add some images which will be category banners (e.g. birthday) but can't see or work out how to make the image clickable without adding text below saying "click here" or adding a button. Any ideas how I can do this?

Thanks in advance!

Accepted Solution (1)
TerenceKEANE
Shopify Partner
424 76 71

This is an accepted solution.

 

I believe this minor tweak might address your concern. Inform me if any conflicts arise. As of now, everything appears to be functioning smoothly. 😉

 

h3.inline-richtext>a {
color: transparent!important;
}

h3.inline-richtext>a:hover {
color: transparent!important;
}

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you. --> Our Website
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites

View solution in original post

Replies 13 (13)

TerenceKEANE
Shopify Partner
424 76 71

Hi!

If a link tag is defined within the category, we can display the text 'click here' on it. If you could provide me with the link to your website, I can take a closer look.

Terence.

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you. --> Our Website
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
BarelyTolerated
New Member
7 0 0

Thanks for offering to have a look. Does this link work for you? (Page currently in preview mode).

TerenceKEANE
Shopify Partner
424 76 71

yes the link is working. I believe you intend to place a category banner on your homepage. Typically, when you feature an appealing image on your website, visitors will naturally notice and click on it. Therefore, incorporating text or buttons might not be entirely necessary. I hope I haven't misunderstood.!

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you. --> Our Website
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
BarelyTolerated
New Member
7 0 0

Hi - yes I don't want to have the text there, but the placeholder banner (saying Website Banner) should be clickable which it currently isn't. Is there a way of making this image clickable?

TerenceKEANE
Shopify Partner
424 76 71

Hi again,

 

The best approach would be to add a banner to a specific area of your website and notify me. Also, I believe you cannot include a "link" in the location where you add it! Anyway, please let me know when you have added an example banner.

 

Terence..

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you. --> Our Website
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
BarelyTolerated
New Member
7 0 0

Hi Terence, thanks for helping me so far. There are some test banners in place at the moment - the purple ones which say Website Banner. Is it possible to change those to clickable or does that not work? Thanks again!

TerenceKEANE
Shopify Partner
424 76 71

I think I'm getting old  🙂 Where exactly are the 'test banners'? Could you send a screenshot?"

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you. --> Our Website
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
BarelyTolerated
New Member
7 0 0

Maybe I gave the wrong link at first! Here is a link to view the preview of the current page and it should look something like the attached screenshot! Thanks so much!WebScreenshot.jpg

TerenceKEANE
Shopify Partner
424 76 71

Ah, I see it now. It gave me quite a hassle, but in the end, it worked. The following code will do what you want. If you encounter any issues again, feel free to write, I'll help.

 

Navigate to the 'Edit Code' option in your theme settings, then search for “base.css” in the search bar and add below codes.

 

shopify.head.jpg

 

h3.inline-richtext > a {
position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: end;
}

 

Terence..

 

 

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you. --> Our Website
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
BarelyTolerated
New Member
7 0 0

That's amazing - thanks so much for your help. One last question - is it possible to have the banner linked to something without having the text below or does that just mess it up? No worries if not - just thought I would ask whilst I have the expertise of someone who knows what I mean!

TerenceKEANE
Shopify Partner
424 76 71

This is an accepted solution.

 

I believe this minor tweak might address your concern. Inform me if any conflicts arise. As of now, everything appears to be functioning smoothly. 😉

 

h3.inline-richtext>a {
color: transparent!important;
}

h3.inline-richtext>a:hover {
color: transparent!important;
}

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you. --> Our Website
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
BarelyTolerated
New Member
7 0 0

Thanks so much for your help - a coffee coming your way!

TerenceKEANE
Shopify Partner
424 76 71

You are welcome 😉

Let me know if you need any further assistance. Feel free to tag me or send a private message when opening a new topic. If I find time outside of our software and "premium support" service, I can assist.

Best regards.

 

Terence.

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you. --> Our Website
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites