Custom HTML Section / Impulse theme

Solved
TimW
Excursionist
28 2 10

Hi,

in my old theme I added a "custom html section" for the homepage.
Now I am working with impulse theme and forgot how I added this section in my template.

Can someone help me with that please?

Thank you very much!

Tim

0 Likes
dmwwebartisan
Shopify Partner
8599 2012 2717

@TimW 

Please share screenshot what do you want .

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 →
0 Likes
TimW
Excursionist
28 2 10

@dmwwebartisan 
I want a section named "custom html" There I can put in custom code.

TimW_0-1624537054450.png


I need to insert a skript from "reviews on my website"

The last time some agency made this for me.

0 Likes
TimW
Excursionist
28 2 10

This is an accepted solution.

I got it
Found the code in my old section folder.

If somebody wants the code, contact me.

Now I have my html section again:

TimW_0-1624538140161.png

 

0 Likes
TimW
Excursionist
28 2 10

@KetanKumar 
I put in this script in "footer html" section but it doesnt show up in my footer:

TimW_0-1624540947353.png

 

I added this code in my footer.liquid to get this "custom footer html" section:

{
      "type": "html",
      "name": "HTML",
      "settings": [
        {
          "type": "html",
          "id": "footer_html",
          "label": "Footer HTML"
        }
      ]
    },

 I think something is missing.

https://pevhjlnb79zex8x3-56851923137.shopifypreview.com

 

0 Likes
dmwwebartisan
Shopify Partner
8599 2012 2717

@TimW 

Please share Sections/footer.liquid file code.

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 →
0 Likes
TimW
Excursionist
28 2 10

Footer.liquid

{%- liquid
  assign show_selectors = false
  assign currency_selector = false
  assign locale_selector = false

  if section.settings.show_currency_selector and shop.enabled_currencies.size > 1
    assign currency_selector = true
  endif

  if section.settings.show_locale_selector and shop.enabled_locales.size > 1
    assign locale_selector = true
  endif

  if currency_selector or locale_selector
    assign show_selectors = true
  endif
-%}

{%- if settings.color_footer == settings.color_body_bg -%}
  {%- style -%}
    .site-footer {
      border-top: 1px solid {{ settings.color_borders }};
    }
  {%- endstyle -%}
{%- endif -%}

<footer class="site-footer" data-section-id="{{ section.id }}" data-section-type="footer-section">
  <div class="page-width">

    <div class="grid">
      {%- assign row_width = 0 -%}
      {%- for block in section.blocks -%}
        {%- assign row_width = row_width | plus: block.settings.container_width -%}
        {%- if row_width > 100 -%}
          <div class="footer__clear small--hide"></div>
          {%- assign row_width = row_width | minus: 100 -%}
        {%- endif -%}

        <div {{ block.shopify_attributes }} class="grid__item footer__item--{{ block.id }}" data-type="{{ block.type }}">
          {%- style -%}
            @media only screen and (min-width: 769px) and (max-width: 959px) {
              .footer__item--{{ block.id }} {
                width: 50%;
                padding-top: 40px;
              }
              .footer__item--{{ block.id }}:nth-child(2n + 1) {
                clear: left;
              }
            }
            @media only screen and (min-width: 960px) {
              .footer__item--{{ block.id }} {
                width: {{ block.settings.container_width }}%;
              }

            }
          {%- endstyle -%}

          {%- liquid
            case block.type
              when 'logo_social'
                render 'footer-logo', block: block
              when 'custom'
                render 'footer-custom-text', block: block
              when 'newsletter'
                render 'footer-newsletter', block: block
              when 'menu'
                render 'footer-menu', block: block
            endcase
          -%}
        </div>
      {%- endfor -%}
      {%- for block in section.blocks -%}
        {%- if block.type == 'logo' -%}
          <div class="grid__item medium-up--hide">
            {%- render 'footer-logo', block: block -%}
          </div>
        {%- endif -%}
      {%- endfor -%}
    </div>

    {%- if show_selectors -%}
      <div class="footer__section">
        {%- render 'multi-selectors',
          locale_selector: locale_selector,
          currency_selector: currency_selector,
          show_currency_flags: section.settings.show_currency_flags
          location: 'footer'
        -%}
      </div>
    {%- endif -%}

    {%- if section.settings.show_payment_icons -%}
      {%- unless shop.enabled_payment_types == empty -%}
        <ul class="inline-list payment-icons footer__section">
          {%- for type in shop.enabled_payment_types -%}
            <li class="icon--payment">
              {{ type | payment_type_svg_tag }}
            </li>
          {%- endfor -%}
        </ul>
      {%- endunless -%}
    {%- endif -%}

    {%- if section.settings.show_copyright -%}
      <p class="footer__small-text">
        &copy; {{ 'now' | date: '%Y' }} {{ shop.name }}
        {%- if section.settings.copyright_text != blank -%}
          {{ section.settings.copyright_text }}
        {%- endif -%}
      </p>
    {%- endif -%}
   

  </div>
