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

Solved
Highlighted
Tourist
24 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!

0 Likes

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>
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
Tourist
24 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

0 Likes

Success.

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

  

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
Tourist
24 0 0

That worked perfectly! Thank you so much! :)

0 Likes
New Member
2 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?

0 Likes
New Member
2 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

0 Likes