Add A Customizable Clickable Image Section

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

Color Swatch for Dawn with Images- No App or Subscription needed

Add a color swatch to your Dawn Theme for FREE. Color swatch comes with image. Multiple design av...

Add Custom Textfield / Dropdown in Dawn Theme Shopify 2.0 - No APP needed

Add a personalize textbox to Dawn product page. You can add dropdown, radio buttons and many more...

Convert Dawn Product Page Like Debut Theme with Product Slider

Product slider but counter does not make sense? See my way around. Transform your Dawn product pa...

How to make hero image the background for header - DAWN Theme

Hero image to be the background for header. It is possible. Just follow the steps below. I recomm...

Featured collection slider for Dawn Theme Shopify 2.0

Add a collection slider for your home page. This only works with Dawn Theme.

Adjust Main and Thumbnail Product Images in the Product Page for Dawn Theme

Dawn Theme issues with large images? Solve that using this video tutorial

Product Slider for Dawn Theme - No apps or subscript- Just a little bit of code

Add a product slider for Dawn theme, almost like Debut theme slider. No app or subscription neede...

Tab Component Section - Pure CSS

Add a tab component as a section which means, you can add it to any pages in Shopify 2.0, like pr...

1 comentário

Is this code valid or have an updated version?

Dym

Deixe um comentário