How to add a insert link to an image on homepage

[lisatrendy]

Hello, 

I would like the ability to insert link onto an image (eg Image with text or gallery or slideshow etc) on my home page. I always find myself that I click on a picture rather than "Shop here" buttons. my website is www.nichollsjewellery.com. 

I would like a clickable link on the picture of the "crystal cluster huggies" that takes you directly to that product if you click on the image. 

Is this possible? 

Thank you

Lisa

[Zworthkey]

@lisatrendy 

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>

[lisatrendy]

Thank you so much for your quick reply. 

Please could you kindly tell me if i need to add the first part before or after {% endschema %}

Thank you

Lisa

[lisatrendy]

I keep receiving the error message -  Error: Invalid JSON in tag 'schema'

Thank you

Lisa

[ariel03]

Hi, I'm not sure if this is still helpful for you, but the reason you may be receiving the Invalid JSON message is because in the URL schema that you added, there is a comma at the end. If it's the last information in the schema, it does not need the comma. I had the same issue and when I deleted the comma it worked.