How do I add a custom HTML section to the Impulse theme?

Topic summary

Goal: add a “Custom HTML” area in the Impulse theme (for inserting a reviews script), both on the homepage and in the footer.

What happened:

  • The OP recreated a Custom HTML section on the homepage by reusing code from an older theme (resolved for homepage). They offered to share the code.
  • Adding a Custom HTML block to the footer failed. A schema snippet was added to footer.liquid, but the script didn’t render. The posted schema looked incomplete/corrupted. A suggestion to switch setting type from html to textarea did not help.
  • Another user with the same need tried a tutorial but got: “New schema is incompatible with the current setting value. Invalid type value for block… Type must be defined in a schema,” indicating saved settings reference a block type not defined in the current schema.

Context/terms:

  • Shopify sections/blocks and schema: JSON in Liquid that defines settings and block types. Blocks must be declared in the section schema and rendered in the template to appear.

Status:

  • Partially resolved (homepage). Footer implementation remains unresolved; likely requires proper block type definition, complete schema, and rendering code, or clearing old settings causing schema mismatch. Others requested the working code. Discussion open.

Artifacts:

  • Screenshots and code snippets are central to the issue.
Summarized with AI on January 22. AI used: gpt-5.

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

@TimW

Please share screenshot what do you want .

Thanks!

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

I need to insert a skript from “reviews on my website”

The last time some agency made this for me.

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

If somebody wants the code, contact me. :slightly_smiling_face:

Now I have my html section again:

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

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

@TimW

Please share Sections/footer.liquid file code.

Thanks!

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

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

Subscribe to get special offers, free giveaways, and once-in-a-lifetime deals.

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

Add your own custom text here.

"
          },
          {
            "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


  {{ section.settings.custom_html }}

{% 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": "## Informujte o své značce

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.

",
        "da": "## Fortæl om dit brand

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.

",
        "de": "## Informiere über deine Marke

Formatiere deinen Text mit HTML, damit er leichter lesbar ist. Mit diesem Text kannst du deine Kunden über deine Marke informieren.

",
        "en": "## Talk about your brand

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.

",
        "es": "## Habla sobre tu marca

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.

",
        "fi": "## Puhu brändistäsi

Käytä HTML:ää tekstisi muokkaamiseen, jotta sitä voi lukea helposti. Tämän tekstin avulla voit jakaa tietoa brändistäsi asiakkaittesi kanssa.

",
        "fr": "## Parlez de votre marque

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.

",
        "it": "## Parla del tuo brand

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.

",
        "ja": "## あなたのブランドについて話す

HTMLを使用してテキストを読みやすくフォーマットしてください。このテキストはあなたのブランドに関する情報をお客様と共有するために使用できます。

",
        "ko": "## 브랜드 이야기하기 

텍스트를 형식화하기 위해 HTML을 사용하여 쉽게 읽을 수 있습니다. 이 텍스트를 사용하여 브랜드에 대한 정보를 고객과 공유할 수 있습니다.

",
        "nb": "## Snakk om merkevaren din

Bruk HTML for å formatere teksten din så den er lettlest. Denne teksten kan brukes til å dele informasjon om merkevaren din med kundene.

",
        "nl": "## Praat over je merk

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.

",
        "pl": "## Opowiedz o swojej marce

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.

",
        "pt-BR": "## Fale sobre sua marca

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.

",
        "pt-PT": "## Fale sobre a sua marca

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.

",
        "sv": "## Prata om ditt varumärke

 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.

",
        "th": "## พูดถึงแบรนด์ของคุณ

ใช้ HTML เพื่อจัดรูปแบบข้อความของคุณให้อ่านง่าย ข้อความนี้สามารถใช้เพื่อแบ่งปันข้อมูลเกี่ยวกับแบรนด์ของคุณกับลูกค้าได้

",
        "tr": "## Markanızdan bahsedin

Metninizi, kolayca okunabilmesi için HTML kullanarak biçimlendirin. Bu metin, müşterilerle markanız hakkında bilgi paylaşmak için kullanılabilir.

",
        "vi": "## Chia sẻ về thương hiệu của bạn

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.

",
        "zh-CN": "## 介绍您的品牌

使用 HTML 设置文本格式,以便轻松阅读。此文本可用于与客户分享有关您的品牌的信息。

",
        "zh-TW": "## 描述您的品牌

使用 HTML 設定文字格式,使文字容易閱讀。這段文字可以用來與顧客分享您的品牌資訊。

"
      }
    }
  ],
  "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 %}
1 Like

@TimW

This is code customization work .

1 Like

@TimW

can you please change type html to textarea

@KetanKumar

Doesn´t work.

1 Like

@TimW

sorry i can’t see this code

Hi Tim,

I have the same Problem. Could you pls share the code?

Lg Bennet

1 Like

@Borido

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

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

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

Hi and thanks a lot :slightly_smiling_face:

Im working on this site: https://good-smith.com/

the footer does work but I cant insert a custom html code as one of the blocks

1 Like

@Borido

yes, please try this code

https://www.huratips.com/tech-tips/how-to-create-a-custom-html-section-in-shopify.html

Hi Ketan, it doesnt work. It gives me this error:

  • New schema is incompatible with the current setting value. Ungültiger Typwert für Block ‚98a76dd9-b4e3-41fd-a830-90bcfd66c182’. Typ muss in einem Schema definiert sein.
1 Like

@Borido

oh sorry for that issue

it can be done customization code

Hello dear,

I need help from you, I want to remove the slide effect on hero slideshow image & I see black fade image at the start of my website for few seconds while loading hero slideshow image for Safari & Chrome, I just want the quick have a fade-in effect. I find it very annoying, that’s why I want to ask you what I can do

Laptop and phone Iphone safari/google chrome have the same problems.

Is this an easy solution? I’m waiting for your response.

You still have the code?