What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Making Image on Homepage Clickable (Attaching a Link to it)

Solved

Making Image on Homepage Clickable (Attaching a Link to it)

mhalfya
Excursionist
37 0 2

Hi everyone,

 

I'm looking to make the main image on my homepage (image with text overlay) clickable so that I can attach a link to it and it will take customers to a collection page from the homepage.

 

I'm currently using the Debut theme.

 

Any suggestions would be greatly appreciated!

 

Thanks!

Accepted Solution (1)
oscprofessional
Shopify Partner
16116 2410 3126

This is an accepted solution.

Hello 

Search this schema:

{
      "type": "text",
      "id": "button_label",
      "label": {
        "da": "Knapetiket",
        "de": "Button-Etikett",
        "en": "Button label",
        "es": "Etiqueta de botón",
        "fi": "Painikkeen merkintä",
        "fr": "Texte du bouton",
        "hi": "बटन लेबल",
        "it": "Etichetta pulsante",
        "ja": "ボタンラベル",
        "ko": "버튼 레이블",
        "ms": "Label butang",
        "nb": "Knappetikett",
        "nl": "Knoplabel",
        "pt-BR": "Etiqueta do botão",
        "pt-PT": "Etiqueta do botão",
        "sv": "Knappetikett",
        "th": "ป้ายกำกับปุ่ม",
        "zh-CN": "按钮标签",
        "zh-TW": "按鈕標籤"
      }
    },

Add below schema after that:

{
          "type": "url",
          "id": "image_link",
          "label": "Image link"
        },

  

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free

View solution in original post

Replies 28 (28)

oscprofessional
Shopify Partner
16116 2410 3126

Hello 

Go to Online Store-> Themes -> Edit code->Sections->hero.liquid
Add this schema:

 

 {
          "type": "url",
          "id": "image_link",
          "label": "Image link"
        },

This will give you backend setting to add link to that image.

 


Search this code:

 <div class="hero__inner">
        <div class="page-width text-center">
          {%- if section.settings.title != blank -%}
            <h2 class="h1 mega-title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">{{ section.settings.title | escape }}</h2>
          {%- endif -%}
          {%- if section.settings.text != blank -%}
            <div class="rte-setting mega-subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">{{ section.settings.text }}</div>
          {%- endif -%}
          {%- if section.settings.button_label != blank and section.settings.button_link != blank -%}
            <a href="{{ section.settings.button_link }}" class="btn hero__btn">
              {{ section.settings.button_label | escape }}
            </a>
          {%- endif -%}
        
        </div>
      </div>

Replace this code with :

<a href="{{ section.settings.image_link }}">
      <div class="hero__inner">
        <div class="page-width text-center">
          {%- if section.settings.title != blank -%}
            <h2 class="h1 mega-title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">{{ section.settings.title | escape }}</h2>
          {%- endif -%}
          {%- if section.settings.text != blank -%}
            <div class="rte-setting mega-subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">{{ section.settings.text }}</div>
          {%- endif -%}
          {%- if section.settings.button_label != blank and section.settings.button_link != blank -%}
            <a href="{{ section.settings.button_link }}" class="btn hero__btn">
              {{ section.settings.button_label | escape }}
            </a>
          {%- endif -%}
        
        </div>
      </div>
      </a>
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
mhalfya
Excursionist
37 0 2

Hi there!

 

Thank you so much for the response!

 

Where should I enter the schema you gave me? I believe I entered it in the wrong area because it's displaying the code below the images and it isn't giving me the option to add the link.

 

Thanks again for your help! 🙂Hero.liquid Code.pngScreen Shot 2019-12-06 at 12.15.01 AM.png

oscprofessional
Shopify Partner
16116 2410 3126

This is an accepted solution.

Hello 

Search this schema:

{
      "type": "text",
      "id": "button_label",
      "label": {
        "da": "Knapetiket",
        "de": "Button-Etikett",
        "en": "Button label",
        "es": "Etiqueta de botón",
        "fi": "Painikkeen merkintä",
        "fr": "Texte du bouton",
        "hi": "बटन लेबल",
        "it": "Etichetta pulsante",
        "ja": "ボタンラベル",
        "ko": "버튼 레이블",
        "ms": "Label butang",
        "nb": "Knappetikett",
        "nl": "Knoplabel",
        "pt-BR": "Etiqueta do botão",
        "pt-PT": "Etiqueta do botão",
        "sv": "Knappetikett",
        "th": "ป้ายกำกับปุ่ม",
        "zh-CN": "按钮标签",
        "zh-TW": "按鈕標籤"
      }
    },

Add below schema after that:

{
          "type": "url",
          "id": "image_link",
          "label": "Image link"
        },

  

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
mhalfya
Excursionist
37 0 2

That worked perfectly! Thank you so much! 🙂

golden_ia
New Member
4 0 0

I am trying to do the same thing, add image link to "Image with Text" section in debut theme. I do not see the place to add the schema you gave. It is saying this,

Error: Invalid JSON in tag 'schema'. Can you please help me?

golden_ia
New Member
4 0 0

@golden_ia wrote:

I am trying to do the same thing, add image link to "Image with Text" section in debut theme. I do not see the place to add the schema you gave. It is saying this,

Error: Invalid JSON in tag 'schema'. Can you please help me?


This is what my screen looks like.
Screenshot (1).png

Chrisc1623
Tourist
7 0 3

Hi, 

 

I've successfully added to the schema and can now see the option to add an Image Link (woo!). 

 

However, I select a collection for the link and save but no changes have taken place on the live site. The link is saved and showing but is not appearing as an option when I hover over the image. 

 

