Add a new block to the Footer - Dawn theme used

[Zens]

Hi everyone I would like to add a new block to the Footer of the Dawn theme.
The type of block to be added is that of the Custom Liquid, which is the one already present in the Dawn theme but in the sections.
Who can explain to me how it is possible to do?

Thanks.

[KetanKumar]

@Zens 

can you please  share store url and more details  what do you need extra block 

[Zens]

Hello @KetanKumar 

https://rivivonetdawn.myshopify.com/

this is the password iwahsh

This is a test site not the one where the piece of code will go.

I would like to be able to insert an html block or, even better, a liquid block (as is already present in this topic in the sections), because I can insert useful elements for the management of the site. Clickable images etc.

Thanks

[James_I]

Hello @Zens , adding a new block to the footer section would require some basic knowledge of HTML and a bit of CSS.

You would need to edit the footer.liquid section and add the HTML block exactly where you want it to be positioned in the page. You can inspect the source code of your footer to determine where that would be in some instances.

Also, you might need to add some CSS styles like padding, margin, display, e.t.c to make it really fit in to the footer and not like it was just dropped on it.

[KetanKumar]

@Zens 

can you try this way

https://shopify.dev/themes/architecture/sections/section-schema 

{{ block.settings.section_html }}

schema

"type": "html",
  "id": "section_html",

[Zens]

@KetanKumar I have added this piece of code

{
  "type": "html_content",
  "name": "HTML Content",
  "settings": [
    {
      "type": "html",
      "id": "html_area",
      "label": "Custom HTML",
      "default": "<div><p>Some HTML content</p></div>"
    }
  ]
},

I don't know if it's the same thing you suggested to me.
I placed it in the Schema block of the Footer.liquid file.
I see the box in the settings but when I insert, for example, a piece of code it is not displayed.

Why?

Thanks

[KetanKumar]

@Zens 

yes its current can you please check your code may something are missing 

[Zens]

@KetanKumar  

I see the difference in this piece of code that I don't have.

{{ block.settings.section_html }}

This code if I have to use it, where should I put it, in which file and where?

Thanks

[KetanKumar]

footer other block code

[Zens]

Uhm... @KetanKumar 

Unfortunately I didn't understand ... what do you mean by "other block code"?

Do I always have to insert this line

{{ block.settings.section_html }}

in the footer.liquid file or another file always in the footer? Which?

thanks.

[KetanKumar]

@Zens 

can you please share footer code

[Zens]

@KetanKumar This is my footer.liquid file code

{% comment %}theme-check-disable UndefinedObject{% endcomment %}
{{ 'section-footer.css' | asset_url | stylesheet_tag }}
<link rel="stylesheet" href="{{ 'component-newsletter.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-list-menu.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-list-payment.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-list-social.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-rte.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'disclosure.css' | asset_url }}" media="print" onload="this.media='all'">

