Architecture

Configs

Configs folder consist only just the settings.json file which contains globally accessible settings across your theme templates and HTML files, which might include your color scheme, fonts and others. These settings are also available for update via the theme editor for users to manage while customizing the theme.

Location

.
└── theme
    ├── ...
    ├── configs
    |   ├── settings.json
    ├── ...
    ├── templates
    ...

Structure

The settings.json configuration file consist two major blocks, the preset which is the default configuration by the theme developer and the custom which are the changes made by the theme user from the theme editor.

{
    "preset": {
        ... // default settings and configurations. 
    },
    "custom": {
        ... // latest version of the preset settings from the theme editor changes. [optional]
    }
}

Preset - the preset block is defined by the theme developer and can be used to restore theme to default settings after changes are being made using the theme editor.

Custom - consist the latest version of the theme settings when changes are made via the theme editor by the user.

Usage

You can access these configuration settings anywhere in your theme HTML files or JSON templates files using the settings object that has been provided by the Taojaa theme engine.

{
    "preset": {
        body_background_color: "#e4c4de",
        display_newsletter_popup: true,
        ...
    }
}
Accessing Settings in Layouts, Sections and Components HTML Files.

You can access these configuration settings anywhere in your theme HTML files or JSON templates files using the settings object that has been provided by the Taojaa theme engine.

<!DOCTYPE html>
<html>
  <head>
    ...
  </head>

  <!-- using the body_background_color settings from the theme config settings -->
  <body style="background-color:{{settings.body_background_color}}"> 

    <!-- checking the newsletter display status from the config settings -->
    {{#ifCond settings.display_newsletter_popup '==' true}}
        {{{render 'newsletter-popup'}}}
    {{/ifCond}}

  </body>
</html>
<- Assets
Locales ->
ON THIS PAGE
Overview