Add A Customizable Clickable Image Section

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

Add a clickable hero image for your landing page. 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

{%- if section.settings.image_layout == 'full_width' and section.settings.image_size == 'adapt' -%}
{%- if section.settings.image.aspect_ratio == blank -%}
{%- assign min_aspect_ratio = 2.0 -%}
{%- else -%}
{%- assign min_aspect_ratio = section.settings.image.aspect_ratio -%}
{%- endif -%}
{%- assign wrapper_height = 100 | divided_by: min_aspect_ratio -%}

{%- endif -%}


<div class = "click-image_link {{ section.settings.image_position }} ">
<a href="
{% if section.settings.link == "image_link"%} {{ section.settings.image_link }} {% endif %}
{% if section.settings.link == "web_link"%}{{ section.settings.web_link }}{% endif %}
">

{%- assign img_url = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<img class="hero--{{ section.settings.image_size }} lazyload lazypreload"
data-src="{{ img_url }}"
data-widths="[180, 360, 470, 600, 770, 970, 1060, 1280, 1512, 1728, 2048]"
data-aspectratio="{{ section.settings.image.aspect_ratio }}"
data-sizes="auto">
</a>
</div>
<style>
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}

.right {
display: block;
margin-left: 50%;
margin-right: 0px;
width: 50%;

}

.left {
display: block;
margin-left: 0px;
margin-right: 50%;
width: 50%;
}


</style>

