Theme Configuration

Theme configuration allows you to make it easy for clients to customize their website design.

Some example uses include:

  • Allow them to upload their own logo.
  • Enable clients to manage content in the header and footer that is usually hard-coded in HTML.
  • Allow customers to add their own social networking links.
  • Turn on or off certain UI elements.

As the website designer/developer, you have full control over what the fields are and how they are organized.

Global variables

Theme settings can also be treated as global variables since they are made available to all templates.

Accessing theme variables in templates

All theme settings are accessed under the _core.theme.settings variable.

For example, if you create a theme setting called "Logo" that allowed someone to upload a new logo, then below is how you could use that image in your templates.

<div class="Header">
    {% set _core.theme.settings.logo.alt = _core.theme.settings.companyName %}
    {{ _core.theme.settings.logo.tag }}
</div>

Creating theme settings

You set up the theme configuration in the theme.json file. The theme.json file will go inside the theme folder.  For example, if your theme's folder is called custom and themes is the name of the folder where themes are stored, then you would have the following directory/file structure:

themes
  custom
    template
    theme.json

Sample code

Below is an example showing all of the different configuration field types. This also shows how to organize fields in groups (tabs) as well as setting default values.