[Debut Theme] How to turn "Image with Text Overlay" into a clickable link?

Highlighted
New Member
1 0 0

I'm sure this question has been asked before but it's pretty simple what I'd like to happen. Instead of using the "Button Label" I'd like to just make the image clickable. If someone is able to help me with this I'd really appreciate it! Feel free to send me an email (tyger.finance@gmail.com).

0 Likes
Highlighted
Tourist
4 0 1

Hey man! I had a problem with this for 3 days and I spent hours searching for it. I paid a guy 15 dollars for this knowledge and I learnt it very well.  
I made steps on how to make clickable image, and note that the button will be used as a link.

 

1,Open hero.liquid and find the code below

 

<img class="hero-fixed-width__image lazyload lazypreload"
src="{{ section.settings.image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 470, 600, 770, 970, 1060, 1280, 1512, 1728, 2048]"
data-aspectratio="{{ section.settings.image.aspect_ratio }}"
data-sizes="auto"
style="{%- if slide_width <= max_width -%}
{%- assign min_width = slide_width | times: 100 | divided_by: max_width -%}
min-width: {{ min_width }}%;
{%- endif -%}
object-position: {{ section.settings.alignment }};"
alt="{{ section.settings.image.alt | escape }}">

 

2, replace the code entirely with the code 

 

<a href="{{ section.settings.button_link }}">
<img class="hero-fixed-width__image lazyload lazypreload"
src="{{ section.settings.image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 470, 600, 770, 970, 1060, 1280, 1512, 1728, 2048]"
data-aspectratio="{{ section.settings.image.aspect_ratio }}"
data-sizes="auto"
style="{%- if slide_width <= max_width -%}
{%- assign min_width = slide_width | times: 100 | divided_by: max_width -%}
min-width: {{ min_width }}%;
{%- endif -%}
object-position: {{ section.settings.alignment }};"
alt="{{ section.settings.image.alt | escape }}">
</a>

 

3,open theme.scss.liquid

 

4 put this code in bottom

 

.hero-fixed-width a{
z-index: 9999999;
position: relative;display:block;}

You are well off! if you have a question ask me, I want to help others and I want to teach others to learn.

0 Likes
Highlighted
New Member
1 0 0

Hello @Entrepreneur12 ! Thanks for the line of code. This worked great for Fixed Images, but doesn't work if you use a full width image. Do you know how to make those a clickable image too?

0 Likes