{% schema %}
{
"name": {
"en": "Clickable Image"
},
"class": "index-section index-section--flush",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": {
"cs": "Obrázek",
"da": "Billede",
"de": "Foto",
"en": "Image",
"es": "Imagen",
"fi": "Kuva",
"fr": "Image",
"it": "Immagine",
"ja": "画像",
"ko": "이미지",
"nb": "Bilde",
"nl": "Afbeelding",
"pl": "Obraz",
"pt-BR": "Imagem",
"pt-PT": "Imagem",
"sv": "Bild",
"th": "รูปภาพ",
"tr": "Görsel",
"vi": "Hình ảnh",
"zh-CN": "图片",
"zh-TW": "圖片"
}
},
{
"type": "select",
"id": "image_layout",
"label": {
"cs": "Rozvržení",
"da": "Layout",
"de": "Layout",
"en": "Layout",
"es": "Diseño",
"fi": "Asettelu",
"fr": "Mise en page",
"it": "Layout",
"ja": "レイアウト",
"ko": "레이아웃",
"nb": "Oppsett",
"nl": "Opmaak",
"pl": "Układ",
"pt-BR": "Layout",
"pt-PT": "Esquema",
"sv": "Layout",
"th": "เลย์เอาต์",
"tr": "Düzen",
"vi": "Bố cục",
"zh-CN": "布局",
"zh-TW": "版面配置"
},
"default": "full_width",
"options": [
{
"label": {
"cs": "Plná šířka",
"da": "Fuld bredde",
"de": "Volle Breite",
"en": "Full width",
"es": "Ancho completo",
"fi": "Täysi leveys",
"fr": "Pleine largeur",
"it": "Intera larghezza",
"ja": "全幅",
"ko": "전체 폭",
"nb": "Full bredde",
"nl": "Volledige breedte",
"pl": "Pełna szerokość",
"pt-BR": "Largura completa",
"pt-PT": "Largura total",
"sv": "Full bredd",
"th": "เต็มความกว้าง",
"tr": "Tam genişlik",
"vi": "Độ rộng đầy đủ",
"zh-CN": "全宽",
"zh-TW": "全寬度"
},
"value": "full_width"
},
{
"label": {
"cs": "Pevná šířka",
"da": "Fast bredde",
"de": "Feste Breite",
"en": "Fixed width",
"es": "Ancho fijo",
"fi": "Kiinteä leveys",
"fr": "Largeur fixe",
"it": "Larghezza fissa",
"ja": "固定幅",
"ko": "고정 폭",
"nb": "Fast bredde",
"nl": "Vaste breedte",
"pl": "Stała szerokość",
"pt-BR": "Largura fixa",
"pt-PT": "Largura fixa",
"sv": "Fast bredd",
"th": "ความกว้างตายตัว",
"tr": "Sabit genişlik",
"vi": "Độ rộng cố định",
"zh-CN": "固定宽度",
"zh-TW": "固定寬度"
},
"value": "fixed_width"
}
]
},
{
"type": "select",
"id": "image_size",
"label": {
"cs": "Výška sekce",
"da": "Højde på afsnit",
"de": "Bereichs-Höhe",
"en": "Section height",
"es": "Altura de la sección",
"fi": "Osan korkeus",
"fr": "Hauteur de la section",
"it": "Altezza sezione",
"ja": "セクションの高さ",
"ko": "섹션 높이",
"nb": "Høyde på del",
"nl": "Sectiehoogte",
"pl": "Wysokość sekcji",
"pt-BR": "Altura da seção",
"pt-PT": "Altura da secção",
"sv": "Sektionshöjd",
"th": "ความสูงของส่วน",
"tr": "Bölüm yüksekliği",
"vi": "Chiều cao mục",
"zh-CN": "分区高度",
"zh-TW": "區塊高度"
},
"default": "medium",
"options": [
{
"label": {
"cs": "Přizpůsobení obrázku",
"da": "Tilpas til billede",
"de": "An Bild anpassen",
"en": "Adapt to image",
"es": "Adaptar a la imagen",
"fi": "Sovita kuvaan",
"fr": "S'adapter à l'image",
"it": "Adatta all'immagine",
"ja": "画像に対応",
"ko": "이미지에 맞춤",
"nb": "Tilpass til bilde",
"nl": "Aanpassen aan afbeelding",
"pl": "Dostosuj do obrazu",
"pt-BR": "Adaptar à imagem",
"pt-PT": "Adaptar à imagem",
"sv": "Anpassa till bild",
"th": "ปรับตามรูปภาพ",
"tr": "Görsele uyarla",
"vi": "Điều chỉnh theo hình ảnh",
"zh-CN": "适应图片",
"zh-TW": "配合圖片"
},
"value": "adapt"
},
{
"label": {
"cs": "Extra malá",
"da": "Ekstra lille",
"de": "Extra klein",
"en": "Extra Small",
"es": "Extra pequeña",
"fi": "Erikoispieni",
"fr": "Très petite",
"it": "Molto piccola",
"ja": "極小",
"ko": "특소",
"nb": "Ekstra liten",
"nl": "Extra klein",
"pl": "Bardzo mała",
"pt-BR": "Extra pequeno",
"pt-PT": "Extra pequeno",
"sv": "Extra liten",
"th": "ขนาดเล็กพิเศษ",
"tr": "Çok Küçük",
"vi": "Cực nhỏ",
"zh-CN": "特小",
"zh-TW": "超小型"
},
"value": "x-small"
},
{
"label": {
"cs": "Malá",
"da": "Lille",
"de": "Klein",
"en": "Small",
"es": "Pequeña",
"fi": "Pieni",
"fr": "Petite",
"it": "Small",
"ja": "小",
"ko": "스몰",
"nb": "Liten",
"nl": "Klein",
"pl": "Mała",
"pt-BR": "Pequeno",
"pt-PT": "Pequeno",
"sv": "Liten",
"th": "เล็ก",
"tr": "Küçük",
"vi": "Nhỏ",
"zh-CN": "小",
"zh-TW": "小型"
},
"value": "small"
},
{
"label": {
"cs": "Střední",
"da": "Medium",
"de": "Mitte",
"en": "Medium",
"es": "Mediana",
"fi": "Keskisuuri",
"fr": "Moyenne",
"it": "Medium",
"ja": "中",
"ko": "보통",
"nb": "Middels",
"nl": "Gemiddeld",
"pl": "Średnia",
"pt-BR": "Médio",
"pt-PT": "Médio",
"sv": "Medium",
"th": "ปานกลาง",
"tr": "Orta",
"vi": "Trung bình",
"zh-CN": "中等",
"zh-TW": "中等"
},
"value": "medium"
},
{
"label": {
"cs": "Velká",
"da": "Stor",
"de": "Groß",
"en": "Large",
"es": "Grande",
"fi": "Suuri",
"fr": "Grande",
"it": "Large",
"ja": "大",
"ko": "라지",
"nb": "Stor",
"nl": "Groot",
"pl": "Duża",
"pt-BR": "Grande",
"pt-PT": "Grande",
"sv": "Stor",
"th": "ใหญ่",
"tr": "Büyük",
"vi": "Lớn",
"zh-CN": "大",
"zh-TW": "大型"
},
"value": "large"
},
{
"label": {
"cs": "Extra velká",
"da": "Ekstra stor",
"de": "Extra groß",
"en": "Extra Large",
"es": "Extra grande",
"fi": "Erikoissuuri",
"fr": "Très grande",
"it": "Molto grande",
"ja": "特大",
"ko": "특대",
"nb": "Ekstra stort",
"nl": "Extra groot",
"pl": "Bardzo duża",
"pt-BR": "Extra grande",
"pt-PT": "Extra grande",
"sv": "Extra stor",
"th": "ขนาดใหญ่พิเศษ",
"tr": "Çok Büyük",
"vi": "Cực lớn",
"zh-CN": "特大",
"zh-TW": "超大型"
},
"value": "x-large"
}
]
},
{
"type": "select",
"id": "image_position",
"label": {
"en": "Position"
},
"default": "center",
"options": [
{
"label": {
"en": "center"
},
"value": "center"
},
{
"label": {
"en": "left"
},
"value": "left"
},
{
"label": {
"en": "right"
},
"value": "right"
}
]
},
{
"type": "select",
"id": "link",
"label": {
"en": "Select where image to link"
},

"default": "image_link",
"info" : {
"en" : "If other website, provide Web Link. If within store, provide Store Link"},

"options": [
{

"value": "image_link",
"label": {
"en": "within store"
}
},
{

"value": "web_link",
"label": {
"en": "Other website"

}
}
]
},

