How to add full width image banner with text

Solved
JHO
Tourist
10 1 0

Hi, I use the Boundless theme and I would like to add a full width image banner with a max height and i want also add text to it.

 

Sorry for my bad English, hope someone can help me.

 

0 Likes
dmwwebartisan
Shopify Partner
7361 1742 2329

Hey there,

 

Where you would like to add full width image banner ? 

Home page ?

 

Please let me know.

 

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
JHO
Tourist
10 1 0

Hi, I want to seperate two collections.

 

Here is the homepage.

https://k8er9euzdku3najj-4717346850.shopifypreview.com

 

,banner.jpg

0 Likes
dmwwebartisan
Shopify Partner
7361 1742 2329

This is an accepted solution.

Hey there,

Please add a section put "hero" section.
replace code with following:

 

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

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

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

put this css in the end of assets/theme.css.liquid

 

/****************************************/
/* text with image overlay classes */
/*****************************************/

.hero {
  position: relative;
  height: 475px;
  display: table;
  width: 100%;
  background: {
    size: cover;
    repeat: no-repeat;
    position: 50% 50%;
  }
}

.hero--adapt,
.hero-fixed-width__image {
  max-height: 100vh;

  @include media-query($medium-up) {
    max-height: 80vh;
  }
}

.hero--x-small {
  height: 94px;
}

.hero--small {
  height: 225px;
}
 .hero--medium {
    height: 475px;
  }

  .hero--large {
    height: 650px;
  }

 .hero--x-large {
    height: 775px;
  }


.hero__inner {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  /*padding: $section-spacing 0;*/
  z-index: 2;
}

.hero-fixed-width__content {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  z-index: 2;
  @include transform(translateY(-50%));
}
.hero .mega-title, .hero .mega-subtitle {
    text-shadow: 0 0 4px rgba(0,0,0,0.4);
}

.mega-title, .mega-subtitle {
    color: #fff;
}

.hero-fixed-width__image {
  width: 100%;
  height: 100%;
  max-width: 100%;
  margin: 0 auto;
  display: block;
  object-fit: cover;
  // Used for the IE lazysizes object-fit polyfill
  font-family: "object-fit: cover";
  overflow: hidden;
}
.placeholder-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.placeholder-svg {
    display: block;
    fill: rgba(51,50,50,0.35);
    background-color: rgba(51,50,50,0.1);
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border: 1px solid rgba(51,50,50,0.2);
}
.mega-title {
    margin-bottom: 8px;
}
.mega-title, .mega-subtitle {
    color: #fff;
}
.placeholder-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.hero__overlay::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #685858;
    opacity: 0.4;
    z-index: 1;
}
.ratio-container:after {
    content: '';
    display: block;
    height: 0;
    width: 100%;
    padding-bottom: 50%;
    content: "";
}
/********  end css image with overlay *************/

After this, try to customize your theme and click on Add Section in customizer.
You will get "text with image overlay" just select and add it.

 

Hope this works for you!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
dmwwebartisan
Shopify Partner
7361 1742 2329

Please make this correction.

Renamed the hero classes to imgoverlay in sections/hero.liquid file

and  in assets/theme.scss.liquid class .hero to .imgoverlay

 

Remember that you need to copy and rename the original hero class in the css file.

 

This should work and not conflict with existing slider css.

 

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Missjacole
New Member
1 0 0

Hello, was having same issue. I was able to add the image with text overlay feature but it messed up the formatting of my slide show following adding the code. I noticed you said you needed to rename some files. Can you explain how to do that?

0 Likes
Newuser1000
Tourist
6 0 0

Hi,

I am not a coder. I was going crazy for weeks reading and trying everything under the sun in order to get an image on my about page and have it be full width. It seems a ton of people have been on the same boat since years back all the way up to now. There are I'm sure multiple ways to get a full width image on a page that is not the home page (ie. about page), but the above approach in this thread is what did it for me, WITH one extra modification of code that I will include below. I basically did all of the things above, but it still didn't work for me until I found this bit of CSS code to swap with the CSS coding that coincided with the image I was working on (within the section/chunk of code you add at the bottom of the CSS code lines the way the coder above instructs). It takes a bit of searching to figure out which lines within that section/chunk apply directly to your image, but once you do, you'll see some similar fields/details (not exact) and then you can swap the code below in and test your site. Please copy, duplicate, etc. whatever you need to (in terms of coding) in order to get back to your starting point in case you don't get it to work on your first try. Before finally finding this solution, I had to go back many times. Best of luck to you. Just hoping to help others who have run into this wall because it was definitely a challenge for me as a total non-coder. You coders out there, I respect your skills!

Screen Shot 2020-08-05 at 4.02.06 PM.png

          left: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	max-width: 100vw;
	position: relative;
	right: 50%;
	width: 100vw;

 

0 Likes
oldsoulcompany
New Member
1 0 0

Would you be able to expand on this a little bit? I'm not a coder so not exactly sure what this means...

 

I must not have changed the correct items because the formatting of the slideshow was fixed but then the formatting of the hero banner ended up being messed up. Anything helps! Thanks.

0 Likes
Rodrigo92
New Member
1 0 0

Hi, first, thanks for your answer, it has helped me quite a lot. However, I´m still somewhat confused about renaming the hero classes to imgoverlay. I did replace the .hero to .imgoverlay on the theme.scss.liquid

0 Likes