Making Craft Banner Image Clickable on Desktop and Mobile

Store Design
, ,
1

Hello, I’m working on www.thegifthorse.com using the Craft template.

I’d like to make the top banner clickable without altering anything about the scaling, aspect ratio etc that I have set up currently, essentially just a transparent clickable overlay for the current banner.

I’ve found a few discussions where the solution worked for the OP but none of them work for me. Can anyone help?

2 Likes
3

Hey @Gifthorse03

Are you talking about this section?

image
image1036×903 123 KB

If yes, then first I would suggest to check the customization settings of your theme and just incase if it’s not there then feel free to share your collaborator request code in my private messages and I can add a transparent clickable overlay link for you.

Best,
Moeed

4

Hi @Gifthorse03

Got it you want the entire top banner in your Craft theme to be a clickable link, but without messing with the existing sizing/aspect ratio.

You don’t need to replace or wrap your img in an a (which often breaks scaling). Instead, the clean way is to add a transparent overlay link that covers the whole banner container.

Example solution

Let’s say your banner section has a wrapper element like:

<div class="banner">
  <img src="{{ 'banner.jpg' | asset_url }}" alt="Banner" class="banner-image">
</div>

You can add an overlay link inside the container:

<div class="banner">
  <img src="{{ 'banner.jpg' | asset_url }}" alt="Banner" class="banner-image">
  <a href="/collections/all" class="banner-link"></a>
</div>

Then make the a fill the entire container without affecting layout:

.banner {
  position: relative;
  display: inline-block; /* keeps your current scaling intact */
}

.banner-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent: -9999px; /* hides text if needed */
  z-index: 2;
}
6

Apologies but I am not familiar with coding and I am struggling to find the wrapper element.
The wording above doesn’t appear to be in the code, is there something else I should look for?

7

Hi @Gifthorse03

Please send me the collaborator code. I will send you a store access request and give you a proper update.

8

Thanks so much, I have emailed it to you :slight_smile:

1 Like
10

As I have checked, your page currently only has HTML and CSS, does not use Shopify, but if you want to use Craft Banner Image, then you can refer to this article to make the image clickable