---
title: "theme.config.json"

doc_type: static
doc_category: static
doc_version: v20270301
source_url:
  html: 'https://developer.shopline.com/docs/online-store-3-0-themes/theme-structure/theme-config-json'
  md: 'https://developer.shopline.com/docs/online-store-3-0-themes/theme-structure/theme-config-json.md'
---
# theme.config.json

`theme.config.json` is the global configuration file, which is placed in the root directory of the project. This file is mainly used for:

-   **Defining the default style**: global styles, such as colors and fonts
    
-   **Storing the merchant configuration**: the global configuration data that merchants can edit through the theme editor
    
-   **Presetting multiple styles**: multiple theme styles, such as the default style and the dark style
    
-   **Managing the fixed section configuration**: the [fixed section configuration](#GKjrk) data that merchants can edit through the theme editor
    

* * *

## Data structure{#OyEe2}

The following example shows a part of the default configuration data of the [Bottle theme](https://developer.shopline.com/docs/online-store-3-0-themes/bottle.md).

```json
// theme.config.json

{
  "current": "Default",           // The currently used theme style name
  "presets": {                    // Collection of theme styles
    "Default": {                  // Default style configuration data
      "theme": {                  // Theme global configuration data 
        "color_schemes": {				// Configuration data for colors
          "scheme-1": {
            "settings": {
              "color_background": "#F3F2E0",
              ...
            }
          }
        }
      },
      "sections": {								// Static section configurations
        ...
      }
    }
  }
}
```

### Field description{#id5W6}

<table>
  <colgroup>
    <col/>
    <col/>
    <col/>
  </colgroup>
  <tbody>
    <tr>
      <th>
        <p><strong>Field</strong></p>
      </th>
      <th>
        <p><strong>Data type</strong></p>
      </th>
      <th>
        <p><strong>Description</strong></p>
      </th>
    </tr>
    <tr>
      <td colSpan="1" rowSpan="1">
        current
      </td>
      <td colSpan="1" rowSpan="1">
        String
      </td>
      <td colSpan="1" rowSpan="1">
        The currently used theme style name, such as `Default`.
      </td>
    </tr>
    <tr>
      <td colSpan="1" rowSpan="1">
        presets
      </td>
      <td colSpan="1" rowSpan="1">
        Object
      </td>
      <td colSpan="1" rowSpan="1">
        The configuration collection of theme styles. Custom styles can be added.
      </td>
    </tr>
    <tr>
      <td colSpan="1" rowSpan="1">
        presets.\{name}
      </td>
      <td colSpan="1" rowSpan="1">
        Object
      </td>
      <td colSpan="1" rowSpan="1">
        The configuration data of a theme style.
      </td>
    </tr>
    <tr>
      <td colSpan="1" rowSpan="1">
        presets.\{name}.theme
      </td>
      <td colSpan="1" rowSpan="1">
        Object
      </td>
      <td colSpan="1" rowSpan="1">
        The theme global configuration data, such as colors and fonts.
      </td>
    </tr>
    <tr>
      <td colSpan="1" rowSpan="1">
        presets.\{name}.sections
      </td>
      <td colSpan="1" rowSpan="1">
        Object
      </td>
      <td colSpan="1" rowSpan="1">
        The fixed section configurations. Refer to [JSON templates](https://developer.shopline.com/docs/online-store-3-0-themes/theme-structure/templates.md#YWmjr) for specific configuration specifications.
      </td>
    </tr>
  </tbody>
</table>

* * *

## Custom global configuration{#vJeiE}

You can set custom data for the [Global configuration definitions](https://developer.shopline.com/docs/online-store-3-0-themes/theme-structure/theme-schema-json.md#UtT0k) through the theme editor. The data will be stored in the global configuration file `theme.config.json`.

The following steps show how to change the global background color of the Bottle theme.

1.  Open the theme editor. As shown in the following image, the global background color is set to `#F3F2E0` by default.
    

<img src="https://s2cdn.myshopline.com/slfs/op-new/174721321555767/1744687145707-914a6e35-0efe-4e85-ae09-bd98495ddd81.png" alt="" />

2.  Change the global background color to `#E0F1F3`.
    
    <img src="https://s2cdn.myshopline.com/slfs/op-new/174721328017745/1744687248058-45e934cf-e96a-4854-b22c-2b07a2f8bbf2.png" alt="" />
3.  Confirm the changes in the `theme.config.json` configuration file via the theme code editor. The updated global page background color is stored in the file's `presets.{name}.theme.color_page_background`. The key name of `color_page_background` is configured in the [Global configuration definitions](https://developer.shopline.com/docs/online-store-3-0-themes/theme-structure/theme-schema-json.md#UtT0k). The following example snippet shows the page color setting in the global configuration.
    

```json
{
  "current": "Default",
  "presets": {
    "Default": {
      "theme": {
        ...
        "color_page_background": "#e0f1f3",	// The updated global configuration data
        ...
      },
      "sections": {}
    }
  }
}
```

* * *

## Multi-style configuration{#MQTyI}

You can add multiple styles for a theme for merchants to choose from in the theme shop.

### Add a new style{#Zz6Zq}

To add a new style for a theme, insert a style configuration under `presets` in the JSON file.

```json
// theme.config.json

{
  "current": "Default",
  "presets": {
    "Default": {															// The default style
      "theme": {
        "color_schemes": {				
          "scheme-1": {
            "settings": {
              "color_background": "#F3F2E0",	// Background color:color scheme 1
              ...
            }
          }
        }
      }
    },
    "Dark": {	                                // The dark style
      "theme": {
        "color_schemes": {				
          "scheme-1": {
            "settings": {
              "color_background": "#000000",	// Background color:color scheme 2
              ...
            }
          }
        }
      }
    }
  }
}
```

### Switch styles{#jHsgE}

You can switch to the dart theme style by modifying the value of `current` to `Dark`.

```json
// theme.config.json

{
  "current": "Dark",	// Switch to the dark style
  "presets": {
    "Default": {			// Default style
      ...
    },
    "Dark": {					// Dark style
      ...
    }
  }
}
```
* * *

## Fixed section configuration{#GKjrk}

You can set data for [fixed sections](https://developer.shopline.com/docs/online-store-3-0-themes/theme-structure/sections.md#WgpOI) through the theme editor. The configured data is saved in the `presets.{name}.sections` field within the `theme.config.json` file.

The following image shows the password protection page, which includes fixed sections **Password page header** and **Password page footer**. You can edit the configurations of these sections in the theme editor.

<img src="https://s2cdn.myshopline.com/slfs/op-new/174721342844853/1744697640936-de841074-228b-4ef5-b350-d8866fa7438d.png" alt="" />