Making image a clickable link (custom section)

OasisMB
New Member
4 0 0

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:

 

<style>
.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;
</style>
{% if section.settings.desktop_image != blank and section.settings.mobile_image != blank %}
<div class="banner-container">
<img class="hidden-mobile" src="{{ section.settings.desktop_image | img_url: "master" }}">
<img class="hidden-desktop" src="{{ section.settings.mobile_image | img_url: "master" }}">
</div>
{% 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 %}

Replies 4 (4)

pioneer100
Shopify Partner
1119 145 481

follow below code to make image clickable.

{% if section.settings.desktop_image != blank and section.settings.mobile_image != blank %}
<div class="banner-container">
<a href="YOUR_REDIRECTION_LINK_HERE">
<img class="hidden-mobile" src="{{ section.settings.desktop_image | img_url: "master" }}">
<img class="hidden-desktop" src="{{ section.settings.mobile_image | img_url: "master" }}">
</a>
</div>
{% endif %}
If helpful, Please Like and accept The Solution.
OasisMB
New Member
4 0 0

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?

pioneer100
Shopify Partner
1119 145 481

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

candisoft100@gmail.com

If helpful, Please Like and accept The Solution.
AlandJon
Visitor
1 0 0

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