Issue with Theme Customiser and Custom Sections.

howiek2020
New Member
2 0 0

Hi,

I'm developing a store for a client and I'm experiencing an issue when I come to rearranging the custom sections within the customiser. I'm using Theme Kit to modify the default this debut theme. I have built the following sections called:

- custom-main.liquid

- custom-newsletter.liquid

- custom-ourstory.liquid

- custom-partners.liquid

- custom-shop.liquid

- custom-subscribe.liquid

- custom-testimonials.liquid

 

Each section is dynamic and has its own HTML and liquid syntax along with a schema with a preset so it can be customised within the customiser. I usually build the section, save and then add the text within the customiser. This text needs to be editable by the client. I also wish the client to be able to rearrange the sections if needed. This hasn't been an issue until I developed custom-main.liquid. When I go to reorganise within the customiser all the other sections rearrange out of their original order. I have spoken with support and haven't had much luck. Here is the section is questions code

 

<div class="c-section c-section--hero page-container">

  <!-------------------- ROW 1 - MAIN CONTENT -------------------->
  <div class="c-section__flex-row">
    <!---------------- COLUMN 1 ---------------->
    <div class="c-section__hero">
      <!-- TEXT CONTENT -->
      <h3 class="subheading">{{ section.settings.subheading }}</h3>
      <h2 class="heading">{{ section.settings.heading }}</h2>
      {% if section.settings.paragraph != blank %}
        <div class="para">
          {{ section.settings.paragraph }}
        </div>
      {% endif %}
      <!-- CTA BUTTON -->
      <div class="c-section__btn-container">
        <a href="{{ section.settings.btn-link-1 }}" class="btn--primary btn--small">{{ section.settings.btn-text-1 }}</a>
        <a href="{{ section.settings.btn-link-2 }}" class="btn--secondary btn--small">{{ section.settings.btn-text-2 }}</a>
      </div>
    </div>
    <!---------------- COLUMN 2 ---------------->
    <div class="c-section__hero">
      <h3 class="subheading">{{ section.settings.subheading }}</h3>
      <h2 class="heading">{{ section.settings.heading }}</h2>
    </div>
  </div>
  {% if section.blocks.size > 0 %}
    <!-------------------- ROW 2 - MAIN SERVICES -------------------->
    <div class="c-section__flex-row">
    {% for block in section.blocks %}
      <div class="c-section__services-container">
        <h4>{{ block.settings.title }}</h4>
      </div>
    {% endfor %}
  {% endif %}
</div>


{% schema %}
{
  "name": "main-section",
  "tag": "section",
  "settings": [
    {
      "type": "header",
      "content": "Section Details"
    },
    {
      "id": "title",
      "type": "text",
      "label": "Section Name"
    },
    {
      "type": "header",
      "content": "Section Content"
    },
    {
      "id": "subheading",
      "type": "text",
      "label": "Subheading Text"
    },
    {
      "id": "heading",
      "type": "text",
      "label": "Heading Text"
    },
    {
      "id": "paragraph",
      "type": "richtext",
      "label": "Paragraph Text"
    },
    {
      "id": "btn-text-1",
      "type": "text",
      "label": "Button 1 Text",
      "default": "Learn More"
    },
    {
      "id": "btn-link-1",
      "type": "url",
      "label": "Button 1 Link"
    },
    {
      "id": "btn-text-2",
      "type": "text",
      "label": "Button 2 Text",
      "default": "Learn More"
    },
    {
      "id": "btn-link-2",
      "type": "url",
      "label": "Button 2 Link"
    },
    {
      "id": "main-image",
      "type": "image_picker",
      "label": "Main Image"
    }
  ],
  "blocks": [
  {
    "type": "services",
    "name": "Service",
    "settings": [
      {
        "id": "title",
        "type": "text",
        "label": "Heading"
      },
      {
        "id": "description",
        "type": "text",
        "label": "Description"
      },
      {
        "id": "icon",
        "type": "image_picker",
        "label": "Icon"
      },
      {
        "id": "btn-text",
        "type": "text",
        "label": "Button Text",
        "default": "Learn More"
      },
      {
        "id": "btn-link",
        "type": "url",
        "label": "Button Link"
      }
    ]
  }
  ],
  "presets": [
    {
      "category": "Custom - Gold Goat",
      "name": "Custom - Main Section"
    }
  ]
}
{% endschema %}

 

Screenshot 2020-09-01 at 21.44.27.pngScreenshot 2020-09-01 at 21.45.18.png

 

0 Likes