Debut Theme: Image with Text Overlay Clickable Image

[Bryan19]

Hi, 

I'm trying to make my entire image of the "Image with Text Overlay" section clickable (linked with my collection), instead of having a clickable small button.

Here's what I did:

Image with Text Overlay --> Button label (left empty) --> Button link (selected my collection)

It didn't work.

I came across this page -- https://help.outofthesandbox.com/hc/en-us/articles/115006911687-How-to-Setup-Clickable-Home-Page-Ban..., which pretty much says the same thing as I did.

I'm not sure what's the issue here. Any help will be appreciated.

Thanks.

Bryan 

[E_Web_Guru]

Any chance of seeing a link to this in action? It's much easier for the forum members to troubleshoot things when they can see it working (or not) and see the debug logs live.

[Maksims]

Hey, Brian! 

Did you figure it out? Looking for the solution - It would be really helpful if you could share. 

[Maksims]

Ok. I actually just copied the original sections HTML and added is as custom HTML - editing the image to be clickable.

[kriszti]

What do you mean you copied the HTML? From hero.liquid or where? Thanks in advance.  That text overlay section is a real pain in the ass.

-Kriszti

[Braaadd]

Anyone have a fix for this? Looking to do the same on my site

[Titto84]

Hello there how can i do that? Do you still remember?

[SecretCat]

My current theme is Debut.

Edit code: Sections => hero.liquid

Insert:

{%- if section.settings.button_label == blank and section.settings.button_link != blank -%}
<a href="{{ section.settings.button_link }}">
{%- endif -%}

Before

<div data-section-id="{{ section.id }}" data-section-type="hero-section">

And insert:

{%- if section.settings.button_label == blank and section.settings.button_link != blank -%}
</a>
{%- endif -%}

After final </div> tag, it's the end div tag of

<div data-section-id="{{ section.id }}" data-section-type="hero-section">

Then, just simply insert your link to Button Link, leave Button Label empty.

[filip0801]

this worked but then it messes up my collection showcase. Normally i have 4 products in a row but now the first row only have 3 products and a 3rd row is created with one product

[helloworldd]

This worked for me!

[Entrepreneur12]

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.

[filip0801]

Idk what happened but i broke my theme. And now my store is looking broken. How can i revert this?

[Lyle_Saltzman]

If I am understanding what everyone is asking correctly....  You want an image on your homepage that is clickable to goto a collection, product, blog, etc....  I've seen many complicated ways to do this but there's actually a VERY easy way even for people without coding experience.

Upload your image you want to use by whatever means...

Goto Files and get that image URL,

Then simply goto your homepage and add a custom content section.

Once in there, add custom HTML 

and use the most basic easiest HTML for an image with link.  If you don't know how to do that, just google html code for image with link.

Very simple.  If you want to control the size of your image, you can then add width and height to it.

EZPZ done.

[AstridCioata]

Hey! I'm having trouble with getting my image with overlay text to be clickable, and I'm confused after your first step! What do you do once you get that image URL? Can you break up the steps a bit more please 🙂 

[ClaimItTees]

Can you please elaborate on the first two steps? When you say upload the image by whatever means.. what do you mean? Also, where are the files located (step two)? I know how to upload an image into one of the sections, that allow images, for the home page. However, I am not seeing a URL attached to that upload. Thanks!

[michellenyk]

Just search for files in the top search bar in your shopify admin 🙂 

[Lyle_Saltzman]

click on settings in the bottom left

then click on files and then upload your image

Once you upload it, it will give you the URL for that image

[Jonafe]

Thx man! It worked fine!! You are a boss!

[kate345]

Thanks alot man it really work on my webpage also.