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

Store Design
,
1

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!

2

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.

3

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

4

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.!

5

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?

6

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..

7

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!

8

I think I’m getting old :slightly_smiling_face: Where exactly are the ‘test banners’? Could you send a screenshot?"

9

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
WebScreenshot.jpg3420×1783 292 KB

10

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
shopify.head.jpg1366×545 61.8 KB

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..

11

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!

12

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

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

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

13

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

14

You are welcome :wink:

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.