Settings

The settings/ folder stores the theme configuration JSON files that control defaults, schema, and template ordering.

Files in this folder

settings-schema.json: defines available fields organized into groups with multilingual labels.
settings-data.json: holds the actual values for each field.
templates-settings.json: defines the rendering order for templates.

settings-schema.json

Settings are organized into groups with multilingual labels. Each group contains multiple settings:

[
  {
    "label": {
      "ar": "الألوان",
      "en": "Colors"
    },
    "settings": {
      "mainColor": {
        "type": "color",
        "label": "Main Color",
        "default": "#003033"
      },
      "secondaryColor": {
        "type": "color",
        "label": "Secondary Color",
        "default": "#f5f5f5"
      }
    }
  },
  {
    "label": {
      "ar": "شريط الإعلانات",
      "en": "Announcement Bar"
    },
    "settings": {
      "announcementEnabled": {
        "type": "boolean",
        "label": "Enable Announcement Bar",
        "default": true
      },
      "announcementText": {
        "type": "string",
        "label": "Announcement Text",
        "default": "Free shipping on orders over $50"
      }
    }
  }
]

Available Setting Types

Type	Description	Example
`string`	Single-line text input	Titles, URLs
`boolean`	Toggle switch	Enable/disable features
`number`	Numeric input (supports min/max)	Counts, sizes
`color`	Color picker	Theme colors
`css`	CSS code editor	Custom CSS
`javascript`	JavaScript code editor	Custom scripts
`media`	Media/image selector	Logo, images
`products`	Product selector	Featured products
`menu`	Menu selector	Navigation menus

settings-data.json

Stores the actual values for each setting key:

{
  "mainColor": "#ff5733",
  "announcementEnabled": true,
  "announcementText": "Welcome to our store!"
}

templates-settings.json

Defines the rendering order for templates in the layout:

{
  "templates_order": ["header", "global", "main", "footer"]
}

Using Settings in Templates

Access settings values in your Nunjucks templates:

<body style="--main-color: {{ settings.mainColor }};">
  {% if settings.announcementEnabled %}
    <div class="announcement">{{ settings.announcementText }}</div>
  {% endif %}
</body>

Files in this folder​

settings-schema.json​

Available Setting Types​

settings-data.json​

templates-settings.json​

Using Settings in Templates​