{
"type": "url",
"id": "image_link",
"label": {
"cs": "Tlačítkový odkaz",
"da": "Knaplink",
"de": "Button-Etikett",
"en": "Store link",
"es": "Enlace de botón",
"fi": "Painikelinkki",
"fr": "Lien du bouton",
"it": "Link pulsante",
"ja": "ボタンのリンク",
"ko": "버튼 링크",
"nb": "Kobling for knapp",
"nl": "Knoplink",
"pl": "Link przycisku",
"pt-BR": "Link de botão",
"pt-PT": "Ligação do botão",
"sv": "Knapplänk",
"th": "ลิงก์ปุ่ม",
"tr": "Düğme bağlantısı",
"vi": "Liên kết trên nút",
"zh-CN": "按钮链接",
"zh-TW": "按鈕連結"
}
}, {
"type": "text",
"id": "web_link",
"info" : {
"en" : "Type https://. Copy sample format (https://www.example.com)"},
"label": {
"cs": "Tlačítkový odkaz",
"da": "Knaplink",
"de": "Button-Etikett",
"en": "Web link",
"es": "Enlace de botón",
"fi": "Painikelinkki",
"fr": "Lien du bouton",
"it": "Link pulsante",
"ja": "ボタンのリンク",
"ko": "버튼 링크",
"nb": "Kobling for knapp",
"nl": "Knoplink",
"pl": "Link przycisku",
"pt-BR": "Link de botão",
"pt-PT": "Ligação do botão",
"sv": "Knapplänk",
"th": "ลิงก์ปุ่ม",
"tr": "Düğme bağlantısı",
"vi": "Liên kết trên nút",
"zh-CN": "按钮链接",
"zh-TW": "按鈕連結"
}
}
],
"presets": [
{
"name": {
"en": "Clickable Image"
},
"category": {
"cs": "Obrázek",
"da": "Billede",
"de": "Foto",
"en": "Image",
"es": "Imagen",
"fi": "Kuva",
"fr": "Image",
"it": "Immagine",
"ja": "画像",
"ko": "이미지",
"nb": "Bilde",
"nl": "Afbeelding",
"pl": "Obraz",
"pt-BR": "Imagem",
"pt-PT": "Imagem",
"sv": "Bild",
"th": "รูปภาพ",
"tr": "Görsel",
"vi": "Hình ảnh",
"zh-CN": "图片",
"zh-TW": "圖片"
}
}
]
}
{% endschema %}

4. Click SAVE. 

5. Customized