Settings Schema

will guide you to build customizable components to your theme

to allow the user to customize or edit different part of your theme, you can generate different types of inputs to the user.

• text

• number

• textarea

• select

• radios

• checkbox

• checkboxes

• range

• color

• image

• product

• category

• category_products

• list

• fieldset

in the file you want to allow the user to customize you must add to the end of the file the schema tags

{% schema %}
.
. your settings schema
.
.
{% endschema %}

settings schema structure:

{% schema %}
{
  "name": {
    "ar": "name ar",
    "en": "name en"
  },
  "icon": "fa font-awsome icon",
  "display": true,
  "settings": {
  .
  . your inputs 
  .
  .
  }
}

this will generate in the customize page a new section to the user

in same file you add your settings schema you will find a global settings object with the keys and values entered by user

ex:

<header section-id="{{ sectionId }}" class='d-flex flex-column'>
    <div id="fixed-header">
        {{ settings.key }}
    </div>

</header>


{% schema %}
{
  "name": {
    "ar": "name ar",
    "en": "name en"
  },
  "icon": "fa fa-square",
  "display": true,
  "settings": {
    "key": {
      "type": "text",
      "label": {
        "ar": "العنوان",
        "en": "text"
      },
      "info": {
        "ar": "نص توضيحي",
        "en": "info text"
      }
    }
  }
}
{% endschema %}