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.
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!
Hi,
Sorry about that. Just updated the code
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
Is this code valid or have an updated version?