</footer>

{% schema %}
  {
    "name": "Footer",
    "max_blocks": 12,
    "settings": [
      {
        "type": "header",
        "content": "Language selector",
        "info": "To add a language, go to your [language settings.](/admin/settings/languages)"
      },
      {
        "type": "checkbox",
        "id": "show_locale_selector",
        "label": "Show language selector",
        "default": true
      },
      {
        "type": "header",
        "content": "Currency selector",
        "info": "To add a currency, go to your [currency settings.](/admin/settings/payments)"
      },
      {
        "type": "checkbox",
        "id": "show_currency_selector",
        "label": "Show currency selector",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "show_currency_flags",
        "label": "Show currency flags",
        "default": true
      },
      {
        "type": "header",
        "content": "Additional footer content"
      },
      {
        "type": "checkbox",
        "id": "show_payment_icons",
        "label": "Show payment icons",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_copyright",
        "label": "Show copyright"
      },
      {
        "type": "text",
        "id": "copyright_text",
        "label": "Additional copyright text"
      }
    ],
    "blocks": [
      {
        "type": "logo_social",
        "name": "Logo",
        "limit": 1,
        "settings": [
          {
            "type": "image_picker",
            "id": "logo",
            "label": "Logo image"
          },
          {
            "type": "range",
            "id": "desktop_logo_height",
            "label": "Logo height",
            "default": 50,
            "min": 20,
            "max": 120,
            "unit": "px"
          },
          {
            "type": "range",
            "id": "container_width",
            "label": "Column width",
            "default": 25,
            "min": 15,
            "max": 95,
            "unit": "%"
          }
        ]
      },
{
      "type": "html",
      "name": "HTML",
      "settings": [
        {
          "type": "html",
          "id": "footer_html",
          "label": "Footer HTML"
        }
      ]
    },
      {
        "type": "menu",
        "name": "Navigation",
        "settings": [
          {
            "type": "checkbox",
            "id": "show_footer_title",
            "label": "Show heading"
          },
          {
            "type": "link_list",
            "id": "menu",
            "label": "Choose a menu",
            "default": "footer",
            "info": "This menu won't show dropdown items"
          },
          {
            "type": "range",
            "id": "container_width",
            "label": "Column width",
            "default": 25,
            "min": 15,
            "max": 95,
            "unit": "%"
          }
        ]
      },
      {
        "type": "newsletter",
        "name": "Newsletter and social",
        "limit": 1,
        "settings": [
          {
            "type": "checkbox",
            "id": "show_footer_title",
            "label": "Show heading",
            "default": true
          },
          {
            "type": "paragraph",
            "content": "Any customers who sign up will have an account created for them in Shopify. [View customers](/admin/customers)."
          },
          {
            "type": "text",
            "id": "title",
            "label": "Heading",
            "default": "Sign up and save"
          },
          {
            "type": "richtext",
            "id": "text",
            "label": "Text",
            "info": "Optional",
            "default": "<p>Subscribe to get special offers, free giveaways, and once-in-a-lifetime deals.</p>"
          },
          {
            "type": "range",
            "id": "container_width",
            "label": "Column width",
            "default": 25,
            "min": 15,
            "max": 95,
            "unit": "%"
          }
        ]
      },
      {
        "type": "custom",
        "name": "Custom text",
        "settings": [
          {
            "type": "checkbox",
            "id": "show_footer_title",
            "label": "Show heading",
            "default": true
          },
          {
            "type": "text",
            "id": "title",
            "label": "Heading",
            "default": "Custom text"
          },
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "type": "richtext",
            "id": "text",
            "label": "Text",
            "default": "<p>Add your own custom text here.</p>"
          },
          {
            "type": "range",
            "id": "container_width",
            "label": "Column width",
            "default": 25,
            "min": 15,
            "max": 95,
            "unit": "%"
          }
        ]
      }
    ],
    "default": {
      "settings": {},
      "blocks": [
        {
          "type": "menu",
          "settings": {}
        },
        {
          "type": "logo_social",
          "settings": {}
        }
      ]
    }
  }
{% endschema %}

 

custom.html.liquid

