Making image a clickable link (custom section)

Technical Q&A
1

So I followed another user’s guide on how to place 2 separate images for mobile and desktop for my hero banner but I would like to be able to add a link if they are clicked. This is the code:

.banner-container img{ width: 100%; } .hidden-mobile { display: none; } .hidden-desktop { display: block; } @_media (min-width: 767px){ .hidden-mobile { display: block; } .hidden-desktop { display: none; } } .template-index main.main-content{ margin-top: -55px;

{% if section.settings.desktop_image != blank and section.settings.mobile_image != blank %}

{% endif %}

{% schema %}
{
“name”: “Desktop Mobile Banner”,
“class”: “desktop-mobile-banner”,
“tag”: “section”,
“settings”: [
{
“type”: “header”,
“content”: “Desktop Settings”
},
{
“type”: “image_picker”,
“label”: “Desktop Image”,
“id”: “desktop_image”
},
{
“type”: “header”,
“content”: “Mobile Settings”
},
{
“type”: “image_picker”,
“label”: “Mobile Image”,
“id”: “mobile_image”
}
],
“presets”: [
{
“name”: “Desktop Mobile Banner”,
“category”:“Image”,
“settings”: {
}
}
]

}
{% endschema %}

{% javascript %}
{% endjavascript %}

2

follow below code to make image clickable.

{% if section.settings.desktop_image != blank and section.settings.mobile_image != blank %}

{% endif %}
2 Likes
3

Thank you so much! Is there any way you can add a schema where I can add a url directly from the shopify home page editor?

4

@OasisMB yes i can if you add me as staff using my below email id.

candisoft100@gmail.com

5

@pioneer100 @OasisMB Hi! The code works for me. Would you be able to share the Schema code as well so i can easily enter the URL within shopify each time?