Schema files

The theme editor reads a JSON schema that defines display settings for merchants in the theme editor.

Introduction

Schema files are represenations of your theme's settings. They are required to:

Build the settings form in the Theme Editor.

Define the keys (ids) that will allow you to reference the theme settings in your templates.

The schema files are split into two types, section schema files, and layout schema files.

Note: in the old theme system, the schema used to be part of the template.twig file, now it is a separate json file.

Sections

Each section.jinja is required to have a corresponding section.schema.json file in the same directory.

Structure

Field	Type	Description
name	object {ar,en}	Section title shown to the merchant (Arabic/English).
template	string	Path to the section’s Jinja template (e.g., "sections/image_slider.jinja").
settings	array	List of inputs the merchant can change (see Input Settings).
icon	text	Optional reference to an icon (e.g. `fal fa-box`).

Example

This is an example of what a section schema /sections/image_slider.schema.json file would look like:

{
  "name": {
    "ar": "شرائح الصور",
    "en": "Image Slider"
  },
  "template": "sections/image_slider.jinja",
  "settings": [
      {
        "type": "checkbox",
        "id": "hide_dots",
        "label": {
          "ar": "إخفاء النقاط",
          "en": "Hide dots"
        },
        "default": true
      }
  ]
}

Layout, Header, Footer

These core jinja templates require a schema file each to represent the settings form in the theme editor. Therefore it is required you the following in your theme root directory:

layout.schema.json

header.schema.json

footer.schema.json

Structure

Field	Type	Description
name	object {ar,en}	Section title shown to the merchant (Arabic/English).
groups	array	List of objects that represent each group of settings. The structure of a group is almost identical to the schema of an individual section
icon	text	Optional reference to an icon (e.g. `fal fa-box`).

Example:

{
  "icon": "fa fa-square",
  "name": {
    "ar": "اعلى الصفحة",
    "en": "Header"
  },
  "groups": [
    {
      "id": "header",
      "icon": "font_awesome",
      "name": {
        "ar": "رأس الصفحة",
        "en": "Header"
      },
      "settings": [
        {
          "id": "logo",
          "type": "image",
          "label": {
            "ar": "الشعار",
            "en": "Logo"
          },
          "info": {
            "ar": "ارفع صورة بحجم 750 * 750 ",
            "en": "This is an info text sample here"
          }
        }
      ]
    }
  ]
}

Note: Each group will appear as a fieldset in the theme editor. You do not need to explicitly specify fieldset for these groups.

You can also view a live example in the Soft Theme Vitrin Repository.

Mapping schema to keys

The settings object inside every template is a flattend version of your schema file. For example the following shorthand schema:

{
  "icon": "fa fa-square",
  "name": {
    "ar": "اعلى الصفحة",
    "en": "Header"
  },
  "groups": [
    {
      "id": "header",
       ...
      "settings": [
        {
          "id": "logo",
             ...
          }
        }
      ]
    }
  ]
}

Where the value of "logo" can be accessed as settings.header_logo in your jinja file templates.

Introduction#

Sections#

Layout, Header, Footer#

Mapping schema to keys#

Introduction

Sections

Layout, Header, Footer

Mapping schema to keys