Shopify themes, liquid, logos, and UX
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
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>
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
I keep receiving the error message - Error: Invalid JSON in tag 'schema'
Thank you
Lisa
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.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025