How to make clickable image and heading - Debut theme

[nyebalac]

Hi! I want to make the picture and the heading instead of using button. It is a image with text section on Debut theme.

Website: https://hygienic-care.com

pass: yewbra

[KetanKumar · Accepted solution]

@nyebalac 

Thanks for post

can you please update this code 

1. Go to Online Store->Theme->Edit code
2. section->/feature-row.liquid->paste below code at the file.

<div class="page-width feature-row">
  {% capture image_layout %}
    <div class="feature-row__item">
       <a href="{{ section.settings.button_link }}" class="btn">
      {% if section.settings.image != blank %}
        {{ section.settings.image | img_url: '600x600' | img_tag: section.settings.image.alt, 'feature-row__image' }}
      {% else %}
        {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
      {% endif %}
      </a>
    </div>
  {% endcapture %}

  <div class="feature-row">
    {% if section.settings.layout == 'left' %}
      {{ image_layout }}
    {% endif %}

    <div class="feature-row__item feature-row__text feature-row__text--{{ section.settings.layout }}">
      {% if section.settings.title != blank %}
       <a href="{{ section.settings.button_link }}" class="btn">
        <h2 class="h3">{{ section.settings.title | escape }}</h2>
      </a>
      {% endif %}
      {% if section.settings.text != blank %}
        <div class="rte-setting featured-row__subtext">{{ 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">
          {{ section.settings.button_label | escape }}
        </a>
      {% endif %}
    </div>

    {% if section.settings.layout == 'right' %}
      {{ image_layout }}
    {% endif %}
  </div>
</div>

{% schema %}
  {
    "name": "Image with text",
    "class": "index-section",
    "settings": [
      {
        "type": "image_picker",
        "id": "image",
        "label": "Image"
      },
      {
        "type": "select",
        "id": "layout",
        "label": "Layout",
        "default": "left",
        "options": [
          {
            "value": "left",
            "label": "Image on left"
          },
          {
            "value": "right",
            "label": "Image on right"
          }
        ]
      },
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Image with text"
      },
      {
        "type": "richtext",
        "id": "text",
        "label": "Text",
        "default": "<p>Pair large text with an image to give focus to your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>"
      },
      {
        "type": "text",
        "id": "button_label",
        "label": "Button label"
      },
      {
        "type": "url",
        "id": "button_link",
        "label": "Button link"
      }
    ],
    "presets": [
      {
        "name": "Image with text",
        "category": "Image"
      }
    ]
  }
{% endschema %}

[KetanKumar · Accepted solution]

@nyebalac 

Thanks for post

can you please update this code 

1. Go to Online Store->Theme->Edit code
2. section->/feature-row.liquid->paste below code at the file.

<div class="page-width feature-row">
  {% capture image_layout %}
    <div class="feature-row__item">
       <a href="{{ section.settings.button_link }}" class="btn">
      {% if section.settings.image != blank %}
        {{ section.settings.image | img_url: '600x600' | img_tag: section.settings.image.alt, 'feature-row__image' }}
      {% else %}
        {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
      {% endif %}
      </a>
    </div>
  {% endcapture %}

  <div class="feature-row">
    {% if section.settings.layout == 'left' %}
      {{ image_layout }}
    {% endif %}

    <div class="feature-row__item feature-row__text feature-row__text--{{ section.settings.layout }}">
      {% if section.settings.title != blank %}
       <a href="{{ section.settings.button_link }}" class="btn">
        <h2 class="h3">{{ section.settings.title | escape }}</h2>
      </a>
      {% endif %}
      {% if section.settings.text != blank %}
        <div class="rte-setting featured-row__subtext">{{ 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">
          {{ section.settings.button_label | escape }}
        </a>
      {% endif %}
    </div>

    {% if section.settings.layout == 'right' %}
      {{ image_layout }}
    {% endif %}
  </div>
</div>

{% schema %}
  {
    "name": "Image with text",
    "class": "index-section",
    "settings": [
      {
        "type": "image_picker",
        "id": "image",
        "label": "Image"
      },
      {
        "type": "select",
        "id": "layout",
        "label": "Layout",
        "default": "left",
        "options": [
          {
            "value": "left",
            "label": "Image on left"
          },
          {
            "value": "right",
            "label": "Image on right"
          }
        ]
      },
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Image with text"
      },
      {
        "type": "richtext",
        "id": "text",
        "label": "Text",
        "default": "<p>Pair large text with an image to give focus to your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>"
      },
      {
        "type": "text",
        "id": "button_label",
        "label": "Button label"
      },
      {
        "type": "url",
        "id": "button_link",
        "label": "Button link"
      }
    ],
    "presets": [
      {
        "name": "Image with text",
        "category": "Image"
      }
    ]
  }
{% endschema %}

[nyebalac]

I get this error when I click save.

[KetanKumar]

replace all code not copy pate

[nyebalac]

Thank you so much, it works now! The only problem is that the hading is not alligned to the left, it is centered.

[KetanKumar · Accepted solution]

Add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

div#shopify-section-1589021072533 a.btn {
    text-align: left;
    padding: 0;
}

[Mimba]

This isn't working for me.

I've replaced all of the code with yours, however the button still appears... 

Am i doing something wrong?

[KetanKumar]

Hello, @Mimba 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

[Mimba]

Hey @KetanKumar 

https://mimba.co.uk/ is the URL, ideally id like to be able to link the sale banner if possible! 

Thanks!

[KetanKumar]

@Mimba 

Thanks for url.

sorry but i can see any button at home can you please give me store url?

[loveclubdesigns]

Hi! How do I do this but with just Image with text overlay on my header. I have this header but the setting i chose when creating it was "image with text overlay" not image with text. I want the whole image to be clickable-for example this website: https://frasiersterling.com/

but mine is like this: https://loveclubdesigns.com/ 

how can i do this? i tried doing the coding above but it looks like its only for image with text on side.

[KetanKumar]

@loveclubdesigns 

Thanks for post 

can you please share your this section code so i will update

[loveclubdesigns]

Hi thanks so much for replying! Which sections code do I need to copy and paste for you to see? Like what is the title of the section? 

[KetanKumar]

@loveclubdesigns 

image with text section 

[abhiseksood]

Hi Ketan,

I am trying to make all the pic on my site clickable so that it takes the consumer to the collection. I have tried a few things but nothing seems to work. Would you be able to help please? Thank you in advance!

[KetanKumar]

@abhiseksood 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[abhiseksood]

Hey Ketan,

Thank you for your response. The website is www.arascents.co.nz

Regards,

Abhi

[KetanKumar]

@abhiseksood 

please share code

[abhiseksood]

Pardon my ignorance, how do I do that

[KetanKumar]

@abhiseksood 

go to edit code and >>> section and send as per section code

[abhiseksood]

<div class="page-width feature-row">
{% capture image_layout %}
<div class="feature-row__item">
{% if section.settings.image != blank %}
{% capture img_id %}FeatureRowImage-{{ section.id }}{% endcapture %}
{% capture wrapper_id %}FeatureRowImageWrapper-{{ section.id }}{% endcapture %}
{%- assign img_url = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% include 'image-style', image: section.settings.image, height: 545, wrapper_id: wrapper_id, img_id: img_id %}
<div id="{{ wrapper_id }}" class="feature-row__image-wrapper js">
<div style="padding-top:{{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100}}%;" data-image-loading-animation>
<img id="{{ img_id }}"
class="feature-row__image lazyload"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ section.settings.image.aspect_ratio }}"
data-sizes="auto"
alt="{{ section.settings.image.alt | escape }}">
</div>
</div>

<noscript>
{{ section.settings.image | img_url: '600x600', scale: 2 | img_tag: section.settings.image.alt, 'feature-row__image' }}
</noscript>
{% else %}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
</div>
{% endcapture %}

<div class="feature-row">
{% if section.settings.layout == 'left' %}
{{ image_layout }}
{% endif %}

<div class="feature-row__item feature-row__text feature-row__text--{{ section.settings.layout }}">
{% if section.settings.title != blank %}
<h2 class="h3">{{ section.settings.title | escape }}</h2>
{% endif %}
{% if section.settings.text != blank %}
<div class="rte rte-setting featured-row__subtext">{{ 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"
aria-label="{{ ariaLabel }}">
{{- section.settings.button_label | escape -}}
</a>
{% endif %}
</div>

{% if section.settings.layout == 'right' %}
{{ image_layout }}
{% endif %}
</div>
</div>

{% schema %}
{
"name": {
"cs": "Obrázek s textem",
"da": "Billede med tekst",
"de": "Foto mit Text",
"en": "Image with text",
"es": "Imagen con texto",
"fi": "Kuva tekstillä",
"fr": "Image avec texte",
"it": "Immagine con testo",
"ja": "テキスト付き画像",
"ko": "텍스트 포함 이미지",
"nb": "Bilde med tekst",
"nl": "Afbeelding met tekst",
"pl": "Obraz z tekstem",
"pt-BR": "Imagem com texto",
"pt-PT": "Imagem com texto",
"sv": "Bild med text",
"th": "รูปภาพพร้อมข้อความ",
"tr": "Metin içeren görsel",
"vi": "Hình ảnh có chữ",
"zh-CN": "带文本图片",
"zh-TW": "附文字的圖片"
},
"class": "index-section",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": {
"cs": "Obrázek",
"da": "Billede",
"de": "Foto",
"en": "Image",
"es": "Imagen",
"fi": "Kuva",
"fr": "Image",
"it": "Immagine",
"ja": "画像",
"ko": "이미지",
"nb": "Bilde",
"nl": "Afbeelding",
"pl": "Obraz",
"pt-BR": "Imagem",
"pt-PT": "Imagem",
"sv": "Bild",
"th": "รูปภาพ",
"tr": "Görsel",
"vi": "Hình ảnh",
"zh-CN": "图片",
"zh-TW": "圖片"
}
},
{
"type": "select",
"id": "layout",
"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": "left",
"options": [
{
"value": "left",
"label": {
"cs": "Doleva",
"da": "Venstre",
"de": "Links",
"en": "Left",
"es": "Izquierda",
"fi": "Vasen",
"fr": "Gauche",
"it": "Sinistra",
"ja": "左",
"ko": "왼쪽",
"nb": "Venstre",
"nl": "Links",
"pl": "Do lewej",
"pt-BR": "Esquerda",
"pt-PT": "Esquerda",
"sv": "Vänster",
"th": "ด้านซ้าย",
"tr": "Sol",
"vi": "Bên trái",
"zh-CN": "左侧",
"zh-TW": "左方"
}
},
{
"value": "right",
"label": {
"cs": "Doprava",
"da": "Højre",
"de": "Rechts",
"en": "Right",
"es": "Derecha",
"fi": "Oikea",
"fr": "Droite",
"it": "Destra",
"ja": "右",
"ko": "오른쪽",
"nb": "Høyre",
"nl": "Rechts",
"pl": "Do prawej",
"pt-BR": "Direita",
"pt-PT": "Direita",
"sv": "Höger",
"th": "ด้านขวา",
"tr": "Sağ",
"vi": "Bên phải",
"zh-CN": "右侧",
"zh-TW": "右方"
}
}
]
},
{
"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 textem",
"da": "Billede med tekst",
"de": "Foto mit Text",
"en": "Image with text",
"es": "Imagen con texto",
"fi": "Kuva tekstillä",
"fr": "Image avec texte",
"it": "Immagine con testo",
"ja": "テキスト付き画像",
"ko": "텍스트 포함 이미지",
"nb": "Bilde med tekst",
"nl": "Afbeelding met tekst",
"pl": "Obraz z tekstem",
"pt-BR": "Imagem com texto",
"pt-PT": "Imagem com texto",
"sv": "Bild med text",
"th": "รูปภาพพร้อมข้อความ",
"tr": "Metin içeren görsel",
"vi": "Hình ảnh có chữ",
"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>Zkombinujte velký text a obrázek, abyste zaměřili pozornost návštěvníků na zvolený produkt, kolekci či příspěvek na blogu. Pak můžete připojit podrobnosti o dostupnosti a stylu, nebo dokonce recenzi.</p>",
"da": "<p>Kombiner stor tekst med et billede for at give dit valgte produkt, din valgte kollektion eller dit valgte blogopslag fokus. Tilføj oplysninger om tilgængelighed, stil og eventuelt også en anmeldelse.</p>",
"de": "<p>Kombinieren Sie große Schrift mit einem Foto, um einen Fokus auf Ihr ausgewähltes Produkt, die Kategorie oder einen Blogpost zu legen. Sie können dann Details zur Verfügbarkeit und dem Style oder sogar eine Bewertung hinzufügen.</p>",
"en": "<p>Pair large text with an image to give focus to your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
"es": "<p>Vincula un texto largo con una imagen para dar visibilidad a tu producto, colección o artículo de blog seleccionados. Agrega detalles sobre disponibilidad, estilo, o incluso ofrece una reseña.</p>",
"fi": "<p>Korosta valitsemaasi tuotetta, kokoelmaa tai blogijulkaisua lisäämällä kuvaan suuri teksti. Lisää saatavuustiedot, määritä tyyli tai näytä vaikkapa arvostelu.</p>",
"fr": "<p>Ajoutez une image à un long texte pour mettre l'accent sur un produit de votre choix, une collection, ou un article de blog. Ajoutez des détails sur la disponibilité, le style, ou mettez un commentaire client en avant.</p>",
"it": "<p>Associa un testo di grandi dimensioni a un'immagine per dare importanza al prodotto, alla collezione o all'articolo del blog di tua scelta. Aggiungi dettagli sulla disponibilità, sullo stile o fornisci una recensione.</p>",
"ja": "<p>あなたが選んだ商品、コレクション、またはブログ記事に注目を集めるため、大きなテキストと画像を組み合わせます。可用性、スタイル、またはレビュー提供についての詳細を追加します。</p>",
"ko": "<p>이미지와 큰 텍스트를 짝지어 선택한 제품, 컬렉션, 블로그 게시판을 강조합니다. 사용 가능성, 스타일에 대한 자세한 정보를 추가하거나 리뷰를 제공합니다.</p>",
"nb": "<p>Koble stor tekst med et bilde for å drive fokus mot det valgte produktet, samlingen eller blogginnlegget. Legg til detaljer om tilgjengelighet, stil eller vis frem en vurdering.</p>",
"nl": "<p>Plaats een afbeelding bij grote stukken tekst om de aandacht op je gekozen product, collectie of blogpost te richten. Voeg details over beschikbaarheid en stijl toe of plaats een productrecensie.</p>",
"pl": "<p>Połącz duży tekst z obrazem, aby skierować uwagę na wybrany produkt, kolekcję lub post na blogu. Dodaj szczegóły dotyczące dostępności, stylu lub nawet dołącz recenzję.</p>",
"pt-BR": "<p>Emparelhe textos grandes com uma imagem para destacar o produto, a coleção ou o post do blog escolhido. Adicione informações sobre disponibilidade, estilo ou até mesmo uma avaliação.</p>",
"pt-PT": "<p>Associe um texto grande a uma imagem para dar ênfase ao produto, coleção ou publicação no blogue que escolheu. Adicione detalhes sobre disponibilidade, estilo ou uma avaliação.</p>",
"sv": "<p>Para ihop stor text med en bild för att ge fokus åt din valda produkt, kollektion eller blogginlägg. Lägg till information om tillgänglighet, stil eller tillhandahåll till och med en recension.</p>",
"th": "<p>จับคู่ข้อความขนาดใหญ่กับรูปภาพเพื่อให้ความสำคัญกับสินค้า คอลเลกชัน หรือโพสต์บล็อกที่คุณเลือก เพิ่มรายละเอียดเกี่ยวกับความพร้อม สไตล์ หรือแม้กระทั่งเขียนรีวิว</p>",
"tr": "<p>Geniş metni bir görselle eşleyerek seçtiğiniz ürüne, koleksiyona veya blog gönderisine dikkat çekin. Stok durumu, stil hakkındaki ayrıntıları ekleyin, hatta inceleme sağlayın.</p>",
"vi": "<p>Ghép nối văn bản lớn với hình ảnh để làm nổi bật sản phẩm, bộ sưu tập hoặc bài viết blog đã chọn. Thêm chi tiết về tình trạng còn hàng, kiểu hoặc đưa ra đánh giá.</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-Link",
"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 textem",
"da": "Billede med tekst",
"de": "Foto mit Text",
"en": "Image with text",
"es": "Imagen con texto",
"fi": "Kuva tekstillä",
"fr": "Image avec texte",
"it": "Immagine con testo",
"ja": "テキスト付き画像",
"ko": "텍스트 포함 이미지",
"nb": "Bilde med tekst",
"nl": "Afbeelding met tekst",
"pl": "Obraz z tekstem",
"pt-BR": "Imagem com texto",
"pt-PT": "Imagem com texto",
"sv": "Bild med text",
"th": "รูปภาพพร้อมข้อความ",
"tr": "Metin içeren görsel",
"vi": "Hình ảnh có chữ",
"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 %}

[abhiseksood]

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

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

[SassySkulls]

This worked for me ...thank you

[KetanKumar]

@SassySkulls 

it's my pleasure to help us

[NicolasMaverde]

Hi @KetanKumar,

nice work!

I need this code for my hero image.

Can you help me with that?

website: maverde.de

sero2020

Thanks in advance!

Nicolas

[KetanKumar]

@NicolasMaverde 

thanks 

can you please share code so i will update

[NicolasMaverde]

Her the hero liquid code

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

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

[KetanKumar]

@NicolasMaverde 

thanks for the code but i have to save my demo store code it some error can you add me on staff just give theme access so i will quick fix 

[Sylia]

Hi KetanKumar,

Thank you for all the help you have been giving everyone. I replaced all the code for /feature-row.liquid with the code you provided. It works well, except there are odd borders around the headers and the photos.

My store URL: https://impulsenotion.myshopify.com/

Is there a way to edit the borders?

Thank you!

[iinsomniac]

Hello Mr. Ketan,

I pasted exactly the same code you have provided and in the same place where you have guided:

it did work but not the way I was expecting it.

I have the borders over the pictures and heading also (maybe padding), I want to remove it.
Also, when I click the picture, it is taking me to the top of the home page instead of taking me to the product page.

Please, I need help with this. Sooner the better.

Thanks in Advance.

www.petgocrazy.com

[KetanKumar]

@iinsomniac 

sorry for any issue can you please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

.feature-row__item .btn {
    background: transparent !important;
    color: #000;
}

[iinsomniac]

Thanks a lot, Mr. Ketan,

It really worked fine and I really appreciate the help you are offering to the new merchants.
The only problem is heading disappears as I take the cursor over the heading.
Is there any coding to make the heading as a link only but not to disappear?

Kudos, Mr. Ketan. 1000likes for you.

[KetanKumar]

@iinsomniac 

its my pleasure to help us 

and thanks for your complements

yes please add this code

.feature-row__item .btn:hover {
    color: #000;
}

[iinsomniac]

Mr. Ketan,

Thank you a lot, it did my work.
It feels so good when you get what you are looking for, you are the true savior.

[KetanKumar]

@iinsomniac 

thanks for your compliments 

its my pleasure to help us

[FGF]

@KetanKumar Hope you are doing well.

Just wondering if you have the code for the same problem in the Minimal Theme? Basically, make the "Image with Text" to be clickable on the home page.

I am thankful in advance for your time.

[KetanKumar]

@FGF 

yes please share section code so i will check and update

[FGF]

Thank you so much, @KetanKumar .

I actually just found one thread in the community showing me this code. I just changed and it worked. The only thing is that the title of the "Image with Text" is still not clickable. Is it possible to make it also clickable?

 Sections / featured-row.liquid

<div class="page-width feature-row">
{% capture image_layout %}
<div class="feature-row__item">
{% if section.settings.image != blank %}
<noscript>
{{ section.settings.image | img_url: '640x640' | img_tag: section.settings.image.alt }}
</noscript>

{% capture img_id %}FeatureRowImage--{{ section.id }}{% endcapture %}
{% capture img_wrapper_id %}FeatureRowImageWrapper--{{ section.id }}{% endcapture %}
{% include 'image-style' with image: section.settings.image, width: 700, height: 640, wrapper_id: img_wrapper_id, img_id: img_id %}
{%- assign img_url = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<div id="{{ img_wrapper_id }}" class="feature-row__image-wrapper supports-js">
<div style="padding-top:{{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100}}%;">
{% if section.settings.image_external_url != blank %}
<a href="{{ section.settings.image_external_url }}">
{% endif %}
<img id="{{ img_id }}"
class="feature-row__image lazyload"
src="{{ section.settings.image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
data-aspectratio="{{ section.settings.image.aspect_ratio }}"
data-sizes="auto"
alt="{{ section.settings.image.alt | escape }}">
{% if section.settings.image_external_url != blank %}
</a>
{% endif %}
</div>
</div>
{% else %}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
</div>
{% endcapture %}

<div class="feature-row">
{% if section.settings.layout == 'left' %}
{{ image_layout }}
{% endif %}

<div class="feature-row__item feature-row__text feature-row__text--{{ section.settings.layout }}">
{% if section.settings.title != blank %}
<h2>{{ section.settings.title | escape }}</h2>
{% endif %}
{% if section.settings.text != blank %}
<div class="rte featured-row__subtext">{{ 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">
{{ section.settings.button_label | escape }}
</a>
{% endif %}
</div>

{% if section.settings.layout == 'right' %}
{{ image_layout }}
{% endif %}
</div>
</div>

{% schema %}
{
"name": {
"cs": "Obrázek s textem",
"da": "Billede med tekst",
"de": "Foto mit Text",
"en": "Image with text",
"es": "Imagen con texto",
"fi": "Kuva tekstillä",
"fr": "Image avec texte",
"hi": "टेक्स्ट वाली इमेज",
"it": "Immagine con testo",
"ja": "テキスト付き画像",
"ko": "텍스트 포함 이미지",
"nb": "Bilde med tekst",
"nl": "Afbeelding met tekst",
"pl": "Obraz z tekstem",
"pt-BR": "Imagem com texto",
"pt-PT": "Imagem com texto",
"sv": "Bild med text",
"th": "รูปภาพพร้อมข้อความ",
"tr": "Metin içeren görsel",
"vi": "Hình ảnh có chữ",
"zh-CN": "带文本图片",
"zh-TW": "附文字的圖片"
},
"class": "index-section",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": {
"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": "圖片"
}
},
{
"type": "text",
"id": "image_external_url",
"label": {
"en": "Image External Url"
}
},
{
"type": "select",
"id": "layout",
"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",
"hi": "इमेज पंक्तिबद्ध करना",
"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": "left",
"options": [
{
"value": "left",
"label": {
"cs": "Doleva",
"da": "Venstre",
"de": "Links",
"en": "Left",
"es": "Izquierda",
"fi": "Vasen",
"fr": "Gauche",
"hi": "बाएँ",
"it": "Sinistra",
"ja": "左",
"ko": "왼쪽",
"nb": "Venstre",
"nl": "Links",
"pl": "Do lewej",
"pt-BR": "Esquerda",
"pt-PT": "Esquerda",
"sv": "Vänster",
"th": "ด้านซ้าย",
"tr": "Sol",
"vi": "Bên trái",
"zh-CN": "左侧",
"zh-TW": "左方"
}
},
{
"value": "right",
"label": {
"cs": "Doprava",
"da": "Højre",
"de": "Rechts",
"en": "Right",
"es": "Derecha",
"fi": "Oikea",
"fr": "Droite",
"hi": "दाएँ",
"it": "Destra",
"ja": "右",
"ko": "오른쪽",
"nb": "Høyre",
"nl": "Rechts",
"pl": "Do prawej",
"pt-BR": "Direita",
"pt-PT": "Direita",
"sv": "Höger",
"th": "ด้านขวา",
"tr": "Sağ",
"vi": "Bên phải",
"zh-CN": "右侧",
"zh-TW": "右方"
}
}
]
},
{
"type": "text",
"id": "title",
"label": {
"cs": "Nadpis",
"da": "Overskrift",
"de": "Titel",
"en": "Heading",
"es": "Título",
"fi": "Otsake",
"fr": "Titre",
"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 textem",
"da": "Billede med tekst",
"de": "Foto mit Text",
"en": "Image with text",
"es": "Imagen con texto",
"fi": "Kuva tekstillä",
"fr": "Image avec texte",
"hi": "टेक्स्ट वाली इमेज",
"it": "Immagine con testo",
"ja": "テキスト付き画像",
"ko": "텍스트 포함 이미지",
"nb": "Bilde med tekst",
"nl": "Afbeelding met tekst",
"pl": "Obraz z tekstem",
"pt-BR": "Imagem com texto",
"pt-PT": "Imagem com texto",
"sv": "Bild med text",
"th": "รูปภาพพร้อมข้อความ",
"tr": "Metin içeren görsel",
"vi": "Hình ảnh có chữ",
"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>Zkombinujte velký text a obrázek, abyste zaměřili pozornost návštěvníků na zvolený produkt, kolekci či příspěvek na blogu. Pak můžete připojit podrobnosti o dostupnosti či stylu, nebo dokonce recenzi.</p>",
"da": "<p>Kombiner stor tekst med et billede for at give dit valgte produkt, din valgte kollektion eller dit valgte blogopslag fokus. Tilføj oplysninger om tilgængelighed, stil og eventuelt også en anmeldelse.</p>",
"de": "<p>Kombiniere große Schrift mit einem Foto, um einen Fokus auf dein ausgewähltes Produkt, die Kategorie oder einen Blogpost zu legen. Du kannst dann Details zur Verfügbarkeit und dem Style oder sogar eine Bewertung hinzufügen.</p>",
"en": "<p>Pair large text with an image to give focus to your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
"es": "<p>Vincula un texto largo con una imagen para dar visibilidad a tu producto, colección o artículo de blog seleccionados. Agrega detalles sobre disponibilidad, estilo, o incluso ofrece una reseña.</p>",
"fi": "<p>Korosta valitsemaasi tuotetta, kokoelmaa tai blogijulkaisua lisäämällä kuvaan suuri teksti. Lisää saatavuustiedot, määritä tyyli tai näytä vaikkapa arvostelu.</p>",
"fr": "<p>Ajoutez une image à un long texte pour mettre l'accent sur un produit de votre choix, une collection, ou un article de blog. Ajoutez des détails sur la disponibilité, le style, ou mettez un commentaire client en avant.</p>",
"hi": "<p>अपने चुने हुए उत्पाद, कलेक्शन या ब्लॉग पोस्ट पर ध्यान देने के लिए छवि के साथ बड़े पाठ को पेयर करें. उपलब्धता, स्टाइल या यहां तक कि समीक्षा प्रदान करने पर विवरण जोड़ें.</p>",
"it": "<p>Associa un testo di grandi dimensioni a un'immagine per dare importanza al prodotto, alla collezione o all'articolo del blog di tua scelta. Aggiungi dettagli sulla disponibilità, sullo stile o fornisci una recensione.</p>",
"ja": "<p>あなたが選んだ商品、コレクション、またはブログ記事に注目を集めるため、大きなテキストと画像を組み合わせます。可用性、スタイル、またはレビュー提供についての詳細を追加します。</p>",
"ko": "<p>이미지와 큰 텍스트를 짝지어 선택한 제품, 컬렉션, 블로그 게시판을 강조합니다. 사용 가능성, 스타일에 대한 자세한 정보를 추가하거나 리뷰를 제공합니다.</p>",
"nb": "<p>Koble stor tekst med et bilde for å drive fokus mot det valgte produktet, samlingen eller blogginnlegget. Legg til detaljer om tilgjengelighet, stil eller vis frem en vurdering.</p>",
"nl": "<p>Plaats een afbeelding bij grote stukken tekst om de aandacht op je gekozen product, collectie of blogpost te richten. Voeg details over beschikbaarheid en stijl toe of plaats een productrecensie.</p>",
"pl": "<p>Połącz duży tekst z obrazem, aby skierować uwagę na wybrany produkt, kolekcję lub wpis na blogu. Dodaj szczegóły dotyczące dostępności, stylu lub nawet dołącz recenzję.</p>",
"pt-BR": "<p>Emparelhe textos grandes com uma imagem para dar foco ao produto, coleção ou post do blog escolhido. Adicione detalhes sobre disponibilidade, estilo ou até mesmo um comentário.</p>",
"pt-PT": "<p>Associe um texto grande a uma imagem para dar ênfase ao produto, coleção ou publicação no blogue que escolheu. Adicione detalhes sobre disponibilidade, estilo ou uma avaliação.</p>",
"sv": "<p>Para ihop stor text med en bild för att ge fokus åt din valda produkt, kollektion eller blogginlägg. Lägg till information om tillgänglighet, stil eller tillhandahåll till och med en recension.</p>",
"th": "<p>จับคู่ข้อความขนาดใหญ่กับรูปภาพเพื่อให้ความสำคัญกับสินค้า คอลเลกชัน หรือโพสต์บล็อกที่คุณเลือก เพิ่มรายละเอียดเกี่ยวกับความพร้อม สไตล์ หรือแม้กระทั่งเขียนรีวิว</p>",
"tr": "<p>Geniş metni bir görselle eşleyerek seçtiğiniz ürüne, koleksiyona veya blog gönderisine dikkat çekin. Stok durumu, stil hakkındaki ayrıntıları ekleyin, hatta inceleme sağlayın.</p>",
"vi": "<p>Ghép nối văn bản lớn với hình ảnh để làm nổi bật sản phẩm, bộ sưu tập hoặc bài viết blog đã chọn. Thêm chi tiết về tình trạng còn hàng, kiểu hoặc đưa ra đánh giá.</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-Link",
"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",
"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 textem",
"da": "Billede med tekst",
"de": "Foto mit Text",
"en": "Image with text",
"es": "Imagen con texto",
"fi": "Kuva tekstillä",
"fr": "Image avec texte",
"hi": "टेक्स्ट वाली इमेज",
"it": "Immagine con testo",
"ja": "テキスト付き画像",
"ko": "텍스트 포함 이미지",
"nb": "Bilde med tekst",
"nl": "Afbeelding met tekst",
"pl": "Obraz z tekstem",
"pt-BR": "Imagem com texto",
"pt-PT": "Imagem com texto",
"sv": "Bild med text",
"th": "รูปภาพพร้อมข้อความ",
"tr": "Metin içeren görsel",
"vi": "Hình ảnh có chữ",
"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 %}

[KetanKumar]

@FGF 

thanks for code, i have check this code its  already done please check me now what issue