<noscript>{{ 'component-newsletter.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-list-menu.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-list-payment.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-list-social.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-rte.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'disclosure.css' | asset_url | stylesheet_tag }}</noscript>

<footer class="footer color-{{ section.settings.color_scheme }} gradient">
  {%- if section.blocks.size > 0 or section.settings.newsletter_enable or section.settings.show_social -%}
    <div class="footer__content-top page-width">
      {%- if section.blocks.size > 0 -%}
        {%- liquid
          if section.blocks.size == 9
            assign footer_grid_class = 'grid--3-col-tablet'
          elsif section.blocks.size > 6
            assign footer_grid_class = 'grid--4-col-desktop'
          elsif section.blocks.size > 4
            assign footer_grid_class = 'grid--3-col-tablet'
          endif
        -%}
        <div class="footer__blocks-wrapper grid grid--1-col grid--2-col grid--4-col-tablet {{ footer_grid_class }}">
          {%- for block in section.blocks -%}
            <div class="footer-block grid__item{% if block.type == 'link_list' and block.settings.heading != blank %} footer-block--menu{% endif %}" {{ block.shopify_attributes }}>
              {%- if block.settings.heading != blank -%}
                <h2 class="footer-block__heading">{{- block.settings.heading | escape -}}</h2>
              {%- endif -%}

              {%- case block.type -%}
                {%- when 'text' -%}
                  <div class="footer-block__details-content rte">
                    {{ block.settings.subtext }}
                  </div>
                {%- when 'link_list' -%}
                  {%- if block.settings.menu != blank and block.settings.heading != blank -%}
                    <ul class="footer-block__details-content list-unstyled">
                      {%- for link in block.settings.menu.links -%}
                        <li>
                          <a href="{{ link.url }}" class="link link--text list-menu__item list-menu__item--link{% if link.active %} list-menu__item--active{% endif %}">
                            {{ link.title }}
                          </a>
                        </li>
                      {%- endfor -%}
                    </ul>
                  {%- endif -%}
                {%- when 'image' -%}
                  <div class="footer-block__details-content footer-block-image {{ block.settings.alignment }}">
                    {%- if block.settings.image != blank -%}
                      {%- assign image_size = block.settings.image_width | append: 'x' -%}
                      <img
                        srcset= "{{ block.settings.image | img_url: image_size }}, {{ block.settings.image | img_url: image_size, scale: 2 }} 2x"
                        src="{{ block.settings.image | img_url: '400x' }}"
                        alt="{{ block.settings.image.alt | escape }}"
                        loading="lazy"
                        width="{{ block.settings.image.width }}"
                        height="{{ block.settings.image.height }}"
                        style="max-width: min(100%, {{ block.settings.image_width }}px);"
                      >
                    {%- else -%}
                      {{ 'image' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
                    {%- endif -%}
                  </div>
                {%- endcase -%}
            </div>
          {%- endfor -%}
        </div>
      {%- endif -%}

      <div class="footer-block--newsletter">
        {%- if section.settings.newsletter_enable -%}
          <div class="footer-block__newsletter">
            {%- if section.settings.newsletter_heading != blank -%}
              <h2 class="footer-block__heading">{{ section.settings.newsletter_heading | escape }}</h2>
            {%- endif -%}
            {%- form 'customer', id: 'ContactFooter', class: 'footer__newsletter newsletter-form' -%}
              <input type="hidden" name="contact[tags]" value="newsletter">
              <div class="newsletter-form__field-wrapper">
                <div class="field">
                  <input
                    id="NewsletterForm--{{ section.id }}"
                    type="email"
                    name="contact[email]"
                    class="field__input"
                    value="{{ form.email }}"
                    aria-required="true"
                    autocorrect="off"
                    autocapitalize="off"
                    autocomplete="email"
                    {% if form.errors %}
                      autofocus
                      aria-invalid="true"
                      aria-describedby="ContactFooter-error"
                    {% elsif form.posted_successfully? %}
                      aria-describedby="ContactFooter-success"
                    {% endif %}
                    placeholder="{{ 'newsletter.label' | t }}"
                    required
                  >
                  <label class="field__label" for="NewsletterForm--{{ section.id }}">
                    {{ 'newsletter.label' | t }}
                  </label>
                  <button type="submit" class="newsletter-form__button field__button" name="commit" id="Subscribe" aria-label="{{ 'newsletter.button_label' | t }}">
                    {% render 'icon-arrow' %}
                  </button>
                </div>
                {%- if form.errors -%}
                  <small class="newsletter-form__message form__message" id="ContactFooter-error">{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</small>
                {%- endif -%}
              </div>
              {%- if form.posted_successfully? -%}
                <h3 class="newsletter-form__message newsletter-form__message--success form__message" id="ContactFooter-success" tabindex="-1" autofocus>{% render 'icon-success' %}{{ 'newsletter.success' | t }}</h3>
              {%- endif -%}
            {%- endform -%}
          </div>
        {%- endif -%}

        {%- if section.settings.show_social -%}
          <ul class="footer__list-social list-unstyled list-social" role="list">
            {%- if settings.social_twitter_link != blank -%}
              <li class="list-social__item">
                <a href="{{ settings.social_twitter_link }}" class="link link--text list-social__link" aria-describedby="a11y-external-message">
                  {%- render 'icon-twitter' -%}
                  <span class="visually-hidden">{{ 'general.social.links.twitter' | t }}</span>
                </a>
              </li>
            {%- endif -%}
            {%- if settings.social_facebook_link != blank -%}
              <li class="list-social__item">
                <a href="{{ settings.social_facebook_link }}" class="link link--text list-social__link" aria-describedby="a11y-external-message">
                  {%- render 'icon-facebook' -%}
                  <span class="visually-hidden">{{ 'general.social.links.facebook' | t }}</span>
                </a>
              </li>
            {%- endif -%}
            {%- if settings.social_pinterest_link != blank -%}
              <li class="list-social__item">
                <a href="{{ settings.social_pinterest_link }}" class="link link--text list-social__link" aria-describedby="a11y-external-message">
                  {%- render 'icon-pinterest' -%}
                  <span class="visually-hidden">{{ 'general.social.links.pinterest' | t }}</span>
                </a>
              </li>
            {%- endif -%}
            {%- if settings.social_instagram_link != blank -%}
              <li class="list-social__item">
                <a href="{{ settings.social_instagram_link }}" class="link link--text list-social__link" aria-describedby="a11y-external-message">
                  {%- render 'icon-instagram' -%}
                  <span class="visually-hidden">{{ 'general.social.links.instagram' | t }}</span>
                </a>
              </li>
            {%- endif -%}
            {%- if settings.social_tiktok_link != blank -%}
              <li class="list-social__item">
                <a href="{{ settings.social_tiktok_link }}" class="link link--text list-social__link" aria-describedby="a11y-external-message">
                  {%- render 'icon-tiktok' -%}
                  <span class="visually-hidden">{{ 'general.social.links.tiktok' | t }}</span>
                </a>
              </li>
            {%- endif -%}
            {%- if settings.social_tumblr_link != blank -%}
              <li class="list-social__item">
                <a href="{{ settings.social_tumblr_link }}" class="link link--text list-social__link" aria-describedby="a11y-external-message">
                  {%- render 'icon-tumblr' -%}
                  <span class="visually-hidden">{{ 'general.social.links.tumblr' | t }}</span>
                </a>
              </li>
            {%- endif -%}
            {%- if settings.social_snapchat_link != blank -%}
              <li class="list-social__item">
                <a href="{{ settings.social_snapchat_link }}" class="link link--text list-social__link" aria-describedby="a11y-external-message">
                  {%- render 'icon-snapchat' -%}
                  <span class="visually-hidden">{{ 'general.social.links.snapchat' | t }}</span>
                </a>
              </li>
            {%- endif -%}
            {%- if settings.social_youtube_link != blank -%}
              <li class="list-social__item">
                <a href="{{ settings.social_youtube_link }}" class="link link--text list-social__link" aria-describedby="a11y-external-message">
                  {%- render 'icon-youtube' -%}
                  <span class="visually-hidden">{{ 'general.social.links.youtube' | t }}</span>
                </a>
              </li>
            {%- endif -%}
            {%- if settings.social_vimeo_link != blank -%}
              <li class="list-social__item">
                <a href="{{ settings.social_vimeo_link }}" class="link link--text list-social__link" aria-describedby="a11y-external-message">
                  {%- render 'icon-vimeo' -%}
                  <span class="visually-hidden">{{ 'general.social.links.vimeo' | t }}</span>
                </a>
              </li>
            {%- endif -%}
          </ul>
        {%- endif -%}
      </div>
    </div>
  {%- endif -%}

  <div class="footer__content-bottom">
    <div class="footer__content-bottom-wrapper page-width">
      <div class="footer__column footer__localization">
        {%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%}
          <noscript>
            {%- form 'localization', id: 'FooterCountryFormNoScript', class: 'localization-form' -%}
              <div class="localization-form__select">
                <h2 class="visually-hidden" id="FooterCountryLabelNoScript">{{ 'localization.country_label' | t }}</h2>
                <select class="localization-selector link" name="country_code" aria-labelledby="FooterCountryLabelNoScript">
                  {%- for country in localization.available_countries -%}
                    <option value="{{ country.iso_code }}" {%- if country.iso_code == localization.country.iso_code %} selected{% endif %}>
                      {{ country.name }} ({{ country.currency.iso_code }} {{ country.currency.symbol }})
                    </option>
                  {%- endfor -%}
                </select>
                {% render 'icon-caret' %}
              </div>
              <button class="button button--tertiary">{{ 'localization.update_country' | t }}</button>
            {%- endform -%}
          </noscript>
          <localization-form>
            {%- form 'localization', id: 'FooterCountryForm', class: 'localization-form' -%}
              <div class="no-js-hidden">
                <h2 class="caption-large" id="FooterCountryLabel">{{ 'localization.country_label' | t }}</h2>
                <div class="disclosure">
                  <button type="button" class="disclosure__button localization-form__select localization-selector link link--text caption-large" aria-expanded="false" aria-controls="FooterCountryList" aria-describedby="FooterCountryLabel">
                    {{ localization.country.name }} ({{ localization.country.currency.iso_code }} {{ localization.country.currency.symbol }})
                    {% render 'icon-caret' %}
                  </button>
                  <ul id="FooterCountryList" role="list" class="disclosure__list list-unstyled" hidden>
                    {%- for country in localization.available_countries -%}
                      <li class="disclosure__item" tabindex="-1">
                        <a class="link link--text disclosure__link caption-large{% if country.iso_code == localization.country.iso_code %} disclosure__link--active{% endif %} focus-inset" href="#"{% if country.iso_code == localization.country.iso_code %} aria-current="true"{% endif %} data-value="{{ country.iso_code }}">
                          {{ country.name }} <span class="localization-form__currency">({{ country.currency.iso_code }} {{ country.currency.symbol }})</span>
                        </a>
                      </li>
                    {%- endfor -%}
                  </ul>
                </div>
                <input type="hidden" name="country_code" value="{{ localization.country.iso_code }}">
              </div>
            {%- endform -%}
          </localization-form>
        {%- endif -%}

        {%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%}
          <noscript>
            {%- form 'localization', id: 'FooterLanguageFormNoScript', class: 'localization-form' -%}
              <div class="localization-form__select">
                <h2 class="visually-hidden" id="FooterLanguageLabelNoScript">{{ 'localization.language_label' | t }}</h2>
                <select class="localization-selector link" name="locale_code" aria-labelledby="FooterLanguageLabelNoScript">
                  {%- for language in localization.available_languages -%}
                    <option value="{{ language.iso_code }}" lang="{{ language.iso_code }}" {%- if language.iso_code == localization.language.iso_code %} selected{% endif %}>
                      {{ language.endonym_name | capitalize }}
                    </option>
                  {%- endfor -%}
                </select>
                {% render 'icon-caret' %}
              </div>
              <button class="button button--tertiary">{{ 'localization.update_language' | t }}</button>
            {%- endform -%}
          </noscript>

          <localization-form>
            {%- form 'localization', id: 'FooterLanguageForm', class: 'localization-form' -%}
              <div class="no-js-hidden">
                <h2 class="caption-large" id="FooterLanguageLabel">{{ 'localization.language_label' | t }}</h2>
                <div class="disclosure">
                  <button type="button" class="disclosure__button localization-form__select localization-selector link link--text caption-large" aria-expanded="false" aria-controls="FooterLanguageList" aria-describedby="FooterLanguageLabel">
                    {{ localization.language.endonym_name | capitalize }}
                    {% render 'icon-caret' %}
                  </button>
                  <ul id="FooterLanguageList" role="list" class="disclosure__list list-unstyled" hidden>
                    {%- for language in localization.available_languages -%}
                      <li class="disclosure__item" tabindex="-1">
                        <a class="link link--text disclosure__link caption-large{% if language.iso_code == localization.language.iso_code %} disclosure__link--active{% endif %} focus-inset" href="#" hreflang="{{ language.iso_code }}" lang="{{ language.iso_code }}"{% if language.iso_code == localization.language.iso_code %} aria-current="true"{% endif %} data-value="{{ language.iso_code }}">
                          {{ language.endonym_name | capitalize }}
                        </a>
                      </li>
                    {%- endfor -%}
                  </ul>
                </div>
                <input type="hidden" name="locale_code" value="{{ localization.language.iso_code }}">
              </div>
            {%- endform -%}
          </localization-form>
        {%- endif -%}
      </div>
      <div class="footer__column footer__column--info">
        {%- if section.settings.payment_enable -%}
          <div class="footer__payment">
            <span class="visually-hidden">{{ 'sections.footer.payment' | t }}</span>
            <ul class="list list-payment" role="list">
              {%- for type in shop.enabled_payment_types -%}
                <li class="list-payment__item">
                  {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
                </li>
              {%- endfor -%}
            </ul>
          </div>
        {%- endif -%}
        <div class="footer__copyright caption">
          <small class="copyright__content">&copy; {{ 'now' | date: "%Y" }}, {{ shop.name | link_to: routes.root_url }}</small>
          <small class="copyright__content">{{ powered_by_link }}</small>
        </div>
      </div>
    </div>
  </div>
</footer>

{% javascript %}
  class LocalizationForm extends HTMLElement {
    constructor() {
      super();
      this.elements = {
        input: this.querySelector('input[name="locale_code"], input[name="country_code"]'),
        button: this.querySelector('button'),
        panel: this.querySelector('ul'),
      };
      this.elements.button.addEventListener('click', this.openSelector.bind(this));
      this.elements.button.addEventListener('focusout', this.closeSelector.bind(this));
      this.addEventListener('keyup', this.onContainerKeyUp.bind(this));

      this.querySelectorAll('a').forEach(item => item.addEventListener('click', this.onItemClick.bind(this)));
    }

    hidePanel() {
      this.elements.button.setAttribute('aria-expanded', 'false');
      this.elements.panel.setAttribute('hidden', true);
    }

    onContainerKeyUp(event) {
      if (event.code.toUpperCase() !== 'ESCAPE') return;

      this.hidePanel();
      this.elements.button.focus();
    }

    onItemClick(event) {
      event.preventDefault();
      const form = this.querySelector('form');
      this.elements.input.value = event.currentTarget.dataset.value;
      if (form) form.submit();
    }

    openSelector() {
      this.elements.button.focus();
      this.elements.panel.toggleAttribute('hidden');
      this.elements.button.setAttribute('aria-expanded', (this.elements.button.getAttribute('aria-expanded') === 'false').toString());
    }

    closeSelector(event) {
      const shouldClose = event.relatedTarget && event.relatedTarget.nodeName === 'BUTTON';
      if (event.relatedTarget === null || shouldClose) {
        this.hidePanel();
      }
    }
  }

  customElements.define('localization-form', LocalizationForm);
{% endjavascript %}

{% schema %}
{
  "name": "t:sections.footer.name",
  "blocks": [
    {
      "type": "link_list",
      "name": "t:sections.footer.blocks.link_list.name",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "Quick links",
          "label": "t:sections.footer.blocks.link_list.settings.heading.label",
          "info": "t:sections.footer.blocks.link_list.settings.heading.info"
        },
        {
          "type": "link_list",
          "id": "menu",
          "default": "footer",
          "label": "t:sections.footer.blocks.link_list.settings.menu.label",
          "info": "t:sections.footer.blocks.link_list.settings.menu.info"
        }
      ]
    },
    {
      "type": "text",
      "name": "t:sections.footer.blocks.text.name",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "Heading",
          "label": "t:sections.footer.blocks.text.settings.heading.label"
        },
        {
          "type": "richtext",
          "id": "subtext",
          "default": "<p>Share store details, promotions, or brand content with your customers.</p>",
          "label": "t:sections.footer.blocks.text.settings.subtext.label"
        }
      ]
    },
    {
      "type": "image",
      "name": "Image",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "range",
          "id": "image_width",
          "min": 50,
          "max": 200,
          "step": 5,
          "unit": "px",
          "label": "Image width",
          "default": 100
        },
        {
          "type": "select",
          "id": "alignment",
          "label": "Image alignment on large screen",
          "options": [
            {
              "value": "",
              "label": "Left"
            },
            {
              "value": "center",
              "label": "Center"
            },
            {
              "value": "right",
              "label": "Right"
            }
          ],
          "default": "center"
        }
      ]
    }
  ],
  "settings": [
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.footer.settings.color_scheme.options__1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.footer.settings.color_scheme.options__2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.footer.settings.color_scheme.options__3.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.footer.settings.color_scheme.options__4.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.footer.settings.color_scheme.options__5.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.footer.settings.color_scheme.label"
    },
    {
      "type": "header",
      "content": "t:sections.footer.settings.header__1.content",
      "info": "t:sections.footer.settings.header__1.info"
    },
    {
      "type": "checkbox",
      "id": "newsletter_enable",
      "default": true,
      "label": "t:sections.footer.settings.newsletter_enable.label"
    },
    {
      "type": "text",
      "id": "newsletter_heading",
      "default": "Subscribe to our emails",
      "label": "t:sections.footer.settings.newsletter_heading.label"
    },
    {
      "type": "header",
      "content": "t:sections.footer.settings.header__2.content",
      "info": "t:sections.footer.settings.header__2.info"
    },
    {
      "type": "checkbox",
      "id": "show_social",
      "default": false,
      "label": "t:sections.footer.settings.show_social.label"
    },
    {
      "type": "header",
      "content": "t:sections.footer.settings.header__3.content",
      "info": "t:sections.footer.settings.header__4.info"
    },
    {
      "type": "checkbox",
      "id": "enable_country_selector",
      "default": true,
      "label": "t:sections.footer.settings.enable_country_selector.label"
    },
    {
      "type": "header",
      "content": "t:sections.footer.settings.header__5.content",
      "info": "t:sections.footer.settings.header__6.info"
    },
    {
      "type": "checkbox",
      "id": "enable_language_selector",
      "default": true,
      "label": "t:sections.footer.settings.enable_language_selector.label"
    },
    {
      "type": "header",
      "content": "t:sections.footer.settings.header__7.content"
    },
    {
      "type": "checkbox",
      "id": "payment_enable",
      "default": true,
      "label": "t:sections.footer.settings.payment_enable.label"
    }
  ],
  "default": {
    "blocks": [
      {
        "type": "link_list"
      },
      {
        "type": "text"
      }
    ]
  }
}
{% endschema %}

