Add A Customizable Clickable Image Section

Add A Customizable Clickable Image Section

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

Compatibility: Compatible on most Shopify themes, from Debut to Dawn 2.0.

Add a clickable hero image that can route to your store and even outside your store. Easy to customize. 

 

 

1. Go to Admin Shopify store > Themes > Actions > Edit Code

2. In Section folder, create a new section, name it "clickable image", then paste the code below

 <div class = "clickableImageContainer">
<a href="
{% if section.settings.link == "image_link"%} {{ section.settings.image_link }} {% endif %}
{% if section.settings.link == "web_link"%}{{ section.settings.web_link }}{% endif %}"
class="image-{{ section.settings.image_position }}">
{%- assign img_url = section.settings.image | img_url: 'master' -%}
<img class="hero" style="width:
{% case section.settings.image_size %}
{% when 'x-small' %}
25%
{% when 'small' %}
50%
{% when 'medium' %}
70%
{% when 'large' %}
100%
{% endcase %}"

src="{{ img_url }}">
</a>
</div>
<style>
.clickableImageContainer {
position: relative;
width: 100%;
}
.clickableImageContainer a{
display: flex;
}

.hero{
object-fit: cover;
}
.image-left {
justify-content: flex-start;
}
.image-center {
justify-content: center;
}
.image-right {
justify-content: flex-end;
}
</style>

{% schema %}
{
"name": "Clickable Image",
"settings": [
{
"type": "image_picker",
"id": "image",
"label":"Image"
},
{
"type": "select",
"id": "image_size",
"label": "image size",
"default": "medium",
"options": [
{
"label": "Extra Small",
"value": "x-small"
},
{
"label": "Small",
"value": "small"
},
{
"label": "Medium",
"value": "medium"
},
{
"label": "Large",
"value": "large"
}
]
},
{
"type": "select",
"id": "image_position",
"label": "Position",
"default": "center",
"options": [
{
"label": "center",
"value": "center"
},
{
"label": "left",
"value": "left"
},
{
"label": "right",
"value": "right"
}
]
},
{
"type": "select",
"id": "link",
"label": "Select where image to link",
"default": "image_link",
"info" : "If other website, provide Web Link. If within store, provide Store Link",
"options": [
{
"value": "image_link",
"label": "within store"
},
{
"value": "web_link",
"label": "Other website"
}
]
},
{
"type": "url",
"id": "image_link",
"label": "Store link"
},
{
"type": "text",
"id": "web_link",
"info" : {
"en" : "Type https://. Copy sample format (https://www.example.com)"},
"label": "Web link"
}
],
"presets": [
{
"name": "Clickable Image"
}
]
}
{% endschema %}

 

4. Click SAVE. 

5. Customized

 

Updated: 1/17/22. Made major updates to code to work to any themes. 

Copied!
Back to blog

4 comments

Is there a way to make the images multicolumn? I want two of them next to one another on my home page. Thanks!

Kimberley

Hi,

Sorry about that. Just updated the code

Made4Uo

I would also like to know if this code still works. I have tried but it doesn’t seem to be working. I have it available as a selection but it doesn’t populate when selected. Any help you can give me would be great. Thanks

Jennifer Evans

Is this code valid or have an updated version?

Dym

Leave a comment