How to add image to homepage with html code?

Astronaut
835 95 178

Whooooops, sorry about that, I was looking at the section above my section. I think this is the one you're looking for, though I don't know if the grid classes are going to be the same for your site, you may have to edit that:

 

<hr>
<div class="custom-content">
  {% for block in section.blocks %}
    {% case block.settings.width %}
      {% when '25%' %}
        {%- assign block_width = 'small--one-whole one-quarter' -%}
      {% when '33%' %}
        {%- assign block_width = 'small--one-whole one-third' -%}
      {% when '50%' %}
        {%- assign block_width = 'small--one-whole one-half' -%}
      {% when '66%' %}
        {%- assign block_width = 'small--one-whole two-thirds' -%}
      {% when '75%' %}
        {%- assign block_width = 'small--one-whole three-quarters' -%}
      {% when '100%' %}
        {%- assign block_width = 'one-whole' -%}
    {% endcase %}
    <div class="custom__item {{ block_width }} {% if block.settings.alignment %}align--{{ block.settings.alignment }}{% endif %}" {{ block.shopify_attributes }}>
      <div class="custom__item-inner custom__item-inner--{{ block.type }}">
        {% case block.type %}
          {% when 'html' %}
            {% if block.settings.code != blank %}
              <div class="rte" data-section-id="{{ section.id }}" data-section-type="featured-content-section">
                {{ block.settings.code }}
              </div>
            {% else %}
              <div class="rte text-center">
                {{ 'homepage.onboarding.no_content' | t }}
              </div>
            {% endif %}
        {% endcase %}
      </div>
    </div>
  {% endfor %}
  {% if section.blocks.size == 0 %}
    <div class="wrapper">
      <div class="grid">
        <div class="grid__item">
          <div class="rte text-center">
            {{ 'homepage.onboarding.no_content' | t }}
          </div>
        </div>
      </div>
   </div>
  {% endif %}
  </div>
</div>



