Make image banner clickable

[StarMintz]

Hello,

Looking to make the TRY NOW button clickable. At the moment it is just the image and is not clickable. Whats the best way to do this?

Thanks.

https://htmdffw098ehhfyr-71289930044.shopifypreview.com

[websensepro]

Hi, @StarMintz 

It is possible to add a button to the banner, but the button cannot cover the entire banner as it is an image. If you want to add a button, you will need to remove the existing button image on the banner.

[sahilsharma9515]

Hi @StarMintz There are 2 options through which you can accomplish the same.

1. You can add the button on the image, and link that button to any page as you want.
2. You can add link to your image so that the entire image will become clickable and customer can click on image to go to the specific page that you want to link.

Both the option needs custom coding through which you can make it clickable.

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the changes so that this will work well for you.

Hopefully it will help you. If yes then Please hit Like and Mark it as solution!

Best Regards

Sahil

[StarMintz]

yes i would like it as a button in the same position as the try now please.

Thank you

[sahilsharma9515]

Hi @StarMintz for implementing the same there will a custom code that need to be add here.

Without the access of the store I can just provide you the base code, you need to add that code in your store in that section where the image banner section code is written.

<button class="button button1">Try It now</button>

<style>
.button {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button1 {background-color: #04AA6D;} /* Green */
</style>

You need to add this code and design it accordingly. 

Please Note: It's just the base code and you need to change the code according to your needs.

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the changes so that this will work well for you.

Hopefully it will help you. If yes then Please hit Like and Mark it as solution!

Best Regards

Sahil

[Dan-From-Ryviu]

• Go to your Online store > Themes > Edit code.

  

• In Assets folder, open base.css file

• Copy this code below, add it at the bottom of base.css file and save the file

.banner__buttons .button,
.banner__buttons,
.banner__box,
.banner__content {
width: 100%!important;
height: 100%!important;
max-width: 100%!important;
padding: 0!important;
position: absolute!important;
top: 0px;
left: 0px;
opacity: 0;
bottom: 0px;
right: 0px;
margin: 0px !important;
}

Please add link to button link of your banner to make it works

[Otshelnik]

Here are a few ways:

1. Add a button to the image, link it, and then use CSS code to position it. The problem is that it might not look good on some devices. You will need to use a media query. Too complicated. 

2. One of these apps:

https://apps.shopify.com/clicky-clickable-banner (clickable banner, does exactly what you want, super cheap - $5/month)

https://apps.shopify.com/clickslide-clickable-slider (clickable slider, in case you want a slider, $12/month)

https://apps.shopify.com/section-factory (the last time I checked, it was around $9 per custom section) 

3. Pay someone to do it for you, but you will have to transfer the code each time you want to update the theme version.