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

Solved
StretchSpine
Excursionist
16 0 4

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

BANNER.png

 

0 Likes
VishvasMishra
Shopify Partner
189 38 45

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

 

For Design, Development and custom changes Hire Me.
If your problem solved then Like & Accept this Solution.
Email ID: technicalvishvas@gmail.com
0 Likes
StretchSpine
Excursionist
16 0 4

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

0 Likes
VishvasMishra
Shopify Partner
189 38 45

This is an 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 

For Design, Development and custom changes Hire Me.
If your problem solved then Like & Accept this Solution.
Email ID: technicalvishvas@gmail.com
StretchSpine
Excursionist
16 0 4

@VishvasMishra 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-quo...

0 Likes
K-Porter
New Member
1 0 0

Great Work @VishvasMishra !

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

Thank you!

0 Likes
neil_ca
Tourist
3 0 1

Very helpful! Thanks a lot!

0 Likes
Shivam97
Excursionist
16 0 6

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 %}
0 Likes
CN27
New Member
2 0 0

You're Amazing! Thank you.

0 Likes