Very green trying to understand sections

New Member
2 0 0

Hello!

 

I have a created a new section (editable HTML-field) but I want to make it available in the footer and add it there. How can I do that? (I am using the debut-theme)

 

I used this code to make a section with a HTML-field that can be edited by the user: 

<script
  type="application/json"
  data-section-id="{{ section.id }}"
  data-section-type="html-area"
></script>

<section
  class="
    pxs-rich-text
    pxs-rich-text-width-{{ section.settings.width }}
  "
>
  {% for block in section.blocks %}
    <article
      class="
        pxs-rich-text-block
        pxs-rich-text-heading-{{ block.settings.heading_size }}
        {%- if block.settings.text_alignment != blank -%}
          pxs-rich-text-alignment-{{ block.settings.text_alignment }}
        {%- endif -%}
      "
      {{ block.shopify_attributes }}
    >
      {% if block.type == 'text' %}
        {% if block.settings.title != blank %}
          <h2 class="pxs-rich-text-heading">
            {{ block.settings.title | escape }}
          </h2>
        {% endif %}

        {% if block.settings.section_html != blank %}
          <div class="pxs-rich-text-content rte">
            {{ block.settings.section_html |escape }}
          </div>
        {% endif %}
      {% endif %}

      {% if block.type == 'page' and block.settings.page %}
        {% if block.settings.show_heading %}
          <h2 class="pxs-rich-text-heading">
            {{ pages[block.settings.page].title | escape }}
          </h2>
        {% endif %}

        <div class="pxs-rich-text-content rte">
          {{ pages[block.settings.page].content }}
        </div>
      {% endif %}
    </article>
  {% endfor %}
</section>

{% schema %}
{
  "name": "HTML Text",
  "class": "pxs-rich-text-section",
  "max_blocks": 2,
  "settings": [
    {
      "id": "width",
      "type": "select",
      "label": "Section width",
      "options": [
        {
          "value": "regular",
          "label": "Regular"
        },
        {
          "value": "wide",
          "label": "Wide"
        },
        {
          "value": "full-width",
          "label": "Full width"
        }
      ],
      "default": "regular"
    }
  ],
  "blocks": [
    {
      "type": "text",
      "name": "Text",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "default": "Rich text"
        },
        {
          "type": "html",
          "id": "section_html",
          "label": "Texts",
          "default": "<p>Use this section to welcome customers to your store, say a bit about your brand, or share news and seasonal promotions.</p>"
        },
        {
          "id": "heading_size",
          "type": "select",
          "label": "Heading size",
          "options": [
            {
              "value": "small",
              "label": "Small"
            },
            {
              "value": "medium",
              "label": "Medium"
            },
            {
              "value": "large",
              "label": "Large"
            }
          ],
          "default": "large"
        },
        {
          "id": "text_alignment",
          "type": "select",
          "label": "Text alignment",
          "options": [
            {
              "value": "left",
              "label": "Left"
            },
            {
              "value": "center",
              "label": "Center"
            },
            {
              "value": "right",
              "label": "Right"
            }
          ],
          "default": "left"
        }
      ]
    },
    {
      "type": "page",
      "name": "Page",
      "settings": [
        {
          "type": "checkbox",
          "id": "show_heading",
          "label": "Show heading"
        },
        {
          "id": "heading_size",
          "type": "select",
          "label": "Heading size",
          "options": [
            {
              "value": "small",
              "label": "Small"
            },
            {
              "value": "medium",
              "label": "Medium"
            },
            {
              "value": "large",
              "label": "Large"
            }
          ],
          "default": "large"
        },
        {
          "type": "page",
          "id": "page",
          "label": "Page"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Rich text",
      "category": "Text",
      "blocks": [
        {
          "type": "text"
        }
      ]
    }
  ]
}

{% endschema %} 

 

 

0 Likes
Highlighted
Explorer
79 8 13

This one you have to directly put inside your footer section.You can'y put section in section.

0 Likes
Highlighted
New Member
2 0 0
@Dayton wrote:

This one you have to directly put inside your footer section.You can'y put section in section.


Then my question comes: How can I add a HTML-editor to the footer area in the customizer?

0 Likes
Highlighted
Explorer
79 8 13

I dont think you can embed a html editor.But you can ask more people around.

0 Likes