The `settings_data.json` file contains the setting values for a theme based on the settings included in [settings_schema.json](/docs/storefronts/themes/architecture/config/settings-schema-json).

For example, you can use the following theme setting to allow a merchant to choose a color for the page background:

<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>

<script data-option="filename" data-value="config/settings_schema.json"></script>

<script type="text/plain" data-language="json">
{
  "name": "Colors",
  "settings": [
    {
      "type": "color",
      "id": "color_page_bg",
      "label": "Page background",
      "default": "#FFFFFF"
    }
  ]
}
</script>

</div>
</p>


This adds an entry for `color_page_bg` in `settings_data.json`:

<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>

<script data-option="filename" data-value="config/settings_data.json"></script>

<script type="text/plain" data-language="json">
...
"color_page_bg": "#FFFFFF"
...
</script>

</div>
</p>


> Tip:
> In this example, the value of `color_page_bg` is `#FFFFFF` due to the [default](/docs/storefronts/themes/architecture/settings/input-settings#standard-attributes) setting attribute.

Any time that the value of `color_page_bg` is changed in the theme editor, `settings_data.json` is updated with the new value.

## Location

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

```text
└── theme
    ...
    ├── config
        ├── settings_data.json
        └── settings_schema.json
    └── locales

```

## Schema

The `settings_data.json` file has the following parent objects:

| Object | Description | Required |
| --- | --- | --- |
| `current` | Contains all of the setting values that are currently saved in the theme editor. | Yes |
| `presets` | Contains an object for each [theme style](#theme-styles). Each object is in the same format as `current`. | Yes |
| `platform_customizations` | Contains setting values for [platform-controlled settings](#platform-controlled-settings). | No - this object is added by Shopify if a merchant uses a platform-controlled setting. |

For example:

```json
{
  "current": {
    "color_page_bg": "#FFFFFF",
    ...
  },
  "presets": {
    "preset-name": {
      "color_page_bg": "#000000",
      ...
    }
  }
}
```

## Usage

When you're working with the `settings_data.json` file, you should familiarize yourself with the following concepts:

- [Theme styles](#theme-styles)
- [Platform-controlled settings](#platform-controlled-settings)
- [Limitations](#limitations)

### Theme styles

A theme style is a collection of theme setting defaults that enable merchants to easily [change the general look and feel of the theme](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#change-theme-styles) through the theme editor when getting started.

Selecting a theme style updates the `current` object to use the associated theme style values. However, only values from [presentational settings](#presentational-settings) are updated.

#### Presentational settings

Presentational settings are settings that are related to a visual aspect of the theme. Examples of presentational settings include the color and font applied to text, or whether a specific element is visible.

The following input types are presentational settings. Values for these settings are overwritten when switching theme styles.

- [checkbox](/docs/storefronts/themes/architecture/settings/input-settings#checkbox)
- [color](/docs/storefronts/themes/architecture/settings/input-settings#color)
- [color_background](/docs/themes/architecture/settings/input-settings#color_background)
- [color_scheme](/docs/themes/architecture/settings/input-settings#color_scheme)
- [color_scheme_group](/docs/themes/architecture/settings/input-settings#color_scheme_group)
- [font_picker](/docs/themes/architecture/settings/input-settings#font_picker)
- [number](/docs/storefronts/themes/architecture/settings/input-settings#number)
- [radio](/docs/storefronts/themes/architecture/settings/input-settings#radio)
- [range](/docs/storefronts/themes/architecture/settings/input-settings#range)
- [select](/docs/storefronts/themes/architecture/settings/input-settings#select)

### Platform-controlled settings

In the theme editor, Shopify exposes a [custom CSS setting](https://help.shopify.com/manual/online-store/themes/theme-structure/extend/add-css) at the theme and section level. Any custom CSS the merchant adds at the theme level is stored in the `platform-customizations` object's `custom_css` attribute.

This setting is intended to enable users to customize the look and feel of their storefront without editing theme code. As a theme developer, you shouldn't add this setting, or edit the value of this setting after it's set. Instead, you should use dedicated [CSS assets](/docs/storefronts/themes/architecture#assets) and [`stylesheet` Liquid tags](/docs/storefronts/themes/architecture/sections/section-assets#stylesheet), and introduce customization options for CSS in these areas using [theme settings](/docs/storefronts/themes/architecture/settings).


### Limitations

- The `settings_data.json` file size can't exceed 1.5MB.
- A theme can't contain more than five styles.