Debut Theme: Image with Text Overlay Clickable Image

Bryan19
Tourist
10 0 1

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 

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.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: ecommercewebguru@gmail.com
Skype: ecommercewebguru
0 Likes
Maksims
Shopify Partner
3 0 0

Hey, Brian! 

 

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

0 Likes
Maksims
Shopify Partner
3 0 0

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

0 Likes
kriszti
Shopify Partner
54 0 3

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

0 Likes
Braaadd
New Member
1 0 0
Anyone have a fix for this? Looking to do the same on my site
0 Likes
Titto84
New Member
11 0 0

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

0 Likes
SecretCat
New Member
2 0 1

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
Excursionist
44 0 7

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

0 Likes
Entrepreneur12
Tourist
4 0 3

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.