If I understand correctly, is this what needs to be changed?

Thanks

[TomKos]

Hi @Zens, try it and let me know if the solution below works for you 🙂

Go to footer.liquid this code and look for this code:

{% schema %}
{
  "name": "t:sections.footer.name",
  "blocks": [

Right under it paste the following: 

{
      "type": "html",
      "name": "HTML",
      "settings": [
        {
          "type": "html",
          "id": "section_html",
          "default": "your code here",
          "label": "HTML",
          "info": "Insert custom HTML"
        }
      ]
    },

Now look for "{%- case block.type -%}" in the same footer.liquid file. Paste the following code right underneath.

 {%- when 'html' -%}
                  <div class="footer-block__details-content rte">
                    {{ block.settings.section_html }}
                  </div>

Now save the file, go to customize -> footer and you should be able to add your custom HTML block.

[Zens]

Hi @TomKos 

I tried to write your code but it always returns the empty box to me.
Whatever I write in the box you don't see anything on the site.

I remind you that the theme is the Dawn.

This is all the footer.liquid code that I changed with your suggestion.

the site is called

https://rivivonetdawn.myshopify.com/

this is the password 123456

{% comment %}theme-check-disable UndefinedObject{% endcomment %}
{{ 'section-footer.css' | asset_url | stylesheet_tag }}
<link rel="stylesheet" href="{{ 'component-newsletter.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-list-menu.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-list-payment.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-list-social.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-rte.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'disclosure.css' | asset_url }}" media="print" onload="this.media='all'">

<noscript>{{ 'component-newsletter.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-list-menu.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-list-payment.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-list-social.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-rte.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'disclosure.css' | asset_url | stylesheet_tag }}</noscript>

<footer class="footer color-{{ section.settings.color_scheme }} gradient">
  {%- if section.blocks.size > 0 or section.settings.newsletter_enable or section.settings.show_social -%}
    <div class="footer__content-top page-width">
      {%- if section.blocks.size > 0 -%}
        {%- liquid
          if section.blocks.size == 9
            assign footer_grid_class = 'grid--3-col-tablet'
          elsif section.blocks.size > 6
            assign footer_grid_class = 'grid--4-col-desktop'
          elsif section.blocks.size > 4
            assign footer_grid_class = 'grid--3-col-tablet'
          endif
        -%}
        <div class="footer__blocks-wrapper grid grid--1-col grid--2-col grid--4-col-tablet {{ footer_grid_class }}">
          {%- for block in section.blocks -%}
            <div class="footer-block grid__item{% if block.type == 'link_list' and block.settings.heading != blank %} footer-block--menu{% endif %}" {{ block.shopify_attributes }}>
              {%- if block.settings.heading != blank -%}
                <h2 class="footer-block__heading">{{- block.settings.heading | escape -}}</h2>
              {%- endif -%}

              {%- case block.type -%}
                {%- when 'text' -%}
                  <div class="footer-block__details-content rte">
                    {{ block.settings.subtext }}
                  </div>
                {%- when 'link_list' -%}
                  {%- if block.settings.menu != blank and block.settings.heading != blank -%}
                    <ul class="footer-block__details-content list-unstyled">
                      {%- for link in block.settings.menu.links -%}
                        <li>
                          <a href="{{ link.url }}" class="link link--text list-menu__item list-menu__item--link{% if link.active %} list-menu__item--active{% endif %}">
                            {{ link.title }}
                          </a>
                        </li>
                      {%- endfor -%}
                    </ul>
                  {%- endif -%}
                {%- when 'image' -%}
                  <div class="footer-block__details-content footer-block-image {{ block.settings.alignment }}">
                    {%- if block.settings.image != blank -%}
                      {%- assign image_size = block.settings.image_width | append: 'x' -%}
                      <img
                        srcset= "{{ block.settings.image | img_url: image_size }}, {{ block.settings.image | img_url: image_size, scale: 2 }} 2x"
                        src="{{ block.settings.image | img_url: '400x' }}"
                        alt="{{ block.settings.image.alt | escape }}"
                        loading="lazy"
                        width="{{ block.settings.image.width }}"
                        height="{{ block.settings.image.height }}"
                        style="max-width: min(100%, {{ block.settings.image_width }}px);"
                      >
                    {%- else -%}
                      {{ 'image' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
                    {%- endif -%}
                  </div>
                {%- endcase -%}
            </div>
          {%- endfor -%}
        </div>
      {%- endif -%}

      <div class="footer-block--newsletter">
        {%- if section.settings.newsletter_enable -%}
          <div class="footer-block__newsletter">
            {%- if section.settings.newsletter_heading != blank -%}
              <h2 class="footer-block__heading">{{ section.settings.newsletter_heading | escape }}</h2>
            {%- endif -%}
            {%- form 'customer', id: 'ContactFooter', class: 'footer__newsletter newsletter-form' -%}
              <input type="hidden" name="contact[tags]" value="newsletter">
              <div class="newsletter-form__field-wrapper">
                <div class="field">
                  <input
                    id="NewsletterForm--{{ section.id }}"
                    type="email"
                    name="contact[email]"
                    class="field__input"
                    value="{{ form.email }}"
                    aria-required="true"
                    autocorrect="off"
                    autocapitalize="off"
                    autocomplete="email"
                    {% if form.errors %}
                      autofocus
                      aria-invalid="true"
                      aria-describedby="ContactFooter-error"
                    {% elsif form.posted_successfully? %}
                      aria-describedby="ContactFooter-success"
                    {% endif %}
                    placeholder="{{ 'newsletter.label' | t }}"
                    required
                  >
                  <label class="field__label" for="NewsletterForm--{{ section.id }}">
                    {{ 'newsletter.label' | t }}
                  </label>
                  <button type="submit" class="newsletter-form__button field__button" name="commit" id="Subscribe" aria-label="{{ 'newsletter.button_label' | t }}">
                    {% render 'icon-arrow' %}
                  </button>
                </div>
                {%- if form.errors -%}
                  <small class="newsletter-form__message form__message" id="ContactFooter-error">{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</small>
                {%- endif -%}
              </div>
              {%- if form.posted_successfully? -%}
                <h3 class="newsletter-form__message newsletter-form__message--success form__message" id="ContactFooter-success" tabindex="-1" autofocus>{% render 'icon-success' %}{{ 'newsletter.success' | t }}</h3>
              {%- endif -%}
            {%- endform -%}
          </div>
        {%- endif -%}

        {%- if section.settings.show_social -%}
          <ul class="footer__list-social list-unstyled list-social" role="list">
            {%- if settings.social_twitter_link != blank -%}
              <li class="list-social__item">
                <a href="{{ settings.social_twitter_link }}" class="link link--text list-social__link" >
                  {%- render 'icon-twitter' -%}
                  <span class="visually-hidden">{{ 'general.social.links.twitter' | t }}</span>
                </a>
              </li>
            {%- endif -%}
            {%- if settings.social_facebook_link != blank -%}
              <li class="list-social__item">
                <a href="{{ settings.social_facebook_link }}" class="link link--text list-social__link" >
                  {%- render 'icon-facebook' -%}
                  <span class="visually-hidden">{{ 'general.social.links.facebook' | t }}</span>
                </a>
              </li>
            {%- endif -%}
            {%- if settings.social_pinterest_link != blank -%}
              <li class="list-social__item">
                <a href="{{ settings.social_pinterest_link }}" class="link link--text list-social__link" >
                  {%- render 'icon-pinterest' -%}
                  <span class="visually-hidden">{{ 'general.social.links.pinterest' | t }}</span>
                </a>
              </li>
            {%- endif -%}
            {%- if settings.social_instagram_link != blank -%}
              <li class="list-social__item">
                <a href="{{ settings.social_instagram_link }}" class="link link--text list-social__link" >
                  {%- render 'icon-instagram' -%}
                  <span class="visually-hidden">{{ 'general.social.links.instagram' | t }}</span>
                </a>
              </li>
            {%- endif -%}
            {%- if settings.social_tiktok_link != blank -%}
              <li class="list-social__item">
                <a href="{{ settings.social_tiktok_link }}" class="link link--text list-social__link" >
                  {%- render 'icon-tiktok' -%}
                  <span class="visually-hidden">{{ 'general.social.links.tiktok' | t }}</span>
                </a>
              </li>
            {%- endif -%}
            {%- if settings.social_tumblr_link != blank -%}
              <li class="list-social__item">
                <a href="{{ settings.social_tumblr_link }}" class="link link--text list-social__link" >
                  {%- render 'icon-tumblr' -%}
                  <span class="visually-hidden">{{ 'general.social.links.tumblr' | t }}</span>
                </a>
              </li>
            {%- endif -%}
            {%- if settings.social_snapchat_link != blank -%}
              <li class="list-social__item">
                <a href="{{ settings.social_snapchat_link }}" class="link link--text list-social__link" >
                  {%- render 'icon-snapchat' -%}
                  <span class="visually-hidden">{{ 'general.social.links.snapchat' | t }}</span>
                </a>
              </li>
            {%- endif -%}
            {%- if settings.social_youtube_link != blank -%}
              <li class="list-social__item">
                <a href="{{ settings.social_youtube_link }}" class="link link--text list-social__link" >
                  {%- render 'icon-youtube' -%}
                  <span class="visually-hidden">{{ 'general.social.links.youtube' | t }}</span>
                </a>
              </li>
            {%- endif -%}
            {%- if settings.social_vimeo_link != blank -%}
              <li class="list-social__item">
                <a href="{{ settings.social_vimeo_link }}" class="link link--text list-social__link" >
                  {%- render 'icon-vimeo' -%}
                  <span class="visually-hidden">{{ 'general.social.links.vimeo' | t }}</span>
                </a>
              </li>
            {%- endif -%}
          </ul>
        {%- endif -%}
      </div>
    </div>
  {%- endif -%}

  <div class="footer__content-bottom">
    <div class="footer__content-bottom-wrapper page-width">
      <div class="footer__column footer__localization">
        {%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%}
          <noscript>
            {%- form 'localization', id: 'FooterCountryFormNoScript', class: 'localization-form' -%}
              <div class="localization-form__select">
                <h2 class="visually-hidden" id="FooterCountryLabelNoScript">{{ 'localization.country_label' | t }}</h2>
                <select class="localization-selector link" name="country_code" aria-labelledby="FooterCountryLabelNoScript">
                  {%- for country in localization.available_countries -%}
                    <option value="{{ country.iso_code }}" {%- if country.iso_code == localization.country.iso_code %} selected{% endif %}>
                      {{ country.name }} ({{ country.currency.iso_code }} {{ country.currency.symbol }})
                    </option>
                  {%- endfor -%}
                </select>
                {% render 'icon-caret' %}
              </div>
              <button class="button button--tertiary">{{ 'localization.update_country' | t }}</button>
            {%- endform -%}
          </noscript>
          <localization-form>
            {%- form 'localization', id: 'FooterCountryForm', class: 'localization-form' -%}
              <div class="no-js-hidden">
                <h2 class="caption-large" id="FooterCountryLabel">{{ 'localization.country_label' | t }}</h2>
                <div class="disclosure">
                  <button type="button" class="disclosure__button localization-form__select localization-selector link link--text caption-large" aria-expanded="false" aria-controls="FooterCountryList" aria-describedby="FooterCountryLabel">
                    {{ localization.country.name }} ({{ localization.country.currency.iso_code }} {{ localization.country.currency.symbol }})
                    {% render 'icon-caret' %}
                  </button>
                  <ul id="FooterCountryList" role="list" class="disclosure__list list-unstyled" hidden>
                    {%- for country in localization.available_countries -%}
                      <li class="disclosure__item" tabindex="-1">
                        <a class="link link--text disclosure__link caption-large{% if country.iso_code == localization.country.iso_code %} disclosure__link--active{% endif %} focus-inset" href="#"{% if country.iso_code == localization.country.iso_code %} aria-current="true"{% endif %} data-value="{{ country.iso_code }}">
                          {{ country.name }} <span class="localization-form__currency">({{ country.currency.iso_code }} {{ country.currency.symbol }})</span>
                        </a>
                      </li>
                    {%- endfor -%}
                  </ul>
                </div>
                <input type="hidden" name="country_code" value="{{ localization.country.iso_code }}">
              </div>
            {%- endform -%}
          </localization-form>
        {%- endif -%}

        {%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%}
          <noscript>
            {%- form 'localization', id: 'FooterLanguageFormNoScript', class: 'localization-form' -%}
              <div class="localization-form__select">
                <h2 class="visually-hidden" id="FooterLanguageLabelNoScript">{{ 'localization.language_label' | t }}</h2>
                <select class="localization-selector link" name="locale_code" aria-labelledby="FooterLanguageLabelNoScript">
                  {%- for language in localization.available_languages -%}
                    <option value="{{ language.iso_code }}" lang="{{ language.iso_code }}" {%- if language.iso_code == localization.language.iso_code %} selected{% endif %}>
                      {{ language.endonym_name | capitalize }}
                    </option>
                  {%- endfor -%}
                </select>
                {% render 'icon-caret' %}
              </div>
              <button class="button button--tertiary">{{ 'localization.update_language' | t }}</button>
            {%- endform -%}
          </noscript>

          <localization-form>
            {%- form 'localization', id: 'FooterLanguageForm', class: 'localization-form' -%}
              <div class="no-js-hidden">
                <h2 class="caption-large" id="FooterLanguageLabel">{{ 'localization.language_label' | t }}</h2>
                <div class="disclosure">
                  <button type="button" class="disclosure__button localization-form__select localization-selector link link--text caption-large" aria-expanded="false" aria-controls="FooterLanguageList" aria-describedby="FooterLanguageLabel">
                    {{ localization.language.endonym_name | capitalize }}
                    {% render 'icon-caret' %}
                  </button>
                  <ul id="FooterLanguageList" role="list" class="disclosure__list list-unstyled" hidden>
                    {%- for language in localization.available_languages -%}
                      <li class="disclosure__item" tabindex="-1">
                        <a class="link link--text disclosure__link caption-large{% if language.iso_code == localization.language.iso_code %} disclosure__link--active{% endif %} focus-inset" href="#" hreflang="{{ language.iso_code }}" lang="{{ language.iso_code }}"{% if language.iso_code == localization.language.iso_code %} aria-current="true"{% endif %} data-value="{{ language.iso_code }}">
                          {{ language.endonym_name | capitalize }}
                        </a>
                      </li>
                    {%- endfor -%}
                  </ul>
                </div>
                <input type="hidden" name="locale_code" value="{{ localization.language.iso_code }}">
              </div>
            {%- endform -%}
          </localization-form>
        {%- endif -%}
      </div>
      <div class="footer__column footer__column--info">
        {%- if section.settings.payment_enable -%}
          <div class="footer__payment">
            <span class="visually-hidden">{{ 'sections.footer.payment' | t }}</span>
            <ul class="list list-payment" role="list">
              {%- for type in shop.enabled_payment_types -%}
                <li class="list-payment__item">
                  {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
                </li>
              {%- endfor -%}
            </ul>
          </div>
        {%- endif -%}
        <div class="footer__copyright caption">
          <small class="copyright__content">&copy; {{ 'now' | date: "%Y" }}, {{ shop.name | link_to: routes.root_url }}</small>
          <small class="copyright__content">{{ powered_by_link }}</small>
        </div>
      </div>
    </div>
  </div>
</footer>

{% javascript %}
  class LocalizationForm extends HTMLElement {
    constructor() {
      super();
      this.elements = {
        input: this.querySelector('input[name="locale_code"], input[name="country_code"]'),
        button: this.querySelector('button'),
        panel: this.querySelector('ul'),
      };
      this.elements.button.addEventListener('click', this.openSelector.bind(this));
      this.elements.button.addEventListener('focusout', this.closeSelector.bind(this));
      this.addEventListener('keyup', this.onContainerKeyUp.bind(this));

      this.querySelectorAll('a').forEach(item => item.addEventListener('click', this.onItemClick.bind(this)));
    }

    hidePanel() {
      this.elements.button.setAttribute('aria-expanded', 'false');
      this.elements.panel.setAttribute('hidden', true);
    }

    onContainerKeyUp(event) {
      if (event.code.toUpperCase() !== 'ESCAPE') return;

      this.hidePanel();
      this.elements.button.focus();
    }

    onItemClick(event) {
      event.preventDefault();
      const form = this.querySelector('form');
      this.elements.input.value = event.currentTarget.dataset.value;
      if (form) form.submit();
    }

    openSelector() {
      this.elements.button.focus();
      this.elements.panel.toggleAttribute('hidden');
      this.elements.button.setAttribute('aria-expanded', (this.elements.button.getAttribute('aria-expanded') === 'false').toString());
    }

    closeSelector(event) {
      const shouldClose = event.relatedTarget && event.relatedTarget.nodeName === 'BUTTON';
      if (event.relatedTarget === null || shouldClose) {
        this.hidePanel();
      }
    }
  }

  customElements.define('localization-form', LocalizationForm);
{% endjavascript %}

{% schema %}
{
  "name": "t:sections.footer.name",
  "blocks": [

{
"name": "custom liquid",
"type": "custom_liquid",
"settings": [
{
"type": "liquid",
"id": "custom_liquid",
"label": "t:sections.custom-liquid.settings.custom_liquid.label",
"info": "t:sections.custom-liquid.settings.custom_liquid.info"
}
]
},

{
  "type": "html_content",
  "name": "HTML Content",
  "settings": [
    {
      "type": "html",
      "id": "html_area",
      "label": "Custom HTML",
      "default": "<div><p>Some HTML content</p></div>"
    }
  ]
},

{
      "type": "link_list",
      "name": "t:sections.footer.blocks.link_list.name",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "Quick links",
          "label": "t:sections.footer.blocks.link_list.settings.heading.label",
          "info": "t:sections.footer.blocks.link_list.settings.heading.info"
        },
        {
          "type": "link_list",
          "id": "menu",
          "default": "footer",
          "label": "t:sections.footer.blocks.link_list.settings.menu.label",
          "info": "t:sections.footer.blocks.link_list.settings.menu.info"
        }
      ]
    },
    {
      "type": "text",
      "name": "t:sections.footer.blocks.text.name",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "Heading",
          "label": "t:sections.footer.blocks.text.settings.heading.label"
        },
        {
          "type": "richtext",
          "id": "subtext",
          "default": "<p>Share store details, promotions, or brand content with your customers.</p>",
          "label": "t:sections.footer.blocks.text.settings.subtext.label"
        }
      ]
    },
    {
      "type": "image",
      "name": "Image",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "range",
          "id": "image_width",
          "min": 50,
          "max": 200,
          "step": 5,
          "unit": "px",
          "label": "Image width",
          "default": 100
        },
        {
          "type": "select",
          "id": "alignment",
          "label": "Image alignment on large screen",
          "options": [
            {
              "value": "",
              "label": "Left"
            },
            {
              "value": "center",
              "label": "Center"
            },
            {
              "value": "right",
              "label": "Right"
            }
          ],
          "default": "center"
        }
      ]
    }
  ],
  "settings": [
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.footer.settings.color_scheme.options__1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.footer.settings.color_scheme.options__2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.footer.settings.color_scheme.options__3.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.footer.settings.color_scheme.options__4.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.footer.settings.color_scheme.options__5.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.footer.settings.color_scheme.label"
    },
    {
      "type": "header",
      "content": "t:sections.footer.settings.header__1.content",
      "info": "t:sections.footer.settings.header__1.info"
    },
    {
      "type": "checkbox",
      "id": "newsletter_enable",
      "default": true,
      "label": "t:sections.footer.settings.newsletter_enable.label"
    },
    {
      "type": "text",
      "id": "newsletter_heading",
      "default": "Subscribe to our emails",
      "label": "t:sections.footer.settings.newsletter_heading.label"
    },
    {
      "type": "header",
      "content": "t:sections.footer.settings.header__2.content",
      "info": "t:sections.footer.settings.header__2.info"
    },
    {
      "type": "checkbox",
      "id": "show_social",
      "default": false,
      "label": "t:sections.footer.settings.show_social.label"
    },
    {
      "type": "header",
      "content": "t:sections.footer.settings.header__3.content",
      "info": "t:sections.footer.settings.header__4.info"
    },
    {
      "type": "checkbox",
      "id": "enable_country_selector",
      "default": true,
      "label": "t:sections.footer.settings.enable_country_selector.label"
    },
    {
      "type": "header",
      "content": "t:sections.footer.settings.header__5.content",
      "info": "t:sections.footer.settings.header__6.info"
    },
    {
      "type": "checkbox",
      "id": "enable_language_selector",
      "default": true,
      "label": "t:sections.footer.settings.enable_language_selector.label"
    },
    {
      "type": "header",
      "content": "t:sections.footer.settings.header__7.content"
    },
    {
      "type": "checkbox",
      "id": "payment_enable",
      "default": true,
      "label": "t:sections.footer.settings.payment_enable.label"
    }
  ],
  "default": {
    "blocks": [
      {
        "type": "link_list"
      },
      {
        "type": "text"
      }
    ]
  }
}
{% endschema %}

Thanks for your patience.

[NicelyNZ]

Brilliant @TomKos - nice elegant solution, explained clearly.

Thanks so much.

[Jmcclain0129]

@TomKos Perfect solution, took less than 5 minutes to integrate. Thanks, J

[made4Uo]

Hi @Zens,

Here's how you do it. In your theme, go to Actions, then Edit code. At the left find the Section folder and open the footer.liquid. You have to add the custom liquid as a block. To do so, you need to add this code below before the "blocks": [ at your schema. Let me know if it works for you

{
"name": "custom liquid",
"type": "custom_liquid",
"settings": [
{
"type": "liquid",
"id": "custom_liquid",
"label": "t:sections.custom-liquid.settings.custom_liquid.label",
"info": "t:sections.custom-liquid.settings.custom_liquid.info"
}
]
},

Your footer {% schema %} should look like this:

{% schema %}
{
"name": "t:sections.footer.name",
"blocks": [
{
"name": "custom liquid",
"type": "custom_liquid",
"settings": [
{
"type": "liquid",
"id": "custom_liquid",
"label": "t:sections.custom-liquid.settings.custom_liquid.label",
"info": "t:sections.custom-liquid.settings.custom_liquid.info"
}
]
},
{
"type": "link_list",
"name": "t:sections.footer.blocks.link_list.name",
"settings": [
{
"type": "text",
"id": "heading",
"default": "Quick links",
"label": "t:sections.footer.blocks.link_list.settings.heading.label",
"info": "t:sections.footer.blocks.link_list.settings.heading.info"
},
{
"type": "link_list",
"id": "menu",
"default": "footer",
"label": "t:sections.footer.blocks.link_list.settings.menu.label",
"info": "t:sections.footer.blocks.link_list.settings.menu.info"
}
]
},
{
"type": "text",
"name": "t:sections.footer.blocks.text.name",
"settings": [
{
"type": "text",
"id": "heading",
"default": "Heading",
"label": "t:sections.footer.blocks.text.settings.heading.label"
},
{
"type": "richtext",
"id": "subtext",
"default": "<p>Share store details, promotions, or brand content with your customers.</p>",
"label": "t:sections.footer.blocks.text.settings.subtext.label"
}
]
},
{
"type": "image",
"name": "Image",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "range",
"id": "image_width",
"min": 50,
"max": 200,
"step": 5,
"unit": "px",
"label": "Image width",
"default": 100
},
{
"type": "select",
"id": "alignment",
"label": "Image alignment on large screen",
"options": [
{
"value": "",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center"
}
]
}
],
"settings": [
{
"type": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.footer.settings.color_scheme.options__1.label"
},
{
"value": "accent-2",
"label": "t:sections.footer.settings.color_scheme.options__2.label"
},
{
"value": "background-1",
"label": "t:sections.footer.settings.color_scheme.options__3.label"
},
{
"value": "background-2",
"label": "t:sections.footer.settings.color_scheme.options__4.label"
},
{
"value": "inverse",
"label": "t:sections.footer.settings.color_scheme.options__5.label"
}
],
"default": "background-1",
"label": "t:sections.footer.settings.color_scheme.label"
},
{
"type": "header",
"content": "t:sections.footer.settings.header__1.content",
"info": "t:sections.footer.settings.header__1.info"
},
{
"type": "checkbox",
"id": "newsletter_enable",
"default": true,
"label": "t:sections.footer.settings.newsletter_enable.label"
},
{
"type": "text",
"id": "newsletter_heading",
"default": "Subscribe to our emails",
"label": "t:sections.footer.settings.newsletter_heading.label"
},
{
"type": "header",
"content": "t:sections.footer.settings.header__2.content",
"info": "t:sections.footer.settings.header__2.info"
},
{
"type": "checkbox",
"id": "show_social",
"default": false,
"label": "t:sections.footer.settings.show_social.label"
},
{
"type": "header",
"content": "t:sections.footer.settings.header__3.content",
"info": "t:sections.footer.settings.header__4.info"
},
{
"type": "checkbox",
"id": "enable_country_selector",
"default": true,
"label": "t:sections.footer.settings.enable_country_selector.label"
},
{
"type": "header",
"content": "t:sections.footer.settings.header__5.content",
"info": "t:sections.footer.settings.header__6.info"
},
{
"type": "checkbox",
"id": "enable_language_selector",
"default": true,
"label": "t:sections.footer.settings.enable_language_selector.label"
},
{
"type": "header",
"content": "t:sections.footer.settings.header__7.content"
},
{
"type": "checkbox",
"id": "payment_enable",
"default": true,
"label": "t:sections.footer.settings.payment_enable.label"
}
],
"default": {
"blocks": [
{
"type": "link_list"
},
{
"type": "text"
}
]
}
}
{% endschema %}

[Zens]

Hi @made4Uo Thank you for your suggestion.
Below I copied all the code from the footer.liquid file with your changes, but it doesn't work. When I write in the box, nothing is seen on the site.

Unfortunately, as you can see, in this footer file, the HTML box that I wrote according to the suggestions of other users still appears and which now does not make me remove it because it gives me this error

Error: New schema is incompatible with the current setting value. Valore non valido per il tipo nel blocco "a1aca5dd-5b5d-4aec-a730-fb5a88b32ebd". Il tipo deve essere definito nello schema.

{% comment %}theme-check-disable UndefinedObject{% endcomment %}
{{ 'section-footer.css' | asset_url | stylesheet_tag }}
<link rel="stylesheet" href="{{ 'component-newsletter.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-list-menu.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-list-payment.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-list-social.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-rte.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'disclosure.css' | asset_url }}" media="print" onload="this.media='all'">

<noscript>{{ 'component-newsletter.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-list-menu.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-list-payment.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-list-social.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-rte.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'disclosure.css' | asset_url | stylesheet_tag }}</noscript>

<footer class="footer color-{{ section.settings.color_scheme }} gradient">
  {%- if section.blocks.size > 0 or section.settings.newsletter_enable or section.settings.show_social -%}
    <div class="footer__content-top page-width">
      {%- if section.blocks.size > 0 -%}
        {%- liquid
          if section.blocks.size == 9
            assign footer_grid_class = 'grid--3-col-tablet'
          elsif section.blocks.size > 6
            assign footer_grid_class = 'grid--4-col-desktop'
          elsif section.blocks.size > 4
            assign footer_grid_class = 'grid--3-col-tablet'
          endif
        -%}
        <div class="footer__blocks-wrapper grid grid--1-col grid--2-col grid--4-col-tablet {{ footer_grid_class }}">
          {%- for block in section.blocks -%}
            <div class="footer-block grid__item{% if block.type == 'link_list' and block.settings.heading != blank %} footer-block--menu{% endif %}" {{ block.shopify_attributes }}>
              {%- if block.settings.heading != blank -%}
                <h2 class="footer-block__heading">{{- block.settings.heading | escape -}}</h2>
              {%- endif -%}

              {%- case block.type -%}
                
                {%- when 'link_list' -%}
                  {%- if block.settings.menu != blank and block.settings.heading != blank -%}
                    <ul class="footer-block__details-content list-unstyled">
                      {%- for link in block.settings.menu.links -%}
                        <li>
                          <a href="{{ link.url }}" class="link link--text list-menu__item list-menu__item--link{% if link.active %} list-menu__item--active{% endif %}">
                            {{ link.title }}
                          </a>
                        </li>
                      {%- endfor -%}
                    </ul>
                  {%- endif -%}
                {%- when 'image' -%}
                  <div class="footer-block__details-content footer-block-image {{ block.settings.alignment }}">
                    {%- if block.settings.image != blank -%}
                      {%- assign image_size = block.settings.image_width | append: 'x' -%}
                      <img
                        srcset= "{{ block.settings.image | img_url: image_size }}, {{ block.settings.image | img_url: image_size, scale: 2 }} 2x"
                        src="{{ block.settings.image | img_url: '400x' }}"
                        alt="{{ block.settings.image.alt | escape }}"
                        loading="lazy"
                        width="{{ block.settings.image.width }}"
                        height="{{ block.settings.image.height }}"
                        style="max-width: min(100%, {{ block.settings.image_width }}px);"
                      >
                    {%- else -%}
                      {{ 'image' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
                    {%- endif -%}
                  </div>
                {%- endcase -%}
            </div>
          {%- endfor -%}
        </div>
      {%- endif -%}

      <div class="footer-block--newsletter">
        {%- if section.settings.newsletter_enable -%}
          <div class="footer-block__newsletter">
            {%- if section.settings.newsletter_heading != blank -%}
              <h2 class="footer-block__heading">{{ section.settings.newsletter_heading | escape }}</h2>
            {%- endif -%}
            {%- form 'customer', id: 'ContactFooter', class: 'footer__newsletter newsletter-form' -%}
              <input type="hidden" name="contact[tags]" value="newsletter">
              <div class="newsletter-form__field-wrapper">
                <div class="field">
                  <input
                    id="NewsletterForm--{{ section.id }}"
                    type="email"
                    name="contact[email]"
                    class="field__input"
                    value="{{ form.email }}"
                    aria-required="true"
                    autocorrect="off"
                    autocapitalize="off"
                    autocomplete="email"
                    {% if form.errors %}
                      autofocus
                      aria-invalid="true"
                      aria-describedby="ContactFooter-error"
                    {% elsif form.posted_successfully? %}
                      aria-describedby="ContactFooter-success"
                    {% endif %}
                    placeholder="{{ 'newsletter.label' | t }}"
                    required
                  >
                  <label class="field__label" for="NewsletterForm--{{ section.id }}">
                    {{ 'newsletter.label' | t }}
                  </label>
                  <button type="submit" class="newsletter-form__button field__button" name="commit" id="Subscribe" aria-label="{{ 'newsletter.button_label' | t }}">
                    {% render 'icon-arrow' %}
                  </button>
                </div>
                {%- if form.errors -%}
                  <small class="newsletter-form__message form__message" id="ContactFooter-error">{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</small>
                {%- endif -%}
              </div>
              {%- if form.posted_successfully? -%}
                <h3 class="newsletter-form__message newsletter-form__message--success form__message" id="ContactFooter-success" tabindex="-1" autofocus>{% render 'icon-success' %}{{ 'newsletter.success' | t }}</h3>
              {%- endif -%}
            {%- endform -%}
          </div>
        {%- endif -%}

        {%- if section.settings.show_social -%}
          <ul class="footer__list-social list-unstyled list-social" role="list">
            {%- if settings.social_twitter_link != blank -%}
              <li class="list-social__item">
                <a href="{{ settings.social_twitter_link }}" class="link link--text list-social__link" >
                  {%- render 'icon-twitter' -%}
                  <span class="visually-hidden">{{ 'general.social.links.twitter' | t }}</span>
                </a>
              </li>
            {%- endif -%}
            {%- if settings.social_facebook_link != blank -%}
              <li class="list-social__item">
                <a href="{{ settings.social_facebook_link }}" class="link link--text list-social__link" >
                  {%- render 'icon-facebook' -%}
                  <span class="visually-hidden">{{ 'general.social.links.facebook' | t }}</span>
                </a>
              </li>
            {%- endif -%}
            {%- if settings.social_pinterest_link != blank -%}
              <li class="list-social__item">
                <a href="{{ settings.social_pinterest_link }}" class="link link--text list-social__link" >
                  {%- render 'icon-pinterest' -%}
                  <span class="visually-hidden">{{ 'general.social.links.pinterest' | t }}</span>
                </a>
              </li>
            {%- endif -%}
            {%- if settings.social_instagram_link != blank -%}
              <li class="list-social__item">
                <a href="{{ settings.social_instagram_link }}" class="link link--text list-social__link" >
                  {%- render 'icon-instagram' -%}
                  <span class="visually-hidden">{{ 'general.social.links.instagram' | t }}</span>
                </a>
              </li>
            {%- endif -%}
            {%- if settings.social_tiktok_link != blank -%}
              <li class="list-social__item">
                <a href="{{ settings.social_tiktok_link }}" class="link link--text list-social__link" >
                  {%- render 'icon-tiktok' -%}
                  <span class="visually-hidden">{{ 'general.social.links.tiktok' | t }}</span>
                </a>
              </li>
            {%- endif -%}
            {%- if settings.social_tumblr_link != blank -%}
              <li class="list-social__item">
                <a href="{{ settings.social_tumblr_link }}" class="link link--text list-social__link" >
                  {%- render 'icon-tumblr' -%}
                  <span class="visually-hidden">{{ 'general.social.links.tumblr' | t }}</span>
                </a>
              </li>
            {%- endif -%}
            {%- if settings.social_snapchat_link != blank -%}
              <li class="list-social__item">
                <a href="{{ settings.social_snapchat_link }}" class="link link--text list-social__link" >
                  {%- render 'icon-snapchat' -%}
                  <span class="visually-hidden">{{ 'general.social.links.snapchat' | t }}</span>
                </a>
              </li>
            {%- endif -%}
            {%- if settings.social_youtube_link != blank -%}
              <li class="list-social__item">
                <a href="{{ settings.social_youtube_link }}" class="link link--text list-social__link" >
                  {%- render 'icon-youtube' -%}
                  <span class="visually-hidden">{{ 'general.social.links.youtube' | t }}</span>
                </a>
              </li>
            {%- endif -%}
            {%- if settings.social_vimeo_link != blank -%}
              <li class="list-social__item">
                <a href="{{ settings.social_vimeo_link }}" class="link link--text list-social__link" >
                  {%- render 'icon-vimeo' -%}
                  <span class="visually-hidden">{{ 'general.social.links.vimeo' | t }}</span>
                </a>
              </li>
            {%- endif -%}
          </ul>
        {%- endif -%}
      </div>
    </div>
  {%- endif -%}

  <div class="footer__content-bottom">
    <div class="footer__content-bottom-wrapper page-width">
      <div class="footer__column footer__localization">
        {%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%}
          <noscript>
            {%- form 'localization', id: 'FooterCountryFormNoScript', class: 'localization-form' -%}
              <div class="localization-form__select">
                <h2 class="visually-hidden" id="FooterCountryLabelNoScript">{{ 'localization.country_label' | t }}</h2>
                <select class="localization-selector link" name="country_code" aria-labelledby="FooterCountryLabelNoScript">
                  {%- for country in localization.available_countries -%}
                    <option value="{{ country.iso_code }}" {%- if country.iso_code == localization.country.iso_code %} selected{% endif %}>
                      {{ country.name }} ({{ country.currency.iso_code }} {{ country.currency.symbol }})
                    </option>
                  {%- endfor -%}
                </select>
                {% render 'icon-caret' %}
              </div>
              <button class="button button--tertiary">{{ 'localization.update_country' | t }}</button>
            {%- endform -%}
          </noscript>
          <localization-form>
            {%- form 'localization', id: 'FooterCountryForm', class: 'localization-form' -%}
              <div class="no-js-hidden">
                <h2 class="caption-large" id="FooterCountryLabel">{{ 'localization.country_label' | t }}</h2>
                <div class="disclosure">
                  <button type="button" class="disclosure__button localization-form__select localization-selector link link--text caption-large" aria-expanded="false" aria-controls="FooterCountryList" aria-describedby="FooterCountryLabel">
                    {{ localization.country.name }} ({{ localization.country.currency.iso_code }} {{ localization.country.currency.symbol }})
                    {% render 'icon-caret' %}
                  </button>
                  <ul id="FooterCountryList" role="list" class="disclosure__list list-unstyled" hidden>
                    {%- for country in localization.available_countries -%}
                      <li class="disclosure__item" tabindex="-1">
                        <a class="link link--text disclosure__link caption-large{% if country.iso_code == localization.country.iso_code %} disclosure__link--active{% endif %} focus-inset" href="#"{% if country.iso_code == localization.country.iso_code %} aria-current="true"{% endif %} data-value="{{ country.iso_code }}">
                          {{ country.name }} <span class="localization-form__currency">({{ country.currency.iso_code }} {{ country.currency.symbol }})</span>
                        </a>
                      </li>
                    {%- endfor -%}
                  </ul>
                </div>
                <input type="hidden" name="country_code" value="{{ localization.country.iso_code }}">
              </div>
            {%- endform -%}
          </localization-form>
        {%- endif -%}

        {%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%}
          <noscript>
            {%- form 'localization', id: 'FooterLanguageFormNoScript', class: 'localization-form' -%}
              <div class="localization-form__select">
                <h2 class="visually-hidden" id="FooterLanguageLabelNoScript">{{ 'localization.language_label' | t }}</h2>
                <select class="localization-selector link" name="locale_code" aria-labelledby="FooterLanguageLabelNoScript">
                  {%- for language in localization.available_languages -%}
                    <option value="{{ language.iso_code }}" lang="{{ language.iso_code }}" {%- if language.iso_code == localization.language.iso_code %} selected{% endif %}>
                      {{ language.endonym_name | capitalize }}
                    </option>
                  {%- endfor -%}
                </select>
                {% render 'icon-caret' %}
              </div>
              <button class="button button--tertiary">{{ 'localization.update_language' | t }}</button>
            {%- endform -%}
          </noscript>

          <localization-form>
            {%- form 'localization', id: 'FooterLanguageForm', class: 'localization-form' -%}
              <div class="no-js-hidden">
                <h2 class="caption-large" id="FooterLanguageLabel">{{ 'localization.language_label' | t }}</h2>
                <div class="disclosure">
                  <button type="button" class="disclosure__button localization-form__select localization-selector link link--text caption-large" aria-expanded="false" aria-controls="FooterLanguageList" aria-describedby="FooterLanguageLabel">
                    {{ localization.language.endonym_name | capitalize }}
                    {% render 'icon-caret' %}
                  </button>
                  <ul id="FooterLanguageList" role="list" class="disclosure__list list-unstyled" hidden>
                    {%- for language in localization.available_languages -%}
                      <li class="disclosure__item" tabindex="-1">
                        <a class="link link--text disclosure__link caption-large{% if language.iso_code == localization.language.iso_code %} disclosure__link--active{% endif %} focus-inset" href="#" hreflang="{{ language.iso_code }}" lang="{{ language.iso_code }}"{% if language.iso_code == localization.language.iso_code %} aria-current="true"{% endif %} data-value="{{ language.iso_code }}">
                          {{ language.endonym_name | capitalize }}
                        </a>
                      </li>
                    {%- endfor -%}
                  </ul>
                </div>
                <input type="hidden" name="locale_code" value="{{ localization.language.iso_code }}">
              </div>
            {%- endform -%}
          </localization-form>
        {%- endif -%}
      </div>
      <div class="footer__column footer__column--info">
        {%- if section.settings.payment_enable -%}
          <div class="footer__payment">
            <span class="visually-hidden">{{ 'sections.footer.payment' | t }}</span>
            <ul class="list list-payment" role="list">
              {%- for type in shop.enabled_payment_types -%}
                <li class="list-payment__item">
                  {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
                </li>
              {%- endfor -%}
            </ul>
          </div>
        {%- endif -%}
        <div class="footer__copyright caption">
          <small class="copyright__content">&copy; {{ 'now' | date: "%Y" }}, {{ shop.name | link_to: routes.root_url }}</small>
          <small class="copyright__content">{{ powered_by_link }}</small>
        </div>
      </div>
    </div>
  </div>
</footer>

{% javascript %}
  class LocalizationForm extends HTMLElement {
    constructor() {
      super();
      this.elements = {
        input: this.querySelector('input[name="locale_code"], input[name="country_code"]'),
        button: this.querySelector('button'),
        panel: this.querySelector('ul'),
      };
      this.elements.button.addEventListener('click', this.openSelector.bind(this));
      this.elements.button.addEventListener('focusout', this.closeSelector.bind(this));
      this.addEventListener('keyup', this.onContainerKeyUp.bind(this));

      this.querySelectorAll('a').forEach(item => item.addEventListener('click', this.onItemClick.bind(this)));
    }

    hidePanel() {
      this.elements.button.setAttribute('aria-expanded', 'false');
      this.elements.panel.setAttribute('hidden', true);
    }

    onContainerKeyUp(event) {
      if (event.code.toUpperCase() !== 'ESCAPE') return;

      this.hidePanel();
      this.elements.button.focus();
    }

    onItemClick(event) {
      event.preventDefault();
      const form = this.querySelector('form');
      this.elements.input.value = event.currentTarget.dataset.value;
      if (form) form.submit();
    }

    openSelector() {
      this.elements.button.focus();
      this.elements.panel.toggleAttribute('hidden');
      this.elements.button.setAttribute('aria-expanded', (this.elements.button.getAttribute('aria-expanded') === 'false').toString());
    }

    closeSelector(event) {
      const shouldClose = event.relatedTarget && event.relatedTarget.nodeName === 'BUTTON';
      if (event.relatedTarget === null || shouldClose) {
        this.hidePanel();
      }
    }
  }

  customElements.define('localization-form', LocalizationForm);
{% endjavascript %}

{% schema %}
{
  "name": "t:sections.footer.name",
  "blocks": [

{
"name": "custom liquid",
"type": "custom_liquid",
"settings": [
{
"type": "liquid",
"id": "custom_liquid",
"label": "t:sections.custom-liquid.settings.custom_liquid.label",
"info": "t:sections.custom-liquid.settings.custom_liquid.info"
}
]
},

{
  "type": "html_content",
  "name": "HTML Content",
  "settings": [
    {
      "type": "html",
      "id": "html_area",
      "label": "Custom HTML",
      "default": "<div><p>Some HTML content</p></div>"
    }
  ]
},

{
      "type": "link_list",
      "name": "t:sections.footer.blocks.link_list.name",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "Quick links",
          "label": "t:sections.footer.blocks.link_list.settings.heading.label",
          "info": "t:sections.footer.blocks.link_list.settings.heading.info"
        },
        {
          "type": "link_list",
          "id": "menu",
          "default": "footer",
          "label": "t:sections.footer.blocks.link_list.settings.menu.label",
          "info": "t:sections.footer.blocks.link_list.settings.menu.info"
        }
      ]
    },
    {
      "type": "text",
      "name": "t:sections.footer.blocks.text.name",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "Heading",
          "label": "t:sections.footer.blocks.text.settings.heading.label"
        },
        {
          "type": "richtext",
          "id": "subtext",
          "default": "<p>Share store details, promotions, or brand content with your customers.</p>",
          "label": "t:sections.footer.blocks.text.settings.subtext.label"
        }
      ]
    },
    {
      "type": "image",
      "name": "Image",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "range",
          "id": "image_width",
          "min": 50,
          "max": 200,
          "step": 5,
          "unit": "px",
          "label": "Image width",
          "default": 100
        },
        {
          "type": "select",
          "id": "alignment",
          "label": "Image alignment on large screen",
          "options": [
            {
              "value": "",
              "label": "Left"
            },
            {
              "value": "center",
              "label": "Center"
            },
            {
              "value": "right",
              "label": "Right"
            }
          ],
          "default": "center"
        }
      ]
    }
  ],
  "settings": [
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.footer.settings.color_scheme.options__1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.footer.settings.color_scheme.options__2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.footer.settings.color_scheme.options__3.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.footer.settings.color_scheme.options__4.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.footer.settings.color_scheme.options__5.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.footer.settings.color_scheme.label"
    },
    {
      "type": "header",
      "content": "t:sections.footer.settings.header__1.content",
      "info": "t:sections.footer.settings.header__1.info"
    },
    {
      "type": "checkbox",
      "id": "newsletter_enable",
      "default": true,
      "label": "t:sections.footer.settings.newsletter_enable.label"
    },
    {
      "type": "text",
      "id": "newsletter_heading",
      "default": "Subscribe to our emails",
      "label": "t:sections.footer.settings.newsletter_heading.label"
    },
    {
      "type": "header",
      "content": "t:sections.footer.settings.header__2.content",
      "info": "t:sections.footer.settings.header__2.info"
    },
    {
      "type": "checkbox",
      "id": "show_social",
      "default": false,
      "label": "t:sections.footer.settings.show_social.label"
    },
    {
      "type": "header",
      "content": "t:sections.footer.settings.header__3.content",
      "info": "t:sections.footer.settings.header__4.info"
    },
    {
      "type": "checkbox",
      "id": "enable_country_selector",
      "default": true,
      "label": "t:sections.footer.settings.enable_country_selector.label"
    },
    {
      "type": "header",
      "content": "t:sections.footer.settings.header__5.content",
      "info": "t:sections.footer.settings.header__6.info"
    },
    {
      "type": "checkbox",
      "id": "enable_language_selector",
      "default": true,
      "label": "t:sections.footer.settings.enable_language_selector.label"
    },
    {
      "type": "header",
      "content": "t:sections.footer.settings.header__7.content"
    },
    {
      "type": "checkbox",
      "id": "payment_enable",
      "default": true,
      "label": "t:sections.footer.settings.payment_enable.label"
    }
  ],
  "default": {
    "blocks": [
      {
        "type": "link_list"
      },
      {
        "type": "text"
      }
    ]
  }
}
{% endschema %}

Thanks for your patience and suggestions.

[made4Uo · Accepted solution]

@Zens  Hi, Sorry for the confusion, I thought your adding a liquid code. What are you trying to add though? A paragraph? Here is the way to show the input code. After the {% case block.type %} add the code below.

 Custom liquid code I believe is a way to add a piece of a code or a snippet, not just writing a paragraph. If you wish to write a paragraph then you have to <p></p>

{% when 'custom_liquid' %}

{{block.settings.custom_liquid}}

Regarding the error. Try removing the html block in the footer when you customize the theme. It should refresh. Let me know if you still have issues

[Zens]

Hi @made4Uo 

Thanks for your patience, don't worry about the mistake but the important thing is to fix it 😉

Now I can put in the footer a box containing some custom liquid code.

In summary, so as to also be able to leave a trace for those who will come later.
The actions to be done in order to add a box with custom liquid code in the footer are.

1
Open the footer.liquid file in the Edit Code section of the Shopify theme.

2
Add after this line of code

{% schema %}
{
  "name": "t:sections.footer.name",
  "blocks": [

This

{
"name": "custom liquid",
"type": "custom_liquid",
"settings": [
{
"type": "liquid",
"id": "custom_liquid",
"label": "t:sections.custom-liquid.settings.custom_liquid.label",
"info": "t:sections.custom-liquid.settings.custom_liquid.info"
}
]
},

3
Add after this line of code

{% case block.type %}

This

{% when 'custom_liquid' %}

{{block.settings.custom_liquid}}

Save everything and test the operation.

I hope I have not forgotten anything.

🙂

[made4Uo]

@Zens Yes. That should be it. Let me know if you have issues

[MARBLE-MADNESS]

Hi all, if you change the code a bit to:

{

    "name": "custom liquid",

    "type": "custom_liquid",

    "settings": [

    {

      "type": "text",

      "id": "heading",

      "default": "Custom Liquid",

      "label": "t:sections.footer.blocks.text.settings.heading.label"

    },

    {

    "type": "liquid",

    "id": "custom_liquid",

    "label": "t:sections.custom-liquid.settings.custom_liquid.label",

    "info": "t:sections.custom-liquid.settings.custom_liquid.info"

    }

    ]

    },

you get a heading section as well above your own liquid code...

[Zens]

Great @MARBLE-MADNESS  I tried it and it works  😉
But now I have to do a new summary because otherwise those who come later will not understand much 🙂

So to recap it all ...

In order to add a liquid box in the footer with the header, these are the steps to do:

1
Open the footer.liquid file in the Edit Code section of the Shopify theme.

2
Add after this line of code

{% schema %}
{
  "name": "t:sections.footer.name",
  "blocks": [

Enter this:

{
    "name": "custom liquid",
    "type": "custom_liquid",
    "settings": [

    {
      "type": "text",
      "id": "heading",
      "default": "Custom Liquid",
      "label": "t:sections.footer.blocks.text.settings.heading.label"
    },

    {
    "type": "liquid",
    "id": "custom_liquid",
    "label": "t:sections.custom-liquid.settings.custom_liquid.label",
    "info": "t:sections.custom-liquid.settings.custom_liquid.info"
    }
    ]
    },

3
Add after this line of code

{% case block.type %}

Enter this:

{% when 'custom_liquid' %}

{{block.settings.custom_liquid}}

Save everything and test the operation.

I hope I have not forgotten anything.

A special thanks to all those who participated in this conversation by "inventing" something useful for the community.

[MARBLE-MADNESS]

Thanks for your nice feedback @Zens and your work. Hope everything is fine at your end.. Have a great day 🙂 

[Joan65]

Hello, could ou be more specific where to add this code in footer.liquid?

[MARBLE-MADNESS]

Hi Joan, like @Zens has written in his comment above, insert the code directly after:

{% schema %}
{
  "name": "t:sections.footer.name",
  "blocks": [

Or just simple copy the following schema section and change it in your footer.liquid:

{% schema %}
{
  "name": "t:sections.footer.name",
  "blocks": [

  /* Stefan: Added for custom HTML in footer */
  {
    "name": "custom liquid",
    "type": "custom_liquid",
    "settings": [

    {
      "type": "text",
      "id": "heading",
      "default": "Custom Liquid",
      "label": "t:sections.footer.blocks.text.settings.heading.label"
    },

    {
    "type": "liquid",
    "id": "custom_liquid",
    "label": "t:sections.custom-liquid.settings.custom_liquid.label",
    "info": "t:sections.custom-liquid.settings.custom_liquid.info"
    }
    ]
    },

    /* Stefan: END */

    {
      "type": "link_list",
      "name": "t:sections.footer.blocks.link_list.name",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "Quick links",
          "label": "t:sections.footer.blocks.link_list.settings.heading.label",
          "info": "t:sections.footer.blocks.link_list.settings.heading.info"
        },
        {
          "type": "link_list",
          "id": "menu",
          "default": "footer",
          "label": "t:sections.footer.blocks.link_list.settings.menu.label",
          "info": "t:sections.footer.blocks.link_list.settings.menu.info"
        }
      ]
    },
    {
      "type": "text",
      "name": "t:sections.footer.blocks.text.name",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "Heading",
          "label": "t:sections.footer.blocks.text.settings.heading.label"
        },
        {
          "type": "richtext",
          "id": "subtext",
          "default": "<p>Share store details, promotions, or brand content with your customers.</p>",
          "label": "t:sections.footer.blocks.text.settings.subtext.label"
        }
      ]
    },
    
    {
      "type": "image",
      "name": "Image",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "range",
          "id": "image_width",
          "min": 50,
          "max": 200,
          "step": 5,
          "unit": "px",
          "label": "Image width",
          "default": 100
        },
        {
          "type": "select",
          "id": "alignment",
          "label": "Image alignment on large screen",
          "options": [
            {
              "value": "",
              "label": "Left"
            },
            {
              "value": "center",
              "label": "Center"
            },
            {
              "value": "right",
              "label": "Right"
            }
          ],
          "default": "center"
        }
      ]
    }
  ],
  "settings": [
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.footer.settings.color_scheme.options__1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.footer.settings.color_scheme.options__2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.footer.settings.color_scheme.options__3.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.footer.settings.color_scheme.options__4.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.footer.settings.color_scheme.options__5.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.footer.settings.color_scheme.label"
    },
    {
      "type": "header",
      "content": "t:sections.footer.settings.header__1.content",
      "info": "t:sections.footer.settings.header__1.info"
    },
    {
      "type": "checkbox",
      "id": "newsletter_enable",
      "default": true,
      "label": "t:sections.footer.settings.newsletter_enable.label"
    },
    {
      "type": "text",
      "id": "newsletter_heading",
      "default": "Subscribe to our emails",
      "label": "t:sections.footer.settings.newsletter_heading.label"
    },
    {
      "type": "header",
      "content": "t:sections.footer.settings.header__2.content",
      "info": "t:sections.footer.settings.header__2.info"
    },
    {
      "type": "checkbox",
      "id": "show_social",
      "default": false,
      "label": "t:sections.footer.settings.show_social.label"
    },
    {
      "type": "header",
      "content": "t:sections.footer.settings.header__3.content",
      "info": "t:sections.footer.settings.header__4.info"
    },
    {
      "type": "checkbox",
      "id": "enable_country_selector",
      "default": true,
      "label": "t:sections.footer.settings.enable_country_selector.label"
    },
    {
      "type": "header",
      "content": "t:sections.footer.settings.header__5.content",
      "info": "t:sections.footer.settings.header__6.info"
    },
    {
      "type": "checkbox",
      "id": "enable_language_selector",
      "default": true,
      "label": "t:sections.footer.settings.enable_language_selector.label"
    },
    {
      "type": "header",
      "content": "t:sections.footer.settings.header__7.content"
    },
    {
      "type": "checkbox",
      "id": "payment_enable",
      "default": true,
      "label": "t:sections.footer.settings.payment_enable.label"
    }
  ],
  "default": {
    "blocks": [
      {
        "type": "link_list"
      },
      {
        "type": "text"
      }
    ]
  }
}

