Settings Schema

Schema will help you build customizable SEO & User friendly components to your Theme.

You can generate different types of inputs that allow users to customize or edit different parts of your theme. Here is a list of the components that you can build. Click on any component to learn more about it.

• text
• number
• textarea
• select
• Radio Buttons
• Checkboxes
• Range
• Color
• Image
• Product
• Category & Product Category
• list
• fieldset

Allow Customizable Components

In order to allow the users to be able to customize a certain component, you must add the following schema tags to the end of the file.

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

The settings schema structure is as follows:

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

The above schema will generate a new customizable section for the user.

In the same file you added the settings schema, you will find a global settings object with the keys and values entered by users.

Example1:

<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 %}