+813-444-3589+49-231-976765-20+49-231-976765-20 | Contact us

Config Directory

This directory usually contains two files called settings.html and settings_data.json. The settings.html file defines an HTML page which acts as a kind of settings editor web page. It contains a form with various input fields, which are finally stored in a settings object and provided on building the template. This possibility of easy configuration allows users to configure the shop template in their fashion (e.g. with their corporate identity background color, etc). The input fields should give default values (where appropriate). The file settings_data.json contains JSON data, which is constructed the following way: In the top level, there are two nodes 'current' and 'presets'. While 'presets' is an array and could contain any number of presets (with the preset name as node name, the underlying object is always a complete set of settings), the 'current' node contains the default settings. The names of each setting should match those in the HTML form, the values are these specified in the input fields. Please make sure that bool values (e.g. checkboxes) are stored as bool (true) and not as a string("true"). The currently used settings of a web shop can be downloaded from the admin interface, but it will not include the enclosing 'current' or 'preset' JSON tags.

The settings, which are defined by the settings.html and settings_data.json will be stored in a Liquid variable called 'settings'. Imagine you have a setting which is called 'text_color', then you would access this variable e.g. by writing <div style="color: {{ settings.text_color }};">Demo Text</div>. You will find more information in the object type section.

The structure of the settings.html file is as follows:

You mustn't specify any HEAD, BODY or FORM tags for the HTML code, all of it will be provided by the web server. For better separation of the options, you should use FIELDSET/LEGEND and LABEL (for each input) tags to structure your settings page. Most probably the best option is to layout each FIELDSET into a table with settings names in the left column and the appropriate input field on the right. You can't use custom CSS styles and also no javascript on that page, only plain, XML compliant HTML code.

The names of input fields are the names with which the settings can be accessed later on. For example if you have this input field (with specifying a default value – where appropriate):

<input type="text" name="tagline" value="Best shop ever" />

Then you are able to access this setting using

{{ settings.tagline }}

which will be replaced in any file (including .CSS and .js files) with a .liquid extension.


Read more

Read more about input types



Other directories: