Debut Theme - link to a banner without a button (clickable "image with text overlay")

[StretchSpine]

Hi guys, I want to attach a link to my banner ("image with text overlay").

I want to add a link to my banner so after clicking it customers will go to a product page. Important thing is that I don't want to have a button

site: stretchspine.com 

password: stretchspine01

[Anonymous]

Hi @StretchSpine 

Please find hero.liquid file in code file then copy and paste given code below also add a link banner button then it's called to banner link.

{%- if section.settings.hero_layout == 'full_width' and section.settings.hero_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 -%}
{%- style -%}
.hero-{{ section.id }} {
height: {{- wrapper_height -}}vw !important;
}
{%- endstyle -%}
{%- endif -%}
<div data-section-id="{{ section.id }}" data-section-type="hero-section">
{%- if section.settings.hero_layout == 'fixed_width' -%}
<div class="page-width">
{%- endif -%}
{%- if section.settings.hero_layout == 'fixed_width' and section.settings.hero_size == 'adapt' -%}
{%- assign slide_width = 1090 -%}
{%- assign min_aspect_ratio = section.settings.image.aspect_ratio | default: 2.0 -%}
<div class="hero-fixed-width hero--adapt"
id="Hero-{{ section.id }}"
data-layout="{{ section.settings.hero_layout }}">
{%- assign img_url = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- if section.settings.image.width < max_width -%}
{%- assign slide_width = section.settings.image.width -%}
{%- endif -%}
<div class="hero-fixed-width__content">
<div class="page-width text-center">
{%- if section.settings.title != blank -%}
<h2 class="h1 mega-title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">{{ section.settings.title | escape }}</h2>
{%- endif -%}
{%- if section.settings.text != blank -%}
<div class="rte-setting mega-subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">{{ section.settings.text }}</div>
{%- endif -%}
{%- if section.settings.button_label != blank and section.settings.button_link != blank -%}
<a href="{{ section.settings.button_link }}" class="btn hero__btn">
{{ section.settings.button_label | escape }}
</a>
{%- endif -%}
</div>
</div>
{%- if section.settings.image != blank -%}
<img class="hero-fixed-width__image lazyload lazypreload"
src="{{ section.settings.image | img_url: '300x300' }}"
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"
style="{%- if slide_width <= max_width -%}
{%- assign min_width = slide_width | times: 100 | divided_by: max_width -%}
min-width: {{ min_width }}%;
{%- endif -%}
object-position: {{ section.settings.alignment }};"
alt="{{ section.settings.image.alt | escape }}">
{%- else -%}
<span>
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</span>
{%- endif -%}
<noscript>
<div class="hero-fixed-width__image"{% if section.settings.image %}{% unless section.settings.image.alt == blank %} role="img" aria-label="{{ section.settings.image.alt | escape }}"{% endunless %} style="background-image: url('{{ section.settings.image | img_url: '2048x' }}'); background-position: center {{ section.settings.alignment }};"{% endif %}></div>
</noscript>
</div>
{%- else -%}
<a href="{{ section.settings.button_link }}">
<div class="hero hero--{{ section.settings.hero_size }} hero-{{ section.id }}{% if section.settings.title != blank or section.settings.text != blank or section.settings.button_label != blank %} hero__overlay{% endif %} box ratio-container lazyload js"
id="Hero-{{ section.id }}"
data-layout="{{ section.settings.hero_layout }}"
{%- if section.settings.image -%}
{% unless section.settings.image.alt == blank %}
role="img"
aria-label="{{ section.settings.image.alt | escape }}"
data-alt="{{ section.settings.image.alt | escape }}"
{% endunless %}
data-bg="{{ section.settings.image | img_url: '300x300' }}"
data-bgset="{% include 'bgset', image: section.settings.image %}"
data-sizes="auto"
data-parent-fit="cover"
style="background-position: {{ section.settings.alignment }}; background-image: url('{{ section.settings.image | img_url: '300x300' }});"
{%- endif -%}>
{%- if section.settings.image == blank -%}
<div class="placeholder-background">
{{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{%- endif -%}
<div class="hero__inner">
<div class="page-width text-center">
{%- if section.settings.title != blank -%}
<h2 class="h1 mega-title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">{{ section.settings.title | escape }}</h2>
{%- endif -%}
{%- if section.settings.text != blank -%}
<div class="rte-setting mega-subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">{{ section.settings.text }}</div>
{%- endif -%}
{%- if section.settings.button_label != blank and section.settings.button_link != blank -%}
{%- capture ariaLabel -%}
{{- section.settings.button_label -}}
{%- if section.settings.button_link.type == 'frontpage_link' -%}
: {{ 'homepage.general.title' | t -}}
{%- elsif section.settings.button_link.type == 'catalog_link' -%}
: {{ 'collections.catalog.title' | t -}}
{%- elsif section.settings.button_link.object.title -%}
: {{ section.settings.button_link.object.title -}}
{%- endif -%}
{%- endcapture -%}

<a href="{{ section.settings.button_link }}"
class="btn hero__btn"
aria-label="{{ ariaLabel }}">
{{- section.settings.button_label | escape -}}
</a>
{%- endif -%}
</div>
</div>
</div>
</a>
<noscript>
<div class="hero hero--{{ section.settings.hero_size }}{% if section.settings.title != blank or section.settings.text != blank or section.settings.button_label != blank %} hero__overlay{% endif %}"{% if section.settings.image %}{% unless section.settings.image.alt == blank %} role="img" aria-label="{{ section.settings.image.alt | escape }}"{% endunless %} style="background-image: url('{{ section.settings.image | img_url: '2048x' }}'); background-position: center {{ section.settings.alignment }};"{% endif %}></div>
</noscript>
{%- endif -%}
{%- if section.settings.hero_layout == 'fixed_width' -%}
</div>
{%- endif -%}
</div>

{% schema %}
{
"name": {
"da": "Billede med tekstoverlejring",
"de": "Foto mit überlegtem Text",
"en": "Image with text overlay",
"es": "magen con texto superpuesto",
"fi": "Kuva päällä olevalla tekstillä",
"fr": "Image avec calque texte",
"hi": "पाठ ओवरले के साथ इमेज",
"it": "Immagine con testo",
"ja": "テキストオーバーレイ付き画像",
"ko": "텍스트 오버레이 포함 이미지",
"nb": "Bilde med tekstoverlegg",
"nl": "Foto met tekstoverlay",
"pt-BR": "Imagem com texto",
"pt-PT": "Imagem com sobreposição de texto",
"sv": "Bild med textöverlagring",
"th": "การวางซ้อนรูปภาพพร้อมข้อความ",
"zh-CN": "带文本叠加的图片",
"zh-TW": "附文字疊加層的圖片"
},
"class": "index-section index-section--flush",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": {
"da": "Billede",
"de": "Foto",
"en": "Image",
"es": "Imagen",
"fi": "Kuva",
"fr": "Image",
"hi": "इमेज",
"it": "Immagine",
"ja": "画像",
"ko": "이미지",
"nb": "Bilde",
"nl": "Afbeelding",
"pt-BR": "Imagem",
"pt-PT": "Imagem",
"sv": "Bild",
"th": "รูปภาพ",
"zh-CN": "图片",
"zh-TW": "圖片"
}
},
{
"type": "select",
"id": "alignment",
"label": {
"da": "Justering af billede",
"de": "Fotoausrichtung",
"en": "Image alignment",
"es": "Alineación de imagen",
"fi": "Kuvan tasaus",
"fr": "Alignement de l'image",
"hi": "इमेज पंक्तिबद्ध करना",
"it": "Allineamento immagine",
"ja": "画像アラインメント",
"ko": "이미지 정렬",
"nb": "Bildejustering",
"nl": "Afbeelding uitlijnen",
"pt-BR": "Alinhamento da imagem",
"pt-PT": "Alinhamento da imagem",
"sv": "Bildjustering",
"th": "การจัดวางรูปภาพ",
"zh-CN": "图片对齐方式",
"zh-TW": "圖片對齊"
},
"default": "center",
"options": [
{
"value": "top",
"label": {
"da": "Top",
"de": "Oben",
"en": "Top",
"es": "Superior",
"fi": "Ylös",
"fr": "Haut",
"hi": "सबसे ऊपर",
"it": "In alto",
"ja": "上",
"ko": "위쪽",
"nb": "Topp",
"nl": "Boven",
"pt-BR": "Acima",
"pt-PT": "Acima",
"sv": "Högst upp",
"th": "ด้านบน",
"zh-CN": "顶部",
"zh-TW": "頂部"
}
},
{
"value": "center",
"label": {
"da": "I midten",
"de": "Mitte",
"en": "Middle",
"es": "Centrada",
"fi": "Keskelle",
"fr": "Milieu",
"hi": "मध्य में",
"it": "Al centro",
"ja": "中央",
"ko": "중간",
"nb": "Midten",
"nl": "Midden",
"pt-BR": "Meio",
"pt-PT": "Meio",
"sv": "Mitten",
"th": "ตรงกลาง",
"zh-CN": "中间",
"zh-TW": "中央"
}
},
{
"value": "bottom",
"label": {
"da": "Bund",
"de": "Unten",
"en": "Bottom",
"es": "Inferior",
"fi": "Alas",
"fr": "Bas",
"hi": "नीचे का",
"it": "In basso",
"ja": "下",
"ko": "아래쪽",
"nb": "Bunn",
"nl": "Onder",
"pt-BR": "Abaixo",
"pt-PT": "Abaixo",
"sv": "Längst ner",
"th": "ด้านล่าง",
"zh-CN": "底部",
"zh-TW": "底部"
}
}
]
},
{
"type": "select",
"id": "hero_layout",
"label": {
"da": "Layout",
"de": "Layout",
"en": "Layout",
"es": "Diseño",
"fi": "Asettelu",
"fr": "Mise en page",
"hi": "लेआउट",
"it": "Layout",
"ja": "レイアウト",
"ko": "레이아웃",
"nb": "Oppsett",
"nl": "Opmaak",
"pt-BR": "Layout",
"pt-PT": "Esquema",
"sv": "Layout",
"th": "เลย์เอาต์",
"zh-CN": "布局",
"zh-TW": "版面配置"
},
"default": "full_width",
"options": [
{
"label": {
"da": "Fuld bredde",
"de": "Volle Breite",
"en": "Full width",
"es": "Ancho completo",
"fi": "Täysi leveys",
"fr": "Pleine largeur",
"hi": "पूर्ण चौड़ाई",
"it": "Intera larghezza",
"ja": "全幅",
"ko": "전체 폭",
"nb": "Full bredde",
"nl": "Volledige breedte",
"pt-BR": "Largura completa",
"pt-PT": "Largura total",
"sv": "Full bredd",
"th": "เต็มความกว้าง",
"zh-CN": "全宽",
"zh-TW": "全寬度"
},
"value": "full_width"
},
{
"label": {
"da": "Fast bredde",
"de": "Feste Breite",
"en": "Fixed width",
"es": "Ancho fijo",
"fi": "Kiinteä leveys",
"fr": "Largeur fixe",
"hi": "निश्चित चौड़ाई",
"it": "Larghezza fissa",
"ja": "固定幅",
"ko": "고정 폭",
"nb": "Fast bredde",
"nl": "Vaste breedte",
"pt-BR": "Largura fixa",
"pt-PT": "Largura fixa",
"sv": "Fast bredd",
"th": "ความกว้างตายตัว",
"zh-CN": "固定宽度",
"zh-TW": "固定寬度"
},
"value": "fixed_width"
}
]
},
{
"type": "select",
"id": "hero_size",
"label": {
"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",
"hi": "सेक्शन की ऊंचाई",
"it": "Altezza sezione",
"ja": "セクションの高さ",
"ko": "섹션 높이",
"nb": "Høyde på del",
"nl": "Sectiehoogte",
"pt-BR": "Altura da seção",
"pt-PT": "Altura da secção",
"sv": "Sektionshöjd",
"th": "ความสูงของส่วน",
"zh-CN": "分区高度",
"zh-TW": "區塊高度"
},
"default": "medium",
"options": [
{
"label": {
"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",
"hi": "इमेज के अनुकूल बनाएं",
"it": "Adatta all'immagine",
"ja": "画像に対応",
"ko": "이미지에 맞춤",
"nb": "Tilpass til bilde",
"nl": "Aanpassen aan afbeelding",
"pt-BR": "Adaptar à imagem",
"pt-PT": "Adaptar à imagem",
"sv": "Anpassa till bild",
"th": "ปรับตามรูปภาพ",
"zh-CN": "适应图片",
"zh-TW": "配合圖片"
},
"value": "adapt"
},
{
"label": {
"da": "Ekstra lille",
"de": "Extra klein",
"en": "Extra Small",
"es": "Extra pequeña",
"fi": "Erikoispieni",
"fr": "Très petite",
"hi": "अतिरिक्त छोटा",
"it": "Molto piccola",
"ja": "極小",
"ko": "특소",
"nb": "Ekstra liten",
"nl": "Extra klein",
"pt-BR": "Extra pequeno",
"pt-PT": "Extra pequeno",
"sv": "Extra liten",
"th": "ขนาดเล็กพิเศษ",
"zh-CN": "特小",
"zh-TW": "超小型"
},
"value": "x-small"
},
{
"label": {
"da": "Lille",
"de": "Klein",
"en": "Small",
"es": "Pequeña",
"fi": "Pieni",
"fr": "Petite",
"hi": "छोटा",
"it": "Small",
"ja": "小",
"ko": "스몰",
"nb": "Liten",
"nl": "Klein",
"pt-BR": "Pequeno",
"pt-PT": "Pequeno",
"sv": "Liten",
"th": "เล็ก",
"zh-CN": "小",
"zh-TW": "小型"
},
"value": "small"
},
{
"label": {
"da": "Medium",
"de": "Mitte",
"en": "Medium",
"es": "Mediana",
"fi": "Keskisuuri",
"fr": "Moyenne",
"hi": "मध्यम",
"it": "Medium",
"ja": "中",
"ko": "보통",
"nb": "Middels",
"nl": "Gemiddeld",
"pt-BR": "Médio",
"pt-PT": "Médio",
"sv": "Medium",
"th": "ปานกลาง",
"zh-CN": "中等",
"zh-TW": "中等"
},
"value": "medium"
},
{
"label": {
"da": "Stor",
"de": "Groß",
"en": "Large",
"es": "Grande",
"fi": "Suuri",
"fr": "Grande",
"hi": "बड़ा",
"it": "Large",
"ja": "大",
"ko": "라지",
"nb": "Stor",
"nl": "Groot",
"pt-BR": "Grande",
"pt-PT": "Grande",
"sv": "Stor",
"th": "ใหญ่",
"zh-CN": "大",
"zh-TW": "大型"
},
"value": "large"
},
{
"label": {
"da": "Ekstra stor",
"de": "Extra groß",
"en": "Extra Large",
"es": "Extra grande",
"fi": "Erikoissuuri",
"fr": "Très grande",
"hi": "अतिरिक्त बड़ा",
"it": "Molto grande",
"ja": "特大",
"ko": "특대",
"nb": "Ekstra stort",
"nl": "Extra groot",
"pt-BR": "Extra grande",
"pt-PT": "Extra grande",
"sv": "Extra stor",
"th": "ขนาดใหญ่พิเศษ",
"zh-CN": "特大",
"zh-TW": "超大型"
},
"value": "x-large"
}
]
},
{
"type": "select",
"id": "text_size",
"label": {
"da": "Tekststørrelse",
"de": "Textgröße",
"en": "Text size",
"es": "Tamaño del texto",
"fi": "Tekstin koko",
"fr": "Taille du texte",
"hi": "टेक्स्ट आकार",
"it": "Dimensione testo",
"ja": "文字サイズ",
"ko": "텍스트 사이즈",
"nb": "Tekststørrelse",
"nl": "Tekengrootte",
"pt-BR": "Tamanho do texto",
"pt-PT": "Tamanho do texto",
"sv": "Textstorlek",
"th": "ขนาดตัวอักษร",
"zh-CN": "文本大小",
"zh-TW": "文字尺寸"
},
"default": "medium",
"options": [
{
"label": {
"da": "Medium",
"de": "Mitte",
"en": "Medium",
"es": "Mediano",
"fi": "Keskisuuri",
"fr": "Moyenne",
"hi": "मध्यम",
"it": "Medium",
"ja": "中",
"ko": "보통",
"nb": "Middels",
"nl": "Gemiddeld",
"pt-BR": "Médio",
"pt-PT": "Intermédio",
"sv": "Medium",
"th": "ปานกลาง",
"zh-CN": "中等",
"zh-TW": "中等"
},
"value": "medium"
},
{
"label": {
"da": "Stor",
"de": "Groß",
"en": "Large",
"es": "Grande",
"fi": "Suuri",
"fr": "Grande",
"hi": "बड़ा",
"it": "Large",
"ja": "大",
"ko": "라지",
"nb": "Stor",
"nl": "Groot",
"pt-BR": "Grande",
"pt-PT": "Grande",
"sv": "Stor",
"th": "ใหญ่",
"zh-CN": "大",
"zh-TW": "大型"
},
"value": "large"
}
]
},
{
"type": "text",
"id": "title",
"label": {
"da": "Overskrift",
"de": "Titel",
"en": "Heading",
"es": "Título",
"fi": "Otsake",
"fr": "En-tête",
"hi": "शीर्षक",
"it": "Heading",
"ja": "見出し",
"ko": "제목",
"nb": "Overskrift",
"nl": "Kop",
"pt-BR": "Título",
"pt-PT": "Título",
"sv": "Rubrik",
"th": "ส่วนหัว",
"zh-CN": "标题",
"zh-TW": "標題"
},
"default": {
"da": "Billede med tekstoverlejring",
"de": "Foto mit überlegtem Text",
"en": "Image with text overlay",
"es": "magen con texto superpuesto",
"fi": "Kuva päällä olevalla tekstillä",
"fr": "Image avec calque texte",
"hi": "पाठ ओवरले के साथ इमेज",
"it": "Immagine con testo",
"ja": "テキストオーバーレイ付き画像",
"ko": "텍스트 오버레이 포함 이미지",
"nb": "Bilde med tekstoverlegg",
"nl": "Foto met tekstoverlay",
"pt-BR": "Imagem com sobreposição de texto",
"pt-PT": "Imagem com sobreposição de texto",
"sv": "Bild med textöverlagring",
"th": "การวางซ้อนรูปภาพพร้อมข้อความ",
"zh-CN": "带文本叠加的图片",
"zh-TW": "附文字疊加層的圖片"
}
},
{
"type": "richtext",
"id": "text",
"label": {
"da": "Tekst",
"de": "Text",
"en": "Text",
"es": "Texto",
"fi": "Teksti",
"fr": "Texte",
"hi": "टेक्स्ट",
"it": "Testo",
"ja": "テキスト",
"ko": "텍스트",
"nb": "Tekst",
"nl": "Tekst",
"pt-BR": "Texto",
"pt-PT": "Texto",
"sv": "Text",
"th": "ข้อความ",
"zh-CN": "文本",
"zh-TW": "文字"
},
"default": {
"da": "<p>Brug tekstoverlejring til at give dine kunder indblik i dit brand. Vælg billeder og tekst, der passer til din stil og historie.</p>",
"de": "<p>Nutzen Sie überlegten Text, um Kunden über Ihre Marke zu informieren. Wählen Sie Fotos und Text aus, die zu Ihrer Marke passen.</p>",
"en": "<p>Use overlay text to give your customers insight into your brand. Select imagery and text that relates to your style and story.</p>",
"es": "<p>Usa el texto superpuesto para darles información útil a tus clientes sobre tu marca. Selecciona imágenes y textos que se relacionen con tu estilo e historia.</p>",
"fi": "<p>Käytä taustan päällä olevaa tekstiä, jotta asiakkaat voivat tutustua tuotemerkkisi. Valitse tyylisi ja tarinasi liittyvät kuvat ja teksti.</p>",
"fr": "<p>Utilisez la superposition de texte pour donner un aperçu de votre marque à vos clients. Utilisez une image et du texte qui se rapportent au style et à l'histoire de votre marque.</p>",
"hi": "<p>अपने ब्रांड में अपने ग्राहकों को जानकारी देने के लिए ओवरले टेक्स्ट का उपयोग करें. अपनी स्टाइल और कहानी से संबंधित कल्पना और पाठ का चयन करें.</p>",
"it": "<p>Utilizza il testo in sovrapposizione per dare ai clienti informazioni sul tuo brand. Seleziona immagini e testo legati al tuo stile e alla tua storia.</p>",
"ja": "<p>オーバーレイテキストを使用して、お客様があなたのブランドについてよく理解できるようにします。あなたのスタイルやストーリーに関連する画像やテキストを選択してください。</p>",
"ko": "<p>오버레이 텍스트를 사용하여 고객에게 브랜드에 대한 통찰력을 부여하십시오. 자신의 스타일과 이야기와 관련된 이미지와 텍스트를 선택하십시오.</p>",
"nb": "<p>Bruk overleggstekst til å gi kundene dine innsikt i merkevaren din. Velg bildebruk og tekst som er relatert til din stil og historie.</p>",
"nl": "<p>Gebruik overlay-tekst om je klanten inzicht te geven in je merk. Selecteer afbeeldingen en tekst die betrekking hebben op je stijl en verhaal.</p>",
"pt-BR": "<p>Use o texto de sobreposição para apresentar insights sobre sua marca aos clientes. Selecione imagens e textos que reflitam seu estilo e sua história.</p>",
"pt-PT": "<p>Utilize o texto de sobreposição para fornecer informações sobre a sua marca aos clientes. Selecione imagens e textos que reflitam o seu estilo e a sua história.</p>",
"sv": "<p>Använd överläggningstext för att ge dina kunder inblick i ditt varumärke. Välj bildspråk och text som gäller din stil och historia.</p>",
"th": "<p>ใช้ข้อความซ้อนทับเพื่อให้ลูกค้าของคุณทราบถึงรายละเอียดเกี่ยวกับแบรนด์ เลือกรูปภาพและข้อความที่มีความเกี่ยวข้องกับสไตล์กับเรื่องราวของคุณ</p>",
"zh-CN": "<p>使用叠加文本让客户深入了解您的品牌。选择与您的风格和故事相关的图片和文本。</p>",
"zh-TW": "<p>運用文字疊加層讓顧客更加瞭解您的品牌。選擇與您風格和品牌故事相關的圖像和文字。</p>"
}
},
{
"type": "text",
"id": "button_label",
"label": {
"da": "Knaptekst",
"de": "Button-Etikett",
"en": "Button label",
"es": "Etiqueta de botón",
"fi": "Tekstipainike",
"fr": "Texte du bouton",
"hi": "बटन लेबल",
"it": "Etichetta pulsante",
"ja": "ボタンのラベル",
"ko": "버튼 레이블",
"nb": "Knappetikett",
"nl": "Knoplabel",
"pt-BR": "Etiqueta de botão",
"pt-PT": "Etiqueta do botão",
"sv": "Knappetikett",
"th": "ป้ายกำกับปุ่ม",
"zh-CN": "按钮标签",
"zh-TW": "按鈕標籤"
}
},
{
"type": "url",
"id": "button_link",
"label": {
"da": "Knaplink",
"de": "Button-Etikett",
"en": "Button link",
"es": "Enlace de botón",
"fi": "Painikelinkki",
"fr": "Lien du bouton",
"hi": "बटन लिंक",
"it": "Link pulsante",
"ja": "ボタンのリンク",
"ko": "버튼 링크",
"nb": "Kobling for knapp",
"nl": "Knoplink",
"pt-BR": "Link de botão",
"pt-PT": "Ligação do botão",
"sv": "Knapplänk",
"th": "ลิงก์ปุ่ม",
"zh-CN": "按钮链接",
"zh-TW": "按鈕連結"
}
}
],
"presets": [
{
"name": {
"da": "Billede med tekstoverlejring",
"de": "Foto mit überlegtem Text",
"en": "Image with text overlay",
"es": "magen con texto superpuesto",
"fi": "Kuva päällä olevalla tekstillä",
"fr": "Image avec calque texte",
"hi": "पाठ ओवरले के साथ इमेज",
"it": "Immagine con testo",
"ja": "テキストオーバーレイ付き画像",
"ko": "텍스트 오버레이 포함 이미지",
"nb": "Bilde med tekstoverlegg",
"nl": "Foto met tekstoverlay",
"pt-BR": "Imagem com sobreposição de texto",
"pt-PT": "Imagem com sobreposição de texto",
"sv": "Bild med textöverlagring",
"th": "การวางซ้อนรูปภาพพร้อมข้อความ",
"zh-CN": "带文本叠加的图片",
"zh-TW": "附文字疊加層的圖片"
},
"category": {
"da": "Billede",
"de": "Foto",
"en": "Image",
"es": "Imagen",
"fi": "Kuva",
"fr": "Image",
"hi": "इमेज",
"it": "Immagine",
"ja": "画像",
"ko": "이미지",
"nb": "Bilde",
"nl": "Afbeelding",
"pt-BR": "Imagem",
"pt-PT": "Imagem",
"sv": "Bild",
"th": "รูปภาพ",
"zh-CN": "图片",
"zh-TW": "圖片"
}
}
]
}
{% endschema %}

