Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Add a new block to the Footer - Dawn theme used

Solved

Add a new block to the Footer - Dawn theme used

Zens
Shopify Partner
16 0 11

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.

Accepted Solution (1)
made4Uo
Shopify Partner
3856 717 1198

This is an 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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

View solution in original post

Replies 32 (32)

KetanKumar
Shopify Partner
37363 3656 12099

@Zens 

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

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

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
Visitor
1 0 0

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
Shopify Partner
37363 3656 12099

@Zens 

can you try this way

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

{{ block.settings.section_html }}

schema

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

 

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

@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
Shopify Partner
37363 3656 12099

@Zens 

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

 

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

@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
Shopify Partner
37363 3656 12099

footer other block code

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

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
Shopify Partner
37363 3656 12099

@Zens 

can you please share footer code

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

@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
Visitor
1 0 2

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.

Helping small businesses achieve mind-blowing results with digital marketing.
Founder at bullsharkmarketing.com
Zens
Shopify Partner
16 0 11

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
Shopify Partner
5 0 1

Brilliant @TomKos - nice elegant solution, explained clearly.

Thanks so much.

Jmcclain0129
Shopify Partner
1 0 0

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

made4Uo
Shopify Partner
3856 717 1198

Hi @Zens,

212121.JPG

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
Zens
Shopify Partner
16 0 11

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
Shopify Partner
3856 717 1198

This is an 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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
Zens
Shopify Partner
16 0 11

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
Shopify Partner
3856 717 1198

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
MARBLE-MADNESS
Tourist
6 0 3

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
Shopify Partner
16 0 11

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
Tourist
6 0 3

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

Joan65
Tourist
19 0 1

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

Joan Smith
MARBLE-MADNESS
Tourist
6 0 3

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
Tourist
19 0 1
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?
Joan Smith
MARBLE-MADNESS
Tourist
6 0 3

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
Tourist
19 0 1
Thank you so much. You are very kind. I will give it a try.

Best, Joan65
Joan Smith
MARBLE-MADNESS
Tourist
6 0 3

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

 

Best....

 

Stefan

 

 

Joan65
Tourist
19 0 1
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!




Joan Smith
MARBLE-MADNESS
Tourist
6 0 3

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
Shopify Partner
14 1 6

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