Theme settings provide a means for merchant to customise their stores theme global settings. These can be anything from font selection to the colors that store uses or even set up how the prices are displayed at the store. Finqu editor read a single file to present the settings for the merchant: settings_schema.json. Every setting that is defined here is configurable by the merchant. All the setting values are store in the settings_data.json. This chapter focuses on creating those settings.
Settings Schema structure
{
"name": "Theme identifier",
"theme_name": "Theme public name",
"theme_author": "Author of the theme",
"theme_image": "assets/theme-image.jpg",
"theme_documentation_url": {
"en": "https://theme.doc.url"
},
"section_categories": [
{
"id": "id of the category",
"name": {
"en": "Title",
"fi": "Otsikko"
}
}
// .. other categories
],
"block_categories": [
// .. similar to sections categories but for blocks
],
"settings": [
{
// setting definition, definitions can be found from below
}
]
Section categories
Sections can be grouped in categories. Prefix your theme section categories with “theme-“ in order to avoid naming collisions with other resources for sections. Syntax for section category is
{
"id": "theme-section-category",
"name": "Category name" // can also be localised
}
Block categories
Blocks can also be grouped in categories. Prefix your theme block categories with “theme-“ in order to avoid naming collisions with other resources for blocks. Syntax for block category is
{
"id": "theme-block-category",
"name": "Category name" // can also be localised
}
Different types of settings
Below you can find a list describing all the possible settings types that you can use in theme settings. Please note that there are differences to the setting types that the sections and blocks are using and not all the types that are available there are available here or vice versa.
| Type | Description |
|---|---|
| setting-page | A navigable new setting group that can contain settings or new setting groups |
| style-editor | Define and edit styles that can be used in sections |
| heading | A setting heading |
| title | A setting title |
| spacer | Creates empty space |
| label | Defines a label on top of a setting |
| separator | Creates a horizontal rule |
| hidden | Hidden value |
| text | Text field |
| textarea | Textarea |
| color | Color picker |
| select | Select |
| range | Range |
| checkbox | Checkbox |
| radio | Radio button list |
| radio-pill | Radio pill toggle |
| richtext | Richtext editor |
| font-picker | Font picker |
| image-picker | Image picker |
| menu | Menu picker |
setting-page
{
"type": "setting-page",
"label": "Setting page label",
"title": "Setting page title", // optional
"settings": [
// list of settings
]
}
style-editor
{
"id": "styles",
"type": "style-editor",
"label": "My styles",
"settings": [
// list of settings for style
],
"presets": [
{
"id": "preset-id",
"name": "Preset name",
"default": {
// list of default values for the preset
}
}
]
}
heading
{
"type": "heading",
"label": "The actual heading",
"subheading": "This is an optional subheading"
}
title
{
"type": "title",
"label": "The actual title",
"subtitle": "This is an optional subtitle"
}
spacer
{
"type": "spacer"
}
label
{
"type": "label",
"label": "The label"
}
separator
{
"type": "separator"
}
hidden
{
"type": "hidden",
"name": "setting-id",
"default": "setting-value"
}
text
{
"type": "text",
"name": "setting-id",
"label": "Label for text",
"default": "Default value",
"placeholder": "Placeholder" // will not be visible if default value is set
}
textarea
{
"type": "textarea",
"name": "setting-id",
"label": "Label for text",
"default": "Default value",
"placeholder": "Placeholder" // will not be visible if default value is set
}
color
{
"type": "color",
"name": "setting-id",
"label": "Label for color input",
"default": "#000000"
}
select
{
"type": "select",
"name": "setting-id",
"label": "Label for select",
"default": "option-1",
"options": [
{
"value": "option-1",
"label": "Option 1"
}
// .. other options
]
}
range
{
"type": "range",
"name": "setting-id",
"label": "Label for range",
"default": 0,
"min": 0,
"max": 10,
"step": 1
}
checkbox
{
"type": "checkbox",
"name": "setting-id",
"label": "Label for checkbox",
"default": false
}
radio
{
"type": "radio",
"name": "setting-id",
"label": "Label for radio",
"default": "option-1",
"options": [
{
"value": "option-1",
"label": "Option 1"
}
// .. other options
]
}
radio-pill
{
"type": "radio-pill",
"name": "setting-id",
"label": "Label for radio pill",
"default": "option-1",
"options": [
{
"value": "option-1",
"label": "Option 1"
}
// .. other options
]
}
richtext
{
"type": "richtext",
"name": "setting-id",
"label": "Label for richtext",
"default": "<p>Example default</p>"
}
font-picker
{
"type": "font-picker",
"name": "setting-id",
"label": "Label for font picker",
"default": "Font Family 1",
"families": [
"Font Family 1",
"Font Family 2
]
}
image-picker
{
"type": "image-picker",
"name": "setting-id",
"label": "Label for image picker"
}
menu
{
"type": "menu",
"name": "setting-id",
"label": "Label for menu"
}
Conditional rendering
These settings can be conditionally rendered. Syntax is quite simple:
<setting-id> + <condition> + <value-to-compare>
{
"type": "checkbox",
"id": "checkbox",
"label": "I will hide the text when I'm selected",
"default": false
},
{
"type": "text",
"id": "textarea",
"label": "I will not be visible if checkbox is checked",
"conditions": ["checkbox eq true"]
}
Following conditions are supported:
| condition | meaning |
|---|---|
| gte | greatear or equal than |
| lte | less or equal than |
| gt | greater than |
| le | less than |
| eq | equals |
| contains | a string contains a value |
| in | value is in list, list is defined as comma separated list |