settings_data.json

The settings_data.json file contains the setting values for a theme. For example, you can use the following theme setting to allow a merchant to choose a color for the page background:

{
  "name": "Colors",
  "settings": [
    {
      "type": "color",
      "id": "color_page_bg",
      "label": "Page background",
      "default": "#FFFFFF"
    }
  ]
}

This adds an entry for color_page_bg in settings_data.json:

...
"color_page_bg": "#FFFFFF"
...

Anytime you change the value of color_page_bg in the theme editor, settings_data.json is updated with the new value.

Basic format

The settings_data.json file has two parent objects:

  • current - Contains all of the setting values that are currently saved in the theme editor.
  • presets - Contains an object for each theme style. Each object is in the same format as current.
    For example:
{
  "current": {
    "color_page_bg": "#FFFFFF",
    ...
  },
  "presets": {
    "preset-name": {
      "color_page_bg": "#000000",
      ...
    }
  }
}

Theme style

A theme style is a collection of theme setting defaults that enable merchants to easily change the general look and feel of the theme through the theme editor when getting started.

Selecting a theme style updates the current object to use the associated theme style values. However, settings for specific input types aren't changed. These inputs are determined by the kind of value they hold, which is broken down into two categories:

Presentational values

Presentational values are values from settings that are related to a visual aspect of the theme. For example, text color and font, or choosing whether or not to show a specific element.

The following input types have presentational values, and will have their values overwritten when switching theme styles:

Content values

Content values are values from settings that are related to theme content. For example, slideshow images or featured products on the homepage.

The following input types have content values, and will not be overwritten when switching theme styles: