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

Solved
mhalfya
Tourist
37 0 0

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)

Accepted Solutions
oscprofessional
Shopify Partner
9418 1579 1968

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"
        },

  

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87

View solution in original post

Replies 25 (25)
oscprofessional
Shopify Partner
9418 1579 1968

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>
Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
mhalfya
Tourist
37 0 0

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
9418 1579 1968

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"
        },

  

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87

View solution in original post

mhalfya
Tourist
37 0 0

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 2

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

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??