Debut Theme: Image with Text Overlay Clickable Image

Bryan19
Tourist
11 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 

Replies 18 (18)

E_Web_Guru
Shopify Expert
409 3 25

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

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. 

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.

kriszti
Shopify Partner
60 0 7

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
Visitor
1 0 0
Anyone have a fix for this? Looking to do the same on my site
Titto84
Tourist
11 0 1

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

SecretCat
Visitor
2 0 2

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

helloworldd
Visitor
1 0 0

This worked for me!

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.

filip0801
Excursionist
44 0 7

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

Lyle_Saltzman
Excursionist
17 0 4

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
Visitor
2 0 0

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
Visitor
2 0 1

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
Visitor
2 0 0

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

Lyle_Saltzman
Excursionist
17 0 4

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
Visitor
1 0 0

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

kate345
Visitor
3 0 0

Thanks alot man it really work on my webpage also.