settings_data.json​

The settings_data.json file includes theme setting values as defined in the settings_schema.json.

For instance, you can use these theme settings to let merchants select a color for the page background:

// settings_schema.json
{
  "name": "Colors",
  "settings": [
    {
      "id": "background_color",
      "type": "color_picker",
      "label": "Background",
      "default": "#FFFFFF"
    }
  ]
}

At this stage, settings_data.json will include a background_color variable:

// settings_data.json
...
"background_color": "#FFFFFF"
...

Whenever the value of background_color is changed in the theme editor, settings_data.json will be updated to reflect the new value.

Directory​

The settings_data.json file is located in the config directory:

└── theme
    ...
    ├── config
        ├── settings_data.json
        └── settings_schema.json

Structure​

The settings_data.json file contains two primary properties:

For example:

{
  "current": {
    "background_color": "#FFFFFF",
    ...
  },
  "presets": {
    "preset-name": {
       "background_color": "#000000",
       ...
    }
  }
}

Usage​

Before working with the settings_data.json file, it's essential to first understand theme styles.

Theme Styles​

Theme styles are sets of default values for theme settings. They allow merchants to easily change the overall appearance and feel of a theme using the theme editor.

Selecting a theme style changes the current object to use the associated theme values. However, only the presentational settings values will be updated.

Presentational Settings​

Presentational settings are those related to the visual aspects of the theme. Examples include the colors and fonts applied to text or whether specific elements are visible.

When switching theme styles, the values of these input types will be overridden:

• radio
• checkbox
• range
• color
• select
• font