{% schema %}
{
  "name": {
    "de": "Personalisierter Content",
    "en": "Custom content",
    "es": "Contenido personalizado",
    "fr": "Contenu personnalisé",
    "it": "Contenuto personalizzato",
    "ja": "コンテンツをカスタムする",
    "nl": "Aangepaste inhoud",
    "pt-BR": "Conteúdo personalizado",
    "zh-CN": "自定义内容",
    "zh-TW": "自訂內容"
  },
  "max_blocks": 9,
  "blocks": [
    {
      "type": "html",
      "name": {
        "de": "Benutzerdefiniertes HTML",
        "en": "Custom HTML",
        "es": "HTML personalizado",
        "fr": "Code HTML personnalisé",
        "it": "HTML personalizzato",
        "ja": "HTMLをカスタムする",
        "nl": "Aangepaste HTML",
        "pt-BR": "HTML personalizado",
        "zh-CN": "自定义 HTML",
        "zh-TW": "自訂 HTML"
      },
      "settings": [
        {
          "type": "html",
          "id": "code",
          "label": {
            "de": "HTML",
            "en": "HTML",
            "es": "HTML",
            "fr": "HTML",
            "it": "HTML",
            "ja": "HTML",
            "nl": "HTML",
            "pt-BR": "HTML",
            "zh-CN": "HTML",
            "zh-TW": "HTML"
          },
          "default": {
            "de": "<div style='text-align:center;'><h2>Formatieren Sie Ihren Text mit HTML, damit er leichter lesbar ist.</h2>Mit diesem Text können Sie Ihre Kunden über Ihre Marke informieren.</div>",
            "en": "<div style='text-align:center;'><h2>Use HTML to format your text so it can be easily read.</h2>This text can be used to share information about your brand with customers.</div>",
            "es": "<div style='text-align:center;'><h2>Usa HTML para formatear tu texto para que se pueda leer fácilmente</h2>. Este texto se puede usar para compartir información sobre tu marca con los clientes.</div>",
            "fr": "<div style='text-align:center;'><h2>Utilisez le code HTML pour formater votre texte afin qu'il puisse être facilement lu.</h2>Vous pouvez utiliser ce texte pour partager des informations sur votre marque avec les clients.</div>",
            "it": "<div style='text-align:center;'><h2>Utilizza l'HTML per formattare il tuo testo così che sia facilmente leggibile.</h2>Questo testo può essere usato per condividere le informazioni sul tuo brand con i clienti.</div>",
            "ja": "<div style='text-align:center;'><h2>テキストが読みやすくなるように、HTMLを使用して書式設定します。</h2>このテキストは、あなたのブランドに関する情報をお客様と共有するために使用できます。</div>",
            "nl": "<div style='text-align:center;'><h2>Gebruik HTML om uw tekst op te maken, zodat deze makkelijk leesbaar is.</h2>Deze tekst kan worden gebruikt om informatie over uw merk met klanten te delen.</div>",
            "pt-BR": "<div style='text-align:center;'><h2>Use HTML para formatar seu texto, assim ele pode ser lido com facilidade.</h2> Esse texto pode ser usado para compartilhar informações sobre sua marca com os clientes.</div>",
            "zh-CN": "<div style='text-align:center;'><h2>使用 HTML 设置文本格式,以便轻松阅读。</h2>此文本可用于与客户分享有关您的品牌的信息。</div>",
            "zh-TW": "<div style='text-align:center;'><h2>使用 HTML 來設定文字格式,使文字易於閱讀。</h2>您可以利用此段文字跟客戶分享品牌資訊。</div>"
          }
        },
        {
          "type": "select",
          "id": "width",
          "label": {
            "de": "Containerbreite",
            "en": "Container width",
            "es": "Ancho del contenedor",
            "fr": "Largeur du conteneur",
            "it": "Larghezza contenitore",
            "ja": "コンテナーの幅",
            "nl": "Containerbreedte",
            "pt-BR": "Largura do recipiente",
            "zh-CN": "容器宽度",
            "zh-TW": "容器寬度"
          },
          "default": "100%",
          "options": [
            {
              "value": "25%",
              "label": {
                "de": "25 %",
                "en": "25%",
                "es": "25%",
                "fr": "25 %",
                "it": "25%",
                "ja": "25%",
                "nl": "25%",
                "pt-BR": "25%",
                "zh-CN": "25%",
                "zh-TW": "25%"
              }
            },
            {
              "value": "33%",
              "label": {
                "de": "33 %",
                "en": "33%",
                "es": "33%",
                "fr": "33 %",
                "it": "33%",
                "ja": "33%",
                "nl": "33%",
                "pt-BR": "33%",
                "zh-CN": "33%",
                "zh-TW": "33%"
              }
            },
            {
              "value": "50%",
              "label": {
                "de": "50 %",
                "en": "50%",
                "es": "50%",
                "fr": "50 %",
                "it": "50%",
                "ja": "50%",
                "nl": "50%",
                "pt-BR": "50%",
                "zh-CN": "50%",
                "zh-TW": "50%"
              }
            },
            {
              "value": "66%",
              "label": {
                "de": "66 %",
                "en": "66%",
                "es": "66%",
                "fr": "66 %",
                "it": "66%",
                "ja": "66%",
                "nl": "66%",
                "pt-BR": "66%",
                "zh-CN": "66%",
                "zh-TW": "66%"
              }
            },
            {
              "value": "75%",
              "label": {
                "de": "75 %",
                "en": "75%",
                "es": "75%",
                "fr": "75 %",
                "it": "75%",
                "ja": "75%",
                "nl": "75%",
                "pt-BR": "75%",
                "zh-CN": "75%",
                "zh-TW": "75%"
              }
            },
            {
              "value": "100%",
              "label": {
                "de": "100 %",
                "en": "100%",
                "es": "100%",
                "fr": "100 %",
                "it": "100%",
                "ja": "100%",
                "nl": "100%",
                "pt-BR": "100%",
                "zh-CN": "100%",
                "zh-TW": "100%"
              }
            }
          ]
        },
        {
          "type": "select",
          "id": "alignment",
          "label": {
            "de": "Vertikale Ausrichtung",
            "en": "Vertical alignment",
            "es": "Alineación vertical",
            "fr": "Alignement vertical",
            "it": "Allineamento verticale",
            "ja": "垂直アラインメント",
            "nl": "Verticaal uitlijnen",
            "pt-BR": "Alinhamento vertical",
            "zh-CN": "垂直对齐",
            "zh-TW": "垂直對齊"
          },
          "default": "top-middle",
          "options": [
            {
              "value": "top-middle",
              "label": {
                "de": "Oben",
                "en": "Top",
                "es": "Superior",
                "fr": "En haut",
                "it": "In alto",
                "ja": "上",
                "nl": "Boven",
                "pt-BR": "Acima",
                "zh-CN": "顶部",
                "zh-TW": "頂部"
              }
            },
            {
              "value": "center",
              "label": {
                "de": "Mittig",
                "en": "Middle",
                "es": "Al medio",
                "fr": "Au milieu",
                "it": "Al centro",
                "ja": "中央",
                "nl": "Midden",
                "pt-BR": "Meio",
                "zh-CN": "中间",
                "zh-TW": "中央"
              }
            },
            {
              "value": "bottom-middle",
              "label": {
                "de": "Unten",
                "en": "Bottom",
                "es": "Inferior",
                "fr": "En bas",
                "it": "In basso",
                "ja": "下",
                "nl": "Onder",
                "pt-BR": "Abaixo",
                "zh-CN": "底部",
                "zh-TW": "底部"
              }
            }
          ]
        }
      ]
    }
  ],
  "presets": [
    {
      "name": {
        "de": "Personalisierter Content",
        "en": "Custom content",
        "es": "Contenido personalizado",
        "fr": "Contenu personnalisé",
        "it": "Contenuto personalizzato",
        "ja": "コンテンツをカスタムする",
        "nl": "Aangepaste inhoud",
        "pt-BR": "Conteúdo personalizado",
        "zh-CN": "自定义内容",
        "zh-TW": "自訂內容"
      },
      "category": {
        "de": "Komplizierteres Layout",
        "en": "Advanced layout",
        "es": "Diseño avanzado",
        "fr": "Mise en page avancée",
        "it": "Layout avanzato",
        "ja": "高度なレイアウト",
        "nl": "Geavanceerde indeling",
        "pt-BR": "Layout avançado",
        "zh-CN": "高级布局",
        "zh-TW": "進階版面配置"
      },
      "blocks": [
        {
          "type": "html"
        }
      ]
    }
  ]
}
{% endschema %}
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
Tourist
9 0 1

Beautiful! THanks so much for your help and quick responses!

0 Likes