Thanks

Vishvas Mishra

[StretchSpine]

@Anonymous I can't understand you and why a code is so long? I want only link in banner...

[Anonymous · Accepted solution]

@StretchSpine 

Sorry for long code.You only need to add anchor tag( <a href="{{ section.settings.button_link }}">) before  (<div class="hero hero--{{ section.settings.hero_size }} hero ) the given code and close the anchor tag(</a>) before <noscript> tag

Thanks

Vishvas Mishra 

[StretchSpine]

@Anonymous I deleted all the code from hero.liquid and add this one which you gave me. It's working! Thank you very much.

btw. maybe you can help me also with this problem? -https://community.shopify.com/c/Shopify-Design/Product-Page-quot-Add-To-Cart-quot-Button-next-to-quot-Quantity/m-p/818153#M205879

[K-Porter]

Great Work @Anonymous !

I replaced my code with yours and it worked perfectly. Been looking for a solution for such a long time!

Thank you!

[neil_ca]

Very helpful! Thanks a lot!

[Shivam97]

This is the Slider Code.. Please help me out too. I need a clickable banner instead of a button clicking. 

{%- assign sset = section.settings -%}

{%- assign header_font = sset.header_font -%}

{%- assign paragraph_font = sset.paragraph_font -%}

<div class="slider-area{% if settings.header_style == 'transparent_header'  %} trans_header_area{% endif %}" style="background:{{ sset.sec_bg_color }};padding-top:{{ sset.p_top }}px;padding-bottom:{{ sset.p_btm }}px;">

  <div class="d-none d-xl-none d-xl-block d-lg-block slider-active{% if sset.show_controlnav %} owl-dot-style{% endif %} owl-carousel">

    {%- if sset.slider_wide == 'full' -%}

        {%- for block in section.blocks -%}{%- assign bset = block.settings -%}

        {%- include 'slider-snippet' -%}

        {%- endfor -%}

    {%- else -%}

        {%- for block in section.blocks -%}{%- assign bset = block.settings -%}

        {%- include 'slider-snippet-box' -%}

        {%- endfor -%}

    {%- endif -%}

  </div>

    <div class="d-none d-md-block d-lg-none slider-active{% if sset.show_controlnav %} owl-dot-style{% endif %} owl-carousel">

    {%- if sset.slider_wide == 'full' -%}

        {%- for block in section.blocks -%}{%- assign bset = block.settings -%}

        {%- include 'slider-snippet-tablet' -%}

        {%- endfor -%}

    {%- else -%}

        {%- for block in section.blocks -%}{%- assign bset = block.settings -%}

        {%- include 'slider-snippet-box' -%}

        {%- endfor -%}

    {%- endif -%}

  </div>

    <div class="d-block d-sm-none slider-active{% if sset.show_controlnav %} owl-dot-style{% endif %} owl-carousel">

    {%- if sset.slider_wide == 'full' -%}

        {%- for block in section.blocks -%}{%- assign bset = block.settings -%}

        {%- include 'slider-snippet-mobile' -%}

        {%- endfor -%}

    {%- else -%}

        {%- for block in section.blocks -%}{%- assign bset = block.settings -%}

        {%- include 'slider-snippet-box' -%}

        {%- endfor -%}

    {%- endif -%}

  </div>

</div>

{%- style -%}

  {%- if sset.use_teko_font -%}

  .slider-content h2, .slider-content h3, .slider-content h5, .slider-content p {

    font-family: 'Teko', sans-serif;

  }

  {%- else -%}

  {{ header_font | font_face }}

  {{ paragraph_font | font_face }}  

  .slider-content h2, .slider-content h3, .slider-content h5, .slider-content p {

    font-family: {{ header_font.family }}, {{ header_font.fallback_families }};

    font-weight: {{ header_font.weight }};

    font-style: {{ header_font.style }};

  }

  {%- endif -%}

  .slider-btn a {

    background-color: {{ sset.btn_bg_color }};

    color: {{ sset.btn_color }};

    border: 2px solid {{ sset.btn_border_color }};

    border-radius: {{ sset.btn_border_radius }}px;

    text-transform: unset;

    font-family: {{ paragraph_font.family }}, {{ header_font.fallback_families }};

    font-weight: {{ paragraph_font.weight }};

    font-style: {{ paragraph_font.style }};

  }

  .slider-btn a:hover {

    background-color: {{ sset.btn_hover_bg_color }};

    color: {{ sset.btn_hover_color }};

    border: 2px solid {{ sset.btn_hover_border_color }};

  }

  .slider-active.owl-dot-style .owl-dot {

    background: {{ sset.controlnav_color }} none repeat scroll 0 0;

  }

  .slider-active.owl-dot-style .owl-dot.active {

    background: {{ sset.active_controlnav_color }} none repeat scroll 0 0;

  }

  .slider-content span {

    color: {{ sset.slider_span_color }};

  }

  .owl-item.active .slider-animated-1 h2 {

    line-height: {{ sset.title_2_lineheight }}px;

  }

{%- endstyle -%}

<script>

  $('.slider-active').owlCarousel({

    loop: true,

    nav: false,

    autoplay: {% if sset.enable_autoplay %}true{% else %}false{% endif %},

    autoplayTimeout: 7000,

    animateOut: 'fadeOut',

    animateIn: 'fadeIn',

    item: 1,

    responsive: {

      0: {

        items: 1

      },

      768: {

        items: 1

      },

      1000: {

        items: 1

      }

    }

  });

  var bgImg = new Image();

  bgImg.src=$('.slider-item').css('background-image').replace(/"/g,"").replace(/url\(|\)$/ig, "");

  bgImg.onload = function() {

    $('.slider-item').css({'height':this.height});

  }

</script>

{% schema %}

  {

    "name": "Slider",

    "settings": [

        {

          "type": "checkbox",

          "id": "enable_autoplay",

          "label": "Enable Slider Autoplay",

          "default": false

        },

        {

          "type": "checkbox",

          "id": "use_teko_font",

          "label": "Use Teko Font",

          "default": false

        },

        {

          "type": "font_picker",

          "id": "header_font",

          "label": "Title Font Family",

          "default": "rubik_n5",

          "info": "It will not work incase of 'Teko Font'"

        },

        {

          "type": "header",

          "content": "Font Size"

        },

        {

          "type": "paragraph",

          "content": "Don't add 'px' unit. Just put number."

        },

        {

          "type": "text",

          "id": "title1_font_size",

          "label": "Title 1",

          "default": "18"

        },

        {

          "type": "text",

          "id": "title2_font_size",

          "label": "Title 2",

          "default": "48"

        },

        {

          "type": "range",

          "id": "title_2_lineheight",

          "label": "Title 2 Line Height",

          "max": 100,

          "min": 0,

          "step": 1,

          "default": 50,

  "unit": "px"

        },

        {

          "type": "text",

          "id": "description_font_size",

          "label": "Description",

          "default": "18"

        },

        {

          "type": "text",

          "id": "title3_font_size",

          "label": "Title 3",

          "default": "48"

        },

        {

          "type": "header",

          "content": "Color"

        },

        {

          "type": "color",

          "id": "title1_color",

          "label": "Title 1",

          "default": "#fff"

        },

        {

          "type": "color",

          "id": "title2_color",

          "label": "Title 2",

          "default": "#fff"

        },

        {

          "type": "color",

          "id": "description_color",

          "label": "Description",

          "default": "#fff"

        },

        {

          "type": "color",

          "id": "title3_color",

          "label": "Title 3",

          "default": "#fff"

        },

        {

          "type": "color",

          "id": "slider_span_color",

          "label": "Span Text",

          "default": "#242424"

        },

        {

          "type": "header",

          "content": "Button"

        },

        {

          "type": "range",

          "id": "btn_border_radius",

          "label": "Border Radius",

          "max": 30,

          "min": 0,

          "step": 5,

          "default": 5,

  "unit": "px"

        }, 

        {

          "type": "font_picker",

          "id": "paragraph_font",

          "label": "Select Font",

          "default": "rubik_n5"

        },

        {

          "type": "text",

          "id": "btn_font_size",

          "label": "Font Size",

          "default": "14",

          "info": "Don't add 'px' unit. Just put number."

        }, 

        {

          "type": "color",

          "id": "btn_color",

          "label": "Text Color",

          "default": "#fff"

        },

        {

          "type": "color",

          "id": "btn_bg_color",

          "label": "BG Color",

          "default": "#000"

        },

        {

          "type": "color",

          "id": "btn_border_color",

          "label": "Border Color",

          "default": "#fff"

        },

        {

          "type": "color",

          "id": "btn_hover_color",

          "label": "Hover Text Color",

          "default": "#fff"

        },

        {

          "type": "color",

          "id": "btn_hover_bg_color",

          "label": "Hover BG Color",

          "default": "#0363cd"

        },

        {

          "type": "color",

          "id": "btn_hover_border_color",

          "label": "Hover Border Color",

          "default": "#0363cd"

        },

        {

          "type": "header",

          "content": "Control Nav"

        },

        {

          "type": "checkbox",

          "id": "show_controlnav",

          "label": "Show Control Nav",

          "default": true

        },

        {

          "type": "color",

          "id": "controlnav_color",

          "label": "Color",

          "default": "#4b4f53"

        },

        {

          "type": "color",

          "id": "active_controlnav_color",

          "label": "Active Color",

          "default": "#fff"

        },

        {

          "type": "header",

          "content": "Section Settings"

        },

        {

          "type": "color",

          "id": "sec_bg_color",

          "label": "Section BG Color",

          "default": "#fff"

        },

        {

          "type": "radio",

          "id": "slider_wide",

          "label": "Slider Style",

          "options": [

              {"label": "Full Wide", "value": "full"},

              {"label": "Box", "value": "box"}

          ],

          "default": "full"

        },

{

"type": "range",

"id": "p_top",

"label": "Padding Top",

"max": 150,

"min": 0,

"step": 5,

"default": 0,

"unit": "px"

},

{

"type": "range",

"id": "p_btm",

"label": "Padding Bottom",

"max": 150,

"min": 0,

"step": 5,

"default": 0,

"unit": "px"

}

],

    "blocks": [

{

"type": "slide",

"name": "Slide",

"settings": [

{

"type": "image_picker",

"id": "bg_img_desktop",

"label": "BG Image (Desktop)",

"info": "Image Size: 1920x530px"

},

{

"type": "image_picker",

"id": "bg_img_tablet",

"label": "BG Image (Tablet)",

"info": "Image Size: 768x530px"

},

{

"type": "image_picker",

"id": "bg_img_mobile",

"label": "BG Image (Mobile)",

"info": "Image Size: 480x530px"

},

{

"type": "header",

"content": "Info"

},

{

"type": "paragraph",

"content": "1. Use '<br>' tag for line break."

},

{

"type": "paragraph",

"content": "2. HTML code available"

},

{

"type": "header",

"content": "Title"

},

{

"type": "textarea",

"id": "title1",

"label": "Title 1",

"default": "Exclusive Offer -20% Off This Week"

},

{

"type": "textarea",

"id": "title2",

"label": "Title 2",

"default": "Smarter Wifi Thermostat <br>With Room Sensors"

},

{

"type": "textarea",

"id": "description",

"label": "Description",

"default": "More textured than a typical cotton tee, this midweight cotton slub crew is<br>woven with slightly uneven yarns for a uniquely non uniform look."

},

{

"type": "textarea",

"id": "title3",

"label": "Title 3",

"default": "<span>Starting at </span> $199.00",

"info": "e.g. <span>Starting at </span> $199.00"

},

{

"type": "paragraph",

"content": "Use '<span>Your text...</span>' to get small text"

},

{

"type": "text",

"id": "btn",

"label": "Button",

"default": "SHOPPING NOW"

},

{

"type": "url",

"id": "btn_url",

"label": "Button URL",

"default": "\/collections\/all"

},

{

"type": "header",

"content": "Content Position & Alignment"

},

{

"type": "radio",

"id": "c_position",

"label": "Position",

"options": [

{"label": "Left", "value": "left"},

{"label": "Center", "value": "center"},

{"label": "Right", "value": "right"}

],

"default": "left"

},

{

"type": "radio",

"id": "c_align",

"label": "Alignment",

"options": [

{"label": "Left", "value": "left"},

{"label": "Center", "value": "center"},

{"label": "Right", "value": "right"}

],

"default": "left"

},

                {

                    "type": "range",

                    "id": "slcn_mrleft",

                    "label": "Content Margin Left",

                    "max": 150,

                    "min": 0,

                    "step": 5,

                    "unit": "px",

                    "default": 0

                },

                {

                    "type": "range",

                    "id": "slcn_mrright",

                    "label": "Content Margin Right",

                    "max": 150,

                    "min": 0,

                    "step": 5,

                    "unit": "px",

                    "default": 0

                }

]

}

],

"presets":[

{

"name": "Slider",

"category": "1. Slider",

"blocks":[

{"type": "slide"},

{"type": "slide"}

]

}

]

  }

{% endschema %}

{% stylesheet %}

{% endstylesheet %}

{% javascript %}

{% endjavascript %}

[pammy543]

Thank you! This worked. 

[BreannShelby]

Hi there, I am also wanting to do the same but do not see “hero.liquid” in my code. I see image banner liquid, could this possibly be the same? My website is pureskinbeautyco.com. Thank you, I look forward to your reply! 

[CN27]

You're Amazing! Thank you.

[bashir555]

how do i add a link to my pre-made banner image without having to add this button that blurs the image? i used your code but it didn't link anyting 

[Sugarcoated]

Hey Bashir! I'd be happy to help but keep in mind I'm a novice here and mostly tweaking my code like everyone else is. 

Can you please link your website and can you take a screenshot of the same code that I showed above? 

Once you have a working hyperlink in the code you will no longer need the button displayed and can remove it using Shopify's normal, user-friendly way: customize > erasing all text in "button label" > save.

I hope this information preemptively helps, but I'm here if you need more ^_^

Thanks!

~Jo

[bashir555]

hey, 

so i actually found this code to use im hero.liquid. This added an 'image link' section on the 'image with text overlay'. However, the banner still isn't linked on the live site. This is no longer your code so i understand if your not interested in helping anymore!

bestcannabis.cc

{%- if section.settings.hero_layout == 'full_width' and section.settings.hero_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 -%}

  {%- style -%}

    .hero-{{ section.id }} {

      height: {{- wrapper_height -}}vw !important;

    }

  {%- endstyle -%}

{%- endif -%}

<div data-section-id="{{ section.id }}" data-section-type="hero-section">

  {%- if section.settings.hero_layout == 'fixed_width' -%}

    <div class="page-width">

  {%- endif -%}

  {%- if section.settings.hero_layout == 'fixed_width' and section.settings.hero_size ==  'adapt' -%}

    {%- assign slide_width = 1090 -%}

    {%- assign min_aspect_ratio = section.settings.image.aspect_ratio | default: 2.0 -%}

    <div class="hero-fixed-width hero--adapt"

         id="Hero-{{ section.id }}"

         data-layout="{{ section.settings.hero_layout }}"

         data-image-loading-animation>

      {%- assign img_url = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

      {%- if section.settings.image.width < max_width -%}

        {%- assign slide_width = section.settings.image.width -%}

      {%- endif -%}

      <div class="hero-fixed-width__content">

        <div class="page-width text-center">

          {%- if section.settings.title != blank -%}

            <h2 class="h1 mega-title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">{{ section.settings.title | escape }}</h2>

          {%- endif -%}

          {%- if section.settings.text != blank -%}

            <div class="rte-setting mega-subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">{{ section.settings.text }}</div>

          {%- endif -%}

          {%- if section.settings.button_label != blank and section.settings.button_link != blank -%}

            <a href="{{ section.settings.button_link }}" class="btn hero__btn">

              {{ section.settings.button_label | escape }}

            </a>

          {%- endif -%}

        </div>

      </div>

      {%- if section.settings.image != blank -%}

      <a href="{{ section.settings.img_link }}">

        <img class="hero-fixed-width__image 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"

             style="{%- if slide_width <= max_width -%}

                      {%- assign min_width = slide_width | times: 100 | divided_by: max_width -%}

                      min-width: {{ min_width }}%;

                    {%- endif -%}

                    object-position: {{ section.settings.alignment }};"

             alt="{{ section.settings.image.alt | escape }}">

      </a>

      {%- else -%}

        <span>

          {% capture current %}{% cycle 1, 2 %}{% endcapture %}

          {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}

        </span>

      {%- endif -%}

      <noscript>

        <div class="hero-fixed-width__image"{% if section.settings.image %}{% unless section.settings.image.alt == blank %} role="img" aria-label="{{ section.settings.image.alt | escape }}"{% endunless %} style="background-image: url('{{ section.settings.image | img_url: '2048x' }}'); background-position: center {{ section.settings.alignment }};"{% endif %}></div>

      </noscript>

    </div>

  {%- else -%}

    <div class="hero hero--{{ section.settings.hero_size }} hero-{{ section.id }}{% if section.settings.title != blank or section.settings.text != blank or section.settings.button_label != blank %} hero__overlay{% endif %} box ratio-container lazyload js"

         id="Hero-{{ section.id }}"

         data-layout="{{ section.settings.hero_layout }}"

         {%- if section.settings.image -%}

          {% unless section.settings.image.alt == blank %}

          role="img"

          aria-label="{{ section.settings.image.alt | escape }}"

          data-alt="{{ section.settings.image.alt | escape }}"

          {% endunless %}

         data-bg="{{ section.settings.image | img_url: '300x300' }}"

         data-bgset="{% include 'bgset', image: section.settings.image %}"

         data-sizes="auto"

         data-parent-fit="cover"

         style="background-position: {{ section.settings.alignment }};"

         data-image-loading-animation

         {%- endif -%}>

    {%- if section.settings.image == blank -%}

      <div class="placeholder-background">

        {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}

      </div>

    {%- endif -%}

      <div class="hero__inner">

        <div class="page-width text-center">

          {%- if section.settings.title != blank -%}

            <h2 class="h1 mega-title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">{{ section.settings.title | escape }}</h2>

          {%- endif -%}

          {%- if section.settings.text != blank -%}

            <div class="rte-setting mega-subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">{{ section.settings.text }}</div>

          {%- endif -%}

          {%- if section.settings.button_label != blank and section.settings.button_link != blank -%}

            {%- capture ariaLabel -%}

              {{- section.settings.button_label -}}

              {%- if section.settings.button_link.type == 'frontpage_link' -%}

                : {{ 'homepage.general.title' | t -}}

              {%- elsif section.settings.button_link.type == 'catalog_link' -%}

                : {{ 'collections.catalog.title' | t -}}

              {%- elsif section.settings.button_link.object.title -%}

                : {{ section.settings.button_link.object.title -}}

              {%- endif -%}

            {%- endcapture -%}

            <a href="{{ section.settings.button_link }}"

              class="btn hero__btn"

              aria-label="{{ ariaLabel }}">

              {{- section.settings.button_label | escape -}}

            </a>

          {%- endif -%}

        </div>

      </div>

    </div>

    <noscript>

      <div class="hero hero--{{ section.settings.hero_size }}{% if section.settings.title != blank or section.settings.text != blank or section.settings.button_label != blank %} hero__overlay{% endif %}"{% if section.settings.image %}{% unless section.settings.image.alt == blank %} role="img" aria-label="{{ section.settings.image.alt | escape }}"{% endunless %} style="background-image: url('{{ section.settings.image | img_url: '2048x' }}'); background-position: center {{ section.settings.alignment }};"{% endif %}></div>

    </noscript>

  {%- endif -%}

  {%- if section.settings.hero_layout == 'fixed_width' -%}

    </div>

  {%- endif -%}

</div>

<style>

  #shopify-section-hero-1 .hero-fixed-width::before {display: none;}

</style>

{% schema %}

{

  "name": {

    "cs": "Obrázek s textovým překryvem",

    "da": "Billede med tekstoverlejring",

    "de": "Foto mit überlegtem Text",

    "en": "Image with text overlay",

    "es": "Imagen con texto superpuesto",

    "fi": "Kuva päällä olevalla tekstillä",

    "fr": "Image avec calque texte",

    "it": "Immagine con testo",

    "ja": "テキストオーバーレイ付き画像",

    "ko": "텍스트 오버레이 포함 이미지",

    "nb": "Bilde med tekstoverlegg",

    "nl": "Foto met tekstoverlay",

    "pl": "Obraz z nakładką tekstową",

    "pt-BR": "Imagem com texto",

    "pt-PT": "Imagem com sobreposição de texto",

    "sv": "Bild med textöverlagring",

    "th": "การวางซ้อนรูปภาพพร้อมข้อความ",

    "tr": "Metin katmanı içeren görsel",

    "vi": "Hình ảnh có lớp phủ văn bản",

    "zh-CN": "带文本叠加的图片",

    "zh-TW": "附文字疊加層的圖片"

  },

  "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": "url",

      "id": "img_link",

      "label": "Image Link"

    },

    {

      "type": "select",

      "id": "alignment",

      "label": {

        "cs": "Zarovnání obrázku",

        "da": "Justering af billede",

        "de": "Fotoausrichtung",

        "en": "Image alignment",

        "es": "Alineación de imagen",

        "fi": "Kuvan tasaus",

        "fr": "Alignement de l'image",

        "it": "Allineamento immagine",

        "ja": "画像アラインメント",

        "ko": "이미지 정렬",

        "nb": "Bildejustering",

        "nl": "Afbeelding uitlijnen",

        "pl": "Wyrównanie obrazu",

        "pt-BR": "Alinhamento da imagem",

        "pt-PT": "Alinhamento da imagem",

        "sv": "Bildjustering",

        "th": "การจัดวางรูปภาพ",

        "tr": "Görsel hizalaması",

        "vi": "Căn chỉnh hình ảnh",

        "zh-CN": "图片对齐方式",

        "zh-TW": "圖片對齊"

      },

      "default": "center",

      "options": [

        {

          "value": "top",

          "label": {

            "cs": "Nahoru",

            "da": "Top",

            "de": "Oben",

            "en": "Top",

            "es": "Superior",

            "fi": "Ylös",

            "fr": "Haut",

            "it": "In alto",

            "ja": "上",

            "ko": "위쪽",

            "nb": "Topp",

            "nl": "Boven",

            "pl": "Do góry",

            "pt-BR": "Acima",

            "pt-PT": "Acima",

            "sv": "Högst upp",

            "th": "ด้านบน",

            "tr": "Üst",

            "vi": "Bên trên",

            "zh-CN": "顶部",

            "zh-TW": "頂部"

          }

        },

        {

          "value": "center",

          "label": {

            "cs": "Na střed",

            "da": "I midten",

            "de": "Mitte",

            "en": "Middle",

            "es": "Centrada",

            "fi": "Keskelle",

            "fr": "Milieu",

            "it": "Al centro",

            "ja": "中央",

            "ko": "중간",

            "nb": "Midten",

            "nl": "Midden",

            "pl": "Do środka",

            "pt-BR": "Meio",

            "pt-PT": "Meio",

            "sv": "Mitten",

            "th": "ตรงกลาง",

            "tr": "Orta",

            "vi": "Ở giữa",

            "zh-CN": "中间",

            "zh-TW": "中央"

          }

        },

        {

          "value": "bottom",

          "label": {

            "cs": "Dolů",

            "da": "Bund",

            "de": "Unten",

            "en": "Bottom",

            "es": "Inferior",

            "fi": "Alas",

            "fr": "Bas",

            "it": "In basso",

            "ja": "下",

            "ko": "아래쪽",

            "nb": "Bunn",

            "nl": "Onder",

            "pl": "Do dołu",

            "pt-BR": "Abaixo",

            "pt-PT": "Abaixo",

            "sv": "Längst ner",

            "th": "ด้านล่าง",

            "tr": "Alt",

            "vi": "Bên dưới",

            "zh-CN": "底部",

            "zh-TW": "底部"

          }

        }

      ]

    },

    {

      "type": "select",

      "id": "hero_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": "hero_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": "text_size",

      "label": {

        "cs": "Velikost textu",

        "da": "Tekststørrelse",

        "de": "Textgröße",

        "en": "Text size",

        "es": "Tamaño del texto",

        "fi": "Tekstin koko",

        "fr": "Taille du texte",

        "it": "Dimensione testo",

        "ja": "文字サイズ",

        "ko": "텍스트 사이즈",

        "nb": "Tekststørrelse",

        "nl": "Tekengrootte",

        "pl": "Rozmiar czcionki",

        "pt-BR": "Tamanho do texto",

        "pt-PT": "Tamanho do texto",

        "sv": "Textstorlek",

        "th": "ขนาดตัวอักษร",

        "tr": "Metin boyutu",

        "vi": "Cỡ văn bản",

        "zh-CN": "文本大小",

        "zh-TW": "文字尺寸"

      },

      "default": "medium",

      "options": [

        {

          "label": {

            "cs": "Střední",

            "da": "Medium",

            "de": "Mitte",

            "en": "Medium",

            "es": "Mediano",

            "fi": "Keskisuuri",

            "fr": "Moyenne",

            "it": "Medium",

            "ja": "中",

            "ko": "보통",

            "nb": "Middels",

            "nl": "Gemiddeld",

            "pl": "Średnia",

            "pt-BR": "Médio",

            "pt-PT": "Intermé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"

        }

      ]

    },

    {

      "type": "text",

      "id": "title",

      "label": {

        "cs": "Nadpis",

        "da": "Overskrift",

        "de": "Titel",

        "en": "Heading",

        "es": "Título",

        "fi": "Otsake",

        "fr": "En-tête",

        "it": "Heading",

        "ja": "見出し",

        "ko": "제목",

        "nb": "Overskrift",

        "nl": "Kop",

        "pl": "Nagłówek",

        "pt-BR": "Título",

        "pt-PT": "Título",

        "sv": "Rubrik",

        "th": "ส่วนหัว",

        "tr": "Başlık",

        "vi": "Tiêu đề",

        "zh-CN": "标题",

        "zh-TW": "標題"

      },

      "default": {

        "cs": "Obrázek s textovým překryvem",

        "da": "Billede med tekstoverlejring",

        "de": "Foto mit überlegtem Text",

        "en": "Image with text overlay",

        "es": "Imagen con texto superpuesto",

        "fi": "Kuva päällä olevalla tekstillä",

        "fr": "Image avec calque texte",

        "it": "Immagine con testo",

        "ja": "テキストオーバーレイ付き画像",

        "ko": "텍스트 오버레이 포함 이미지",

        "nb": "Bilde med tekstoverlegg",

        "nl": "Foto met tekstoverlay",

        "pl": "Obraz z nakładką tekstową",

        "pt-BR": "Imagem com sobreposição de texto",

        "pt-PT": "Imagem com sobreposição de texto",

        "sv": "Bild med textöverlagring",

        "th": "การวางซ้อนรูปภาพพร้อมข้อความ",

        "tr": "Metin katmanı içeren görsel",

        "vi": "Hình ảnh có lớp phủ văn bản",

        "zh-CN": "带文本叠加的图片",

        "zh-TW": "附文字疊加層的圖片"

      }

    },

    {

      "type": "richtext",

      "id": "text",

      "label": {

        "cs": "Text",

        "da": "Tekst",

        "de": "Text",

        "en": "Text",

        "es": "Texto",

        "fi": "Teksti",

        "fr": "Texte",

        "it": "Testo",

        "ja": "テキスト",

        "ko": "텍스트",

        "nb": "Tekst",

        "nl": "Tekst",

        "pl": "Tekst",

        "pt-BR": "Texto",

        "pt-PT": "Texto",

        "sv": "Text",

        "th": "ข้อความ",

        "tr": "Metin",

        "vi": "Văn bản",

        "zh-CN": "文本",

        "zh-TW": "文字"

      },

      "default": {

        "cs": "<p>Prostřednictvím textového překryvu můžete zákazníkům prezentovat svoji značku. Vyberte obrázky, design a text, který reflektuje váš styl i firmu.</p>",

        "da": "<p>Brug tekstoverlejring til at give dine kunder indblik i dit brand. Vælg billeder og tekst, der passer til din stil og historie.</p>",

        "de": "<p>Nutzen Sie überlegten Text, um Kunden über Ihre Marke zu informieren. Wählen Sie Fotos und Text aus, die zu Ihrer Marke passen.</p>",

        "en": "<p>Use overlay text to give your customers insight into your brand. Select imagery and text that relates to your style and story.</p>",

        "es": "<p>Usa el texto superpuesto para darles información útil a tus clientes sobre tu marca. Selecciona imágenes y textos que se relacionen con tu estilo e historia.</p>",

        "fi": "<p>Käytä taustan päällä olevaa tekstiä, jotta asiakkaat voivat tutustua tuotemerkkisi. Valitse tyylisi ja tarinasi liittyvät kuvat ja teksti.</p>",

        "fr": "<p>Utilisez la superposition de texte pour donner un aperçu de votre marque à vos clients. Utilisez une image et du texte qui se rapportent au style et à l'histoire de votre marque.</p>",

        "it": "<p>Utilizza il testo in sovrapposizione per dare ai clienti informazioni sul tuo brand. Seleziona immagini e testo legati al tuo stile e alla tua storia.</p>",

        "ja": "<p>オーバーレイテキストを使用して、お客様があなたのブランドについてよく理解できるようにします。あなたのスタイルやストーリーに関連する画像やテキストを選択してください。</p>",

        "ko": "<p>오버레이 텍스트를 사용하여 고객에게 브랜드에 대한 통찰력을 부여하십시오. 자신의 스타일과 이야기와 관련된 이미지와 텍스트를 선택하십시오.</p>",

        "nb": "<p>Bruk overleggstekst til å gi kundene dine innsikt i merkevaren din. Velg bildebruk og tekst som er relatert til din stil og historie.</p>",

        "nl": "<p>Gebruik overlay-tekst om je klanten inzicht te geven in je merk. Selecteer afbeeldingen en tekst die betrekking hebben op je stijl en verhaal.</p>",

        "pl": "<p>Użyj tekstu nakładki, aby dać swoim klientom wgląd w Twoją markę. Wybierz obrazy i teksty, które odnoszą się do Twojego stylu i historii.</p>",

        "pt-BR": "<p>Use o texto de sobreposição para apresentar insights sobre sua marca aos clientes. Selecione imagens e textos que reflitam seu estilo e sua história.</p>",

        "pt-PT": "<p>Utilize o texto de sobreposição para fornecer informações sobre a sua marca aos clientes. Selecione imagens e textos que reflitam o seu estilo e a sua história.</p>",

        "sv": "<p>Använd överläggningstext för att ge dina kunder inblick i ditt varumärke. Välj bildspråk och text som gäller din stil och historia.</p>",

        "th": "<p>ใช้ข้อความซ้อนทับเพื่อให้ลูกค้าของคุณทราบถึงรายละเอียดเกี่ยวกับแบรนด์ เลือกรูปภาพและข้อความที่มีความเกี่ยวข้องกับสไตล์กับเรื่องราวของคุณ</p>",

        "tr": "<p>Yer paylaşımlı metin kullanarak müşterilerinizin kafasında mağazanız hakkında fikir oluşmasını sağlayın. Stilinize ve öykünüze uyan görseller ve metinler seçin.</p>",

        "vi": "<p>Sử dụng lớp phủ văn bản để đưa thông tin chi tiết khách hàng vào thương hiệu của bạn. Chọn hình ảnh và văn bản phù hợp với phong cách và câu chuyện của bạn.</p>",

        "zh-CN": "<p>使用叠加文本让客户深入了解您的品牌。选择与您的风格和故事相关的图片和文本。</p>",

        "zh-TW": "<p>運用文字疊加層讓顧客更加瞭解您的品牌。選擇與您風格和品牌故事相關的圖像和文字。</p>"

      }

    },

    {

      "type": "text",

      "id": "button_label",

      "label": {

        "cs": "Text tlačítka",

        "da": "Knaptekst",

        "de": "Button-Etikett",

        "en": "Button label",

        "es": "Etiqueta de botón",

        "fi": "Tekstipainike",

        "fr": "Texte du bouton",

        "it": "Etichetta pulsante",

        "ja": "ボタンのラベル",

        "ko": "버튼 레이블",

        "nb": "Knappetikett",

        "nl": "Knoplabel",

        "pl": "Przycisk z etykietą",

        "pt-BR": "Etiqueta de botão",

        "pt-PT": "Etiqueta do botão",

        "sv": "Knappetikett",

        "th": "ป้ายกำกับปุ่ม",

        "tr": "Düğme etiketi",

        "vi": "Nhãn nút",

        "zh-CN": "按钮标签",

        "zh-TW": "按鈕標籤"

      }

    },

    {

      "type": "url",

      "id": "button_link",

      "label": {

        "cs": "Tlačítkový odkaz",

        "da": "Knaplink",

        "de": "Button-Etikett",

        "en": "Button 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": {

        "cs": "Obrázek s textovým překryvem",

        "da": "Billede med tekstoverlejring",

        "de": "Foto mit überlegtem Text",

        "en": "Image with text overlay",

        "es": "Imagen con texto superpuesto",

        "fi": "Kuva päällä olevalla tekstillä",

        "fr": "Image avec calque texte",

        "it": "Immagine con testo",

        "ja": "テキストオーバーレイ付き画像",

        "ko": "텍스트 오버레이 포함 이미지",

        "nb": "Bilde med tekstoverlegg",

        "nl": "Foto met tekstoverlay",

        "pl": "Obraz z nakładką tekstową",

        "pt-BR": "Imagem com sobreposição de texto",

        "pt-PT": "Imagem com sobreposição de texto",

        "sv": "Bild med textöverlagring",

        "th": "การวางซ้อนรูปภาพพร้อมข้อความ",

        "tr": "Metin katmanı içeren görsel",

        "vi": "Hình ảnh có lớp phủ văn bản",

        "zh-CN": "带文本叠加的图片",

        "zh-TW": "附文字疊加層的圖片"

      },

      "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 %}

[Sugarcoated]

Hello! This solution wasn't working for me so I wanted to offer one that I had found elsewhere. I had to tweak it a bit to work with me since it was a bit outdated. I'm a novice coder so take it for what it's worth... but it works. 

Open the slideshow.liquid SECTION and find the class "slideshow__image". There's three of them and I found the hyperlink started working on the second code insertion... but I placed all three and kept all three. 

I added an image for help in placement but the code you want to use is the opening and closing hyperlink tags.

Good luck!

<a data-slide-id="{{ forloop.index }}" href="{{ block.settings.button_link }}"> 
</a>