Shopify Implementing Sections In File Schema

Example

For sections, instead of utilizing one big JSON file (like settings_schema.json, they instead keep their schema within the file of the section that is using it. To do this {% schema %} {% endschema %} tags are used and JSON is placed between them. From there, the format is similar to settings_schema.json.

{% schema %}
  {
    "name": "Header Banner",
    "settings": [
      {
        "type": "checkbox",
        "id": "banner_enable",
        "label": "Enable Banner",
        "default": false
      },
      {
        "type": "color",
        "id": "banner_color",
        "label": "Banner Background Color",
        "default": "#000000"
      },
      {
        "type": "color",
        "id": "text_color",
        "label": "Banner Text Color",
        "default": "#ffffff"
      },
      {
        "type": "text",
        "id": "banner_text",
        "label": "Banner Text",
        "default": "Welcome to my Section"
      }
    ]
  }
{% endschema %}

To use this in your HTML/Liquid code you would pull from section.settings. Something like:

{% if section.settings.banner_enable %}
  <div class="banner">
    <p>{{ section.settings.banner_text }}</p>
  </div>
{% endif %}