{% endschema %}

[Joan65]

Thank you so much for taking the time to answer. I have been trying for a
week to complete the footer section in the Dawn theme. Once this is done,
how do I add links below the headings?

[MARBLE-MADNESS]

Hi Joan, ok, understand it. After you have added a section during customizing your theme, here are two examples of code you can put into the filed customized-liquid:

Example graphics and text:

<p><img alt="Alternate Text Example 1" src="https://cdn.shopify.com/s/files/1/0603/7857/9134/files/haken_mm_color.png?v=1635323469" style="margin-right: 10px; float: left;" width="20" height="20">Example Text one for Joan</p>
<p>
</p><p><img alt="Alternate Text 2" src="https://cdn.shopify.com/s/files/1/0603/7857/9134/files/haken_mm_color.png?v=1635323469" style="margin-right: 10px; float: left;" width="20" height="20">Example Text two for Joan</p>

Other example for a Link:

<p>Text example for Joan includes also a <br><strong>bold text</strong>.<br>And here is a link to your <b><a href="/pages/contact" style="color: #00909B" title="Whatever">Contact-Page</a></b>.<br>And a little text after all.</p>
<p>

Hope that helps, best,

Stefan

[Joan65]

Thank you so much. You are very kind. I will give it a try.

Best, Joan65

[MARBLE-MADNESS]

Hi Joan, should work. If not there must be something else wrong in your theme....

Best....

Stefan

[Joan65]

Hi there. All set, works great!

I have another question if you don't mind. I would like to add a hyperlink
to our contact phone number on our Placing an Order page -

I have seen one on another website, when you click on it - a popup window
appears to upper right, I think from Microsoft.



Please see attached.

Thank you!

[MARBLE-MADNESS]

Hi Joan, don't really understand it for the moment and can't see any attachment. But maybe it's better if you're open a new thread for a new case. Ohterwise it get mixed here with the footer-solution... Best, Stefan

[StefanBoettjer]

Hi, for a customer i developed a code for a popup like this:

https://supergsund.de/products/impfstoff-weisswein-6x-750ml

Visit the page and look for:

Incl. MwSt.. Versandkosten werden an der Kasse berechnet.

If you're on the page click on "Versandkosten".

A popup appears. 

If you're looking for something like this, i can give you the code.

Stefan