Any help is much appreciated.

Chris

Katieree13
Tourist
3 0 2

I'm having this exact issue. Was this ever resolved?

golden_ia
New Member
4 0 0

I was able to make the image header in a slideshow clickable by following this tutorial for the debut theme. https://youtu.be/WieMrvXDFrg

Kristina123
Visitor
1 0 0

Hi!
Did you end up figuring this out?
I too was able to add a picture link but when I do nothing changes!

Chrisc1623
Tourist
7 0 3

Actualy solved here... 

First add the code to the schema as several people have commented. This creates the ability to link on the theme template. 

Next add <a href= "{{ block.settings.image_link }}"> further up in the same theme file. For Image with Text, this is the feature-row.liquid file. My code is shown below. In practise this creates the 'link' but will doesn't yet have an end point so will loop you back to the homepage. 

<div class="page-width feature-row">
{% capture image_layout %}
<div class="feature-row__item">
{% if section.settings.image != blank %}
{% capture img_id %}FeatureRowImage-{{ section.id }}{% endcapture %}
{% capture wrapper_id %}FeatureRowImageWrapper-{{ section.id }}{% endcapture %}
{%- assign img_url = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% include 'image-style', image: section.settings.image, height: 545, wrapper_id: wrapper_id, img_id: img_id %}
<div id="{{ wrapper_id }}" class="feature-row__image-wrapper js">
<div style="padding-top:{{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100}}%;">
<a href= "{{ section.settings.image_link }}">
<img id="{{ img_id }}"
class="feature-row__image lazyload"
src="{{ section.settings.image | img_url: '200x200' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ section.settings.image.aspect_ratio }}"
data-sizes="auto"
alt="{{ section.settings.image.alt | escape }}">

FINALLY, make sure that your HREF is linking to the same part as the other lines of code. For the feature-row file, this is section.settings.image. However, when i did this for the Custom Content layout it was block.settings.image. If it is linking to your homepage, this is the issue you need to fix! 

Chris

AstridCioata
Visitor
2 0 0

Hi Chris, I'm experiencing the same issue! If you found a solution can you please let me know! Thank you!!

seansean
Visitor
1 0 0

Hey there, did you manage to find a solution to this as I am having the same issue. 🙂

Fern88
Excursionist
11 0 3

I was also having the issue with the image being really big when adding the href, so I added it to the div above it and for me this worked.  The Image now is a link and it holds the correct size.  I attached a screenshot of where I added the a href...

2021-05-03 (5).png

olimon
Visitor
2 0 0

Yes I need help with this too.

spasify
Visitor
3 0 0

We have successfully added the codes, however Link placeholder is not showing in the page section editor. Where can we place our url? We wanted to make images below clickable.

Screenshot_2.jpg

spasify
Visitor
3 0 0

Hi there,

We have successfully added the codes in the feature-columns.liquid section, however it ruins the homepage layout and the url attached is not working instead we are redirected to homepage when clicked.

CloudE5
New Member
4 0 0

I managed to get an image link field with this code. Thought that was it but after entering URL the image is still not clickable. Any thoughts would be super helpful. Thanks

CloudE5
New Member
4 0 0

Finally managed. In case someone finds this and is struggling with the above solutions:

I wanted to link images in my Debut theme in the section called text columns with images.

I had to add the code suggestions in feature-columns.liquid

After

{
"type": "text",
"id": "button_label",
"label": {
"en": "Button label",
"de": "Button-Name",
"fr": "Texte du bouton",
"it": "Etichetta pulsante",
"ja": "ボタンラベル",
"es": "Etiqueta de botón",
"pt-BR": "Etiqueta do botão"
}
},

 

I added:

{
"type": "url",
"id": "image_link",
"label": "Image link"
},

 

then,after 

<div style="padding-top:{{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100}}%;">

I added 

<a href= "{{ block.settings.image_link }}"> 

 

 

Andrea66
Excursionist
64 0 5

Hello, 

I've successfully added your code to the schema in the "image-with-text.liquid" Section of my Supply theme and now I can see the option to add a link to image in my backend. 

Now I can select a link and save it but no changes will take place on the live website. The link is saved and showing but is not appearing as an option when I hover over the image. 

Any suggestion?

Thanks

abertini
Shopify Partner
13 0 5

How about explaining we're to find the schema in the first place? 

filip0801
Excursionist
44 0 7

Hey i have tried this and it worked but it makes my image very large and bigger than it worse before and much more zoomed in. How do i fix this?

KK42
Excursionist
21 0 3

Im experiencing the same issue. I followed the steps on replacing the code area but now my photo is way larger than it was before and I cant edit the size. Its very zoomed in. Any help on how to fix this??

blurio
Tourist
5 0 1

I am trying to do the same thing, add image link to "Image with Text" section in Minimal theme, but I can’t find hero.liqud can someone help please 🙂

twosparrows2
Visitor
3 0 0

HELP! I have completely messed up my code. I deleted and replaced the wrong code.  Can someone post the whole code, beginning to end for this section that includes the code to make the image clickable?  I'm on the hero section as well as I have an image with text overlay I'm trying to make clickable in my Debut theme in my Shopify home page. I'm freaking out!  

 

Also, does any one have code that would make custom content image section clickable?  

 

Thank you, thank you!

 

Nancy 

alpheusc
Visitor
1 0 0

Hi, have any of you figured out the solution to this? The link works but it is very zoomed in. Thank you for all the help in advance

Purekalon
Excursionist
40 0 8

Can I do this on Boundless theme ?

abertini
Shopify Partner
13 0 5

This is a much better more detailed solution than the accepted solution.