The `settings_schema.json` file controls the organization and content of the **Theme settings** area of the theme editor. All setting selections in the theme editor are saved in [settings_data.json](/docs/storefronts/themes/architecture/config/settings-data-json). ## Location The `settings_schema.json` file is located in the `config` directory of the theme: ```text └── theme ... ├── config ├── settings_data.json └── settings_schema.json └── locales ``` ## Schema The `settings_schema.json` file is an array of objects that represent setting categories. Each object needs to have the following attributes: | Attribute | Description | Required | | --- | --- | --- | | `name` | The name of the category of settings. | Yes | | `settings` | An array of associated [settings](/docs/storefronts/themes/architecture/settings). | Yes | The `settings_schema.json` file should follow the following basic format: ```json [ { "name": "Category", "settings": [ ... ] }, ... ] ``` The `settings_schema.json` file is a JSON file, so all content must be valid JSON. Additionally, make sure you follow the appropriate syntax for your desired setting. ## Usage When working with the `settings_schema.json` file, familiarize yourself with the following: - [setting types](#setting-types) - [accessing settings](#access-settings) - [adding theme metadata](#add-theme-metadata) ### Setting types There are two categories of settings: | Category | Description | | --- | --- | | [Input settings](/docs/storefronts/themes/architecture/settings/input-settings) | Settings that can hold a value, and are configurable by app users. | | [Sidebar settings](/docs/storefronts/themes/architecture/settings/sidebar-settings) | Settings that can’t hold a value, and aren’t configurable by app users. They’re informational elements that can be used to provide detail and clarity for your input settings. | ### Access settings Theme settings can be accessed through the [settings object](/docs/api/liquid/objects/settings). To learn more about the syntax and considerations, refer to [Access settings](/docs/storefronts/themes/architecture/settings#access-settings). ### Add theme metadata As a theme author, you can include additional metadata for your theme in the **Theme actions** menu of the theme editor. This menu appears at the left of the theme editor top bar: <figure class="figure"><img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/themes/theme-editor/theme-info-panel-highlighted-a706485d9f85e6e2481e8f3b72ccedc42c50b1fc1d83af5b3a4298bb2598613f.png" class="lazyload" width="344" height="408"></figure> To add this metadata, you can include a `theme_info` object in the `settings_schema.json` file. This object must include the following attributes: | Attribute | Description | Required | | --- | --- | --- | | `name` | The value of this attribute must be `theme_info`. | Yes | | `theme_name` | The name of the theme. | Yes | | `theme_author` | The author of the theme. | Yes | | `theme_version` | The version number of the theme. | Yes | | `theme_documentation_url` | A URL where merchants can find documentation for the theme. | Yes | | `theme_support_email` | An email address that merchants can contact for support for the theme. | See note | | `theme_support_url` | A URL where merchants can find support for the theme. | See note | > Caution: > All of the above attributes are required. However, you need to specify only `theme_support_email` or `theme_support_url`, not both. Including both of these attributes, or excluding any other attributes, will result in an error. For example: <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="settings_schema.json"></script> <script type="text/plain" data-language="json"> [ { "name": "theme_info", "theme_name": "Dawn", "theme_author": "Shopify", "theme_version": "1.0.0", "theme_documentation_url": "https:\/\/help.shopify.com\/manual\/online-store\/themes\/os20\/themes-by-shopify\/dawn", "theme_support_url": "https:\/\/support.shopify.com\/", }, ... ] </script> </div> </p>