Clickable Banner

miraloclo
Tourist
8 0 1

Hi All

Im hoping someone can help please.

Im trying to make my banners on homepage clickable instead of having to add the button text below.

My site is in debut theme.

Thanks

0 Likes
Moira
Shopify Staff
Shopify Staff
75 15 15

Hey, @miraloclo!

This is Moira from the Social Care team at Shopify. It’s great to hear you are wanting to optimize your homepage! I understand you are wanting to make the banners clickable without having to add a button. I can certainly help you with this today.

Custom CSS is required to make this adjustment on your homepage. Coding is definitely an area that can be quite complicated if you have not had any previous experience but we are here to ensure you receive the right support and put you in touch with those who can help! Shopify has paid experts who will complete custom coding and in-depth customizations for your store for an agreed fee between you both, they are fantastic at helping you achieve what you're after.

  • Click here to find out more about hiring a Shopify Expert

Another merchant has asked a similar question right here and one of our Shopify Partners responded with the code needed to implement this change if you felt comfortable editing your theme code.

As you continue to develop and edit your store, I highly suggest taking advantage of the Shopify Developers website. This is a place where our developers post hundreds of step-by-step coding tutorials which is a great way to familiarise yourself with all the different customization possibilities within your theme!

What do you envision the clickable banner to do for your business? For example, were you wanting to connect the banner directly to a particular product or collection page? You can also design banners to have the “shop now” wording embedded in the design so customers are more likely to click on the image. Really, you have to think about “what am I trying to communicate?”, “how am I showing this product being used” or “what am I telling people?”. The format of the banners and making sure you do not run into issues with devices, display, and that your photography can work with whatever banner that you choose is super important. Here is a blog that walks you through some fantastic banner design ideas and best practices.

If you have any questions please feel free to thread those below.

Cheers!

Moira | Social Care @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
miraloclo
Tourist
8 0 1

Hi Moira

Thanks for the reply but the link for the post is for image with text obverlay. I need for text columns for images.

Is there a link for that just as I cant find one?

Thanks

Stephen

0 Likes

@miraloclo 

Hi 

I have the answer, I did it in a previous post.

https://community.shopify.com/c/Shopify-Design/Adding-Clickable-Header-Image-in-Debut-Theme/m-p/1192...

 

If you liked my answer, like it
If I solved your question, click Accept as a solution
JkoSadracDesigns.com | for custom solutions contact me
0 Likes
miraloclo
Tourist
8 0 1

Thanks 

Do you have a copy of the code please? just as that is a screenshot.

Also will this work for all? as it is not a header banner im trying to link?

Thanks

0 Likes

@miraloclo 

the code is to create links to the banners, without buttons, is the debut theme, follow the steps of each image and go do it easily.

If you liked my answer, like it
If I solved your question, click Accept as a solution
JkoSadracDesigns.com | for custom solutions contact me
0 Likes

@miraloclo 

make a copy first before placing the code.

theme debut - hero.liquid file

all the code in the file

 

 

{%- 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 -%}
      
        <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 }}">
      
      {%- else -%}
        <span>
          {% capture current %}{% cycle 1, 2 %}{% endcapture %}
          {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
        </span>
      {%- endif -%}
      
    </div>
  {%- else -%}
 
{% comment %}Jko open <a> validation link {% endcomment%}
      {%- if section.settings.image_link != blank -%}
  <a href="{{ section.settings.image_link }}">
    {% endif %}
    
    <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>
    
{% comment %} closing <a> JKo{% endcomment%}
{%- if section.settings.image_link != blank -%}
   </a>
{% endif %}
    
    <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": {
    "en": "Image with text overlay",
    "es": "Imagen con texto superpuesto"
  },
  "class": "index-section index-section--flush",
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": {
        "de": "Foto",
        "en": "Image"
      }
    },
{
      "type": "url",
      "id": "image_link",
      "label": {
        "en": "Image link",
        "es": "Enlace de Imagen"
      }
    },
    {
      "type": "select",
      "id": "alignment",
      "label": {
        "en": "Image alignment",
        "es": "Alineación de imagen"

      },
      "default": "center",
      "options": [
        {
          "value": "top",
          "label": {
            "cs": "Nahoru",
            "da": "Top",
            "de": "Oben",
            "en": "Top",
            "es": "Superior"
          }
        },
        {
          "value": "center",
          "label": {
            "cs": "Na střed",
            "da": "I midten",
            "de": "Mitte",
            "en": "Middle",
            "es": "Centrada"
          }
        },
        {
          "value": "bottom",
          "label": {
            "cs": "Dolů",
            "da": "Bund",
            "de": "Unten",
            "en": "Bottom",
            "es": "Inferior"
          }
        }
      ]
    },
    {
      "type": "select",
      "id": "hero_layout",
      "label": {
        "cs": "Rozvržení",
        "da": "Layout",
        "de": "Layout",
        "en": "Layout",
        "es": "Diseño"
      },
      "default": "full_width",
      "options": [
        {
          "label": {
            "cs": "Plná šířka",
            "da": "Fuld bredde",
            "de": "Volle Breite",
            "en": "Full width",
            "es": "Ancho completo"
          },
          "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",
            "hi": "निश्चित चौड़ाई",
            "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",
        "hi": "सेक्शन की ऊंचाई",
        "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",
            "hi": "इमेज के अनुकूल बनाएं",
            "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",
            "hi": "अतिरिक्त छोटा",
            "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",
            "hi": "छोटा",
            "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",
            "hi": "मध्यम",
            "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",
            "hi": "बड़ा",
            "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",
            "hi": "अतिरिक्त बड़ा",
            "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",
        "hi": "टेक्स्ट आकार",
        "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",
            "hi": "मध्यम",
            "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",
            "hi": "बड़ा",
            "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",
        "hi": "शीर्षक",
        "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",
        "hi": "पाठ ओवरले के साथ इमेज",
        "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",
        "hi": "टेक्स्ट",
        "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>",
        "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>",
        "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",
        "hi": "बटन लेबल",
        "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"
      }
    }
  ],
  "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",
        "hi": "पाठ ओवरले के साथ इमेज",
        "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",
        "hi": "इमेज",
        "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 %}

 

 

 

If you liked my answer, like it
If I solved your question, click Accept as a solution
JkoSadracDesigns.com | for custom solutions contact me
0 Likes
miraloclo
Tourist
8 0 1

@Jkolinovich thanks, however this doesnt work, when you follow the steps for each image what do you mean?

Thanks

0 Likes

the post I made earlier. are the steps in images with the codes.

 

https://community.shopify.com/c/Shopify-Design/Adding-Clickable-Header-Image-in-Debut-Theme/m-p/1192...

 

If you liked my answer, like it
If I solved your question, click Accept as a solution
JkoSadracDesigns.com | for custom solutions contact me
0 Likes
miraloclo
Tourist
8 0 1

Hi, im still struggling to get this to work as dont quite understand.

Can you send the code so it can be copied please?

Also, where do I place the image link?

Thanks

0 Likes