Add a new block to the Footer - Dawn theme used

Solved
Zens
Shopify Partner
16 0 10

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.

Replies 31 (31)
Zens
Shopify Partner
16 0 10

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.

 

Joan65
Tourist
18 0 1

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

Joan Smith
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 🙂 

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
18 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
18 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
18 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
8 1 0

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

 

NicelyNZ
Tourist
3 0 1

Brilliant @TomKos - nice elegant solution, explained clearly.

Thanks so much.