Search code examples
themesshopifyliquidsections

Custom made sections not appearing with Shopify's new theme editor

With the release of the new theme editor I've been assigned to build a new client's website using Shopify's new theme builder framework.

Everything has been going fine except that when I go to create a new 'Section' in the backend it fails to appear within the Theme Editor's 'Sections' area.

Any idea what's going wrong here? Is there another JSON file that is associated with sections that I'm missing?

<div id="callToActions">
  <div class="grid grid--no-gutters">
    <div class=""></div>
  </div>
</div>



{% schema %}
{
  "name": "Call to Actions",
  "class": "index-section index-section--flush",
  "settings": [
    {
      "id": "cta_1_title",
      "type": "text",
        "label": "CTA 1 Title",
      "default": "Dryups Specials"
    }
  ]
}
{% endschema %}
Solution

  • You're almost there, just missing one thing. Sections will only show up as options to be added if they have a preset defined.

    This update will make it show up:

    {% schema %}
{
  "name": "Call to Actions",
  "class": "index-section index-section--flush",
  "settings": [
    {
      "id": "cta_1_title",
      "type": "text",
      "label": "CTA 1 Title",
      "default": "Dryups Specials"
    }
  ],
  "presets": [{
    "name": "Call to Actions",
    "category": "Text"
  }]
}
{% endschema %}

    Note the category. If omitted, it'll end up under Miscellaneous.