<div class="page-width">
  {{ section.settings.custom_html }}
</div>



{% schema %}
{
  "name": {
    "cs": "Vlastní HTML",
    "da": "Tilpasset HTML",
    "de": "Benutzerdefiniertes HTML",
    "en": "Custom HTML",
    "es": "HTML personalizado",
    "fi": "Mukautettu HTML",
    "fr": "Code HTML personnalisé",
    "it": "HTML personalizzato",
    "ja": "HTMLをカスタムする",
    "ko": "사용자 지정 HTML",
    "nb": "Tilpasset HTML",
    "nl": "Aangepaste HTML",
    "pl": "Niestandardowy HTML",
    "pt-BR": "HTML personalizado",
    "pt-PT": "HTML personalizado",
    "sv": "Anpassa HTML",
    "th": "HTML แบบกำหนดเอง",
    "tr": "Özel HTML",
    "vi": "HTML tùy chỉnh",
    "zh-CN": "自定义 HTML",
    "zh-TW": "自訂 HTML"
  },
  "class": "index-section",
  "settings": [
    {
      "type": "html",
      "id": "custom_html",
      "label": {
        "cs": "Vlastní HTML",
        "da": "Tilpasset HTML",
        "de": "Benutzerdefiniertes HTML",
        "en": "Custom HTML",
        "es": "HTML personalizado",
        "fi": "Mukautettu HTML",
        "fr": "Code HTML personnalisé",
        "it": "HTML personalizzato",
        "ja": "HTMLをカスタムする",
        "ko": "사용자 지정 HTML",
        "nb": "Tilpasset HTML",
        "nl": "Aangepaste HTML",
        "pl": "Niestandardowy HTML",
        "pt-BR": "HTML personalizado",
        "pt-PT": "HTML personalizado",
        "sv": "Anpassa HTML",
        "th": "HTML แบบกำหนดเอง",
        "tr": "Özel HTML",
        "vi": "HTML tùy chỉnh",
        "zh-CN": "自定义 HTML",
        "zh-TW": "自訂 HTML"
      },
      "default": {
        "cs": "<h2>Informujte o své značce</h2><p>Naformátujte svůj text pomocí HTML, aby byl přehledný a srozumitelný. Prostřednictvím takového textu pak můžete informovat zákazníky o své značce.</p>",
        "da": "<h2>Fortæl om dit brand</h2><p>Brug HTML til at formatere din tekst, så den nemt kan læses.Denne tekst kan bruges til at dele oplysninger om dit brand med dine kunder.</p>",
        "de": "<h2>Informiere über deine Marke</h2><p>Formatiere deinen Text mit HTML, damit er leichter lesbar ist. Mit diesem Text kannst du deine Kunden über deine Marke informieren.</p>",
        "en": "<h2>Talk about your brand</h2><p>Use HTML to format your text so it can be easily read. This text can be used to share information about your brand with customers.</p>",
        "es": "<h2>Habla sobre tu marca</h2><p>Usa HTML para formatear tu texto para que se pueda leer fácilmente. Este texto se puede usar para compartir información sobre tu marca con los clientes.</p>",
        "fi": "<h2>Puhu brändistäs</h2>i<p>Käytä HTML:ää tekstisi muokkaamiseen, jotta sitä voi lukea helposti. Tämän tekstin avulla voit jakaa tietoa brändistäsi asiakkaittesi kanssa.</p>",
        "fr": "<h2>Parlez de votre marque</h2><p>Utilisez le code HTML pour formater votre texte afin qu'il puisse être facilement lu. Vous pouvez utiliser ce texte pour partager des informations sur votre marque avec les clients.</p>",
        "it": "<h2>Parla del tuo brand</h2><p>Utilizza l'HTML per formattare il testo in modo che sia facilmente leggibile. Questo testo può essere utilizzato per condividere le informazioni sul tuo brand con i clienti.</p>",
        "ja": "<h2>あなたのブランドについて話す</h2><p>HTMLを使用してテキストを読みやすくフォーマットしてください。このテキストはあなたのブランドに関する情報をお客様と共有するために使用できます。</p>",
        "ko": "<h2>브랜드 이야기하기</h2> <p>텍스트를 형식화하기 위해 HTML을 사용하여 쉽게 읽을 수 있습니다. 이 텍스트를 사용하여 브랜드에 대한 정보를 고객과 공유할 수 있습니다.</p>",
        "nb": "<h2>Snakk om merkevaren din</h2><p>Bruk HTML for å formatere teksten din så den er lettlest. Denne teksten kan brukes til å dele informasjon om merkevaren din med kundene.</p>",
        "nl": "<h2>Praat over je merk</h2><p>Gebruik HTML om je tekst zo op te maken dat deze makkelijk leesbaar is. Deze tekst kan worden gebruikt om informatie over je merk met klanten te delen.</p>",
        "pl": "<h2>Opowiedz o swojej marce</h2><p>Użyj języka HTML do sformatowania tekstu, tak aby można go było łatwo odczytać. Tekst ten może służyć do udostępniania klientom informacji o marce.</p>",
        "pt-BR": "<h2>Fale sobre sua marca</h2><p>Use HTML para formatar seu texto para que ele possa ser lido com facilidade. Esse texto pode ser usado para compartilhar informações sobre sua marca com os clientes.</p>",
        "pt-PT": "<h2>Fale sobre a sua marca</h2><p>Utilize HTML para formatar o seu texto para que este possa ser lido com facilidade. Este texto pode ser utilizado para partilhar informações sobre a sua marca com os clientes.</p>",
        "sv": "<h2>Prata om ditt varumärke</h2><p> Använd HTML för att formatera din text så att den lätt kan läsas. Den här texten kan användas för att dela information om ditt varumärke med kunder.</p>",
        "th": "<h2>พูดถึงแบรนด์ของคุณ</h2><p>ใช้ HTML เพื่อจัดรูปแบบข้อความของคุณให้อ่านง่าย ข้อความนี้สามารถใช้เพื่อแบ่งปันข้อมูลเกี่ยวกับแบรนด์ของคุณกับลูกค้าได้</p>",
        "tr": "<h2>Markanızdan bahsedin</h2><p>Metninizi, kolayca okunabilmesi için HTML kullanarak biçimlendirin. Bu metin, müşterilerle markanız hakkında bilgi paylaşmak için kullanılabilir.</p>",
        "vi": "<h2>Chia sẻ về thương hiệu của bạn</h2><p>Sử dụng HTML để định dạng văn bản sao cho dễ đọc. Có thể sử dụng văn bản này để chia sẻ thông tin về thương hiệu của bạn với khách hàng.</p>",
        "zh-CN": "<h2>介绍您的品牌</h2><p>使用 HTML 设置文本格式,以便轻松阅读。此文本可用于与客户分享有关您的品牌的信息。</p>",
        "zh-TW": "<h2>描述您的品牌</h2><p>使用 HTML 設定文字格式,使文字容易閱讀。這段文字可以用來與顧客分享您的品牌資訊。</p>"
      }
    }
  ],
  "presets": [
    {
      "name": {
        "cs": "Vlastní HTML",
        "da": "Tilpasset HTML",
        "de": "Benutzerdefiniertes HTML",
        "en": "Custom HTML",
        "es": "HTML personalizado",
        "fi": "Mukautettu HTML",
        "fr": "Code HTML personnalisé",
        "it": "HTML personalizzato",
        "ja": "HTMLをカスタムする",
        "ko": "사용자 지정 HTML",
        "nb": "Tilpasset HTML",
        "nl": "Aangepaste HTML",
        "pl": "Niestandardowy HTML",
        "pt-BR": "HTML personalizado",
        "pt-PT": "HTML personalizado",
        "sv": "Anpassa HTML",
        "th": "HTML แบบกำหนดเอง",
        "tr": "Özel HTML",
        "vi": "HTML tùy chỉnh",
        "zh-CN": "自定义 HTML",
        "zh-TW": "自訂 HTML"
      },
      "category": {
        "cs": "Pokročilé",
        "da": "Avanceret",
        "de": "Advanced",
        "en": "Advanced",
        "es": "Avanzado",
        "fi": "Advanced",
        "fr": "Advanced",
        "it": "Advanced",
        "ja": "高度",
        "ko": "Advanced",
        "nb": "Avansert",
        "nl": "Advanced",
        "pl": "Zaawansowane",
        "pt-BR": "Advanced",
        "pt-PT": "Avançado",
        "sv": "Avancerad",
        "th": "ขั้นสูง",
        "tr": "Gelişmiş",
        "vi": "Nâng cao",
        "zh-CN": "高级版",
        "zh-TW": "Advanced"
      }
    }
  ]
}
{% endschema %}
dmwwebartisan
Shopify Partner
8599 2012 2717

@TimW 

This is code customization work .

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 →
KetanKumar
Shopify Partner
22587 2286 8406

@TimW 

can you please change type html to  textarea

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
TimW
Excursionist
28 2 10

@KetanKumar

Doesn´t work.