shopify - How to add custom html block to list of footer options?

Question

I am using the Debut theme on Shopify and wanting to customize my footer (my site)

There are options within the customize theme to add and remove the column sections of the footer, however there is no option to add a custom html block as one of the columns. How can I add Custom HTML to this list of options for footer columns?:

Thanks for your help!

question from:https://stackoverflow.com/questions/65832167/how-to-add-custom-html-block-to-list-of-footer-options

Answer 1

Open /sections/footer.liquid then add a new section block to the blocks array, this code should give you a basic starting point:

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

Then to display the content, you need to add a new type check for the html_content type in the {%- case block.type -%} block, like so:

{%- case block.type -%}
  {%- when 'newsletter' -%}
    .
    .
    .
  {%- when 'text' -%}
    .
    .
    .
  {%- when 'link_list' -%}
    .
    .
    .
  {%- when 'html_content' -%}
    {{ block.settings.html_area }}
{%- endcase -%}

When you save the change and refresh your theme customizer, you should be able to see a new content type in the footer section.

For all theme section input types refer to this doc.