Making image a clickable link (custom section)

Solved
OasisMB
New Member
2 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 %}

0 Likes
CANDISOFT
Shopify Partner
986 142 447

This is an accepted solution.

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 %}
For Contact : candisoft100@gmail.com
Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.
OasisMB
New Member
2 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?

0 Likes
CANDISOFT
Shopify Partner
986 142 447

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

candisoft100@gmail.com

For Contact : candisoft100@gmail.com
Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.
0 Likes