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

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

`theme.config.json` 是主题的全局配置文件，位于项目根目录，主要用于：

-   **定义默认配置**：如颜色、字体等全局样式。
    
-   **存储商家全局配置**：商家通过主题编辑器修改的全局配置数据。
    
-   **支持多风格预设**：允许创建多种主题风格（如 `Default`、`Dark`）。
    
-   **存储固定组件配置**：商家通过主题编辑器修改的 [固定组件](#aLV1W) 配置数据。
    

* * *

## 数据结构{#OyEe2}

以下是主题 [Bottle](https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/bottle.md) 的部分默认配置数据：

```json
// theme.config.json

{
  "current": "Default",           // 当前使用的风格名称
  "presets": {                    // 风格配置集合
    "Default": {                  // 默认风格配置数据
      "theme": {                  // 主题全局配置数据
        "color_schemes": {        // 配色方案配置数据
          "scheme-1": {
            "settings": {
              "color_background": "#F3F2E0",
              ...
            }
          }
        }
      },
      "sections": {               // 固定组件配置
        ...
      }
    }
  }
}
```

### 字段说明{#id5W6}

<table>
  <colgroup>
    <col/>
    <col/>
    <col/>
  </colgroup>
  <tbody>
    <tr>
      <th>
        <p>字段</p>
      </th>
      <th>
        <p>数据类型</p>
      </th>
      <th>
        <p>描述</p>
      </th>
    </tr>
    <tr>
      <td colSpan="1" rowSpan="1">
        current
      </td>
      <td colSpan="1" rowSpan="1">
        String
      </td>
      <td colSpan="1" rowSpan="1">
        当前使用的风格名称（如 Default）
      </td>
    </tr>
    <tr>
      <td colSpan="1" rowSpan="1">
        presets
      </td>
      <td colSpan="1" rowSpan="1">
        Object
      </td>
      <td colSpan="1" rowSpan="1">
        风格配置集合，可添加自定义风格
      </td>
    </tr>
    <tr>
      <td colSpan="1" rowSpan="1">
        presets.\{name}
      </td>
      <td colSpan="1" rowSpan="1">
        Object
      </td>
      <td colSpan="1" rowSpan="1">
        单个风格的配置数据
      </td>
    </tr>
    <tr>
      <td colSpan="1" rowSpan="1">
        presets.\{name}.theme
      </td>
      <td colSpan="1" rowSpan="1">
        Object
      </td>
      <td colSpan="1" rowSpan="1">
        主题全局配置数据（颜色、字体等）
      </td>
    </tr>
    <tr>
      <td colSpan="1" rowSpan="1">
        presets.\{name}.sections
      </td>
      <td colSpan="1" rowSpan="1">
        Object
      </td>
      <td colSpan="1" rowSpan="1">
        固定组件配置，具体配置规范可参考 [JSON 模板](https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/theme-structure/templates.md#YWmjr)
      </td>
    </tr>
  </tbody>
</table>

* * *

## 自定义全局配置{#JBJLV}

你可以通过主题编辑器，为 [全局配置项](https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/theme-structure/theme-schema-json.md#UtT0k) 设置自定义数据，数据会存储在 `theme.config.json` 全局配置字段中。以下是 Bottle 主题修改全局页面背景颜色配置的示例：

1.  打开主题编辑器全局配置界面。如下图所示，默认情况下，全局页面背景颜色配置值为 `#F3F2E0` 。
    

<img src="https://cdn.myshopline.com/sl/slfs/sl-new/174701510897387/1744626235168-2baefe09-0fac-475c-806d-75e27c360bb1.png" alt="" />

2.  修改全局页面背景颜色配置值为 `#E0F1F3` 。
    

<img src="https://cdn.myshopline.com/sl/slfs/sl-new/174701514917590/1744627608905-c34ae90a-6540-4b48-8071-97ae710d30d7.png" alt="" />

3.  在主题代码编辑器中查看 `theme.config.json` 配置文件，更新后的全局页面背景颜色存储在该文件中的 `presets.{name}.theme.color_page_background` 下。其中 `color_page_background` 键名在 [全局配置项](https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/theme-structure/theme-schema-json.md#UtT0k) 中配置。如下片段样例展示了全局配置中的页面背景色配置：
    

```json
{
  "current": "Default",
  "presets": {
    "Default": {
      "theme": {
        ...
        "color_page_background": "#e0f1f3",	// 修改后的全局配置数据
        ...
      },
      "sections": {}
    }
  }
}
```

* * *

## 多风格配置{#oEkRQ}

你可以为主题添加多个风格，以支持商家在主题商城中选择使用。

### 添加新风格{#jpEV5}

在 JSON 文件中，可以通过在 `presets` 配置中添加一项来增加风格配置：

```json
// theme.config.json

{
  "current": "Default",
  "presets": {
    "Default": {															// 默认风格
      "theme": {
        "color_schemes": {
          "scheme-1": {
            "settings": {
              "color_background": "#F3F2E0",	// 默认风格：配色方案1，背景色配置
              ...
            }
          }
        }
      }
    },
    "Dark": {	// 暗黑风格
      "theme": {
        "color_schemes": {
          "scheme-1": {
            "settings": {
              "color_background": "#000000",	// 暗黑风格：配色方案1，背景色配置
              ...
            }
          }
        }
      }
    }
  }
}
```

### 切换风格{#jHsgE}

通过修改 `current` 字段的值为 `Dark`，即可切换到暗黑风格：

```json
// theme.config.json

{
  "current": "Dark",   // 切换到暗黑风格
  "presets": {
    "Default": {       // 默认风格
      ...
    },
    "Dark": {          // 暗黑风格
      ...
    }
  }
}
```
* * *

## 固定组件配置{#aLV1W}

你可以通过主题编辑器，为 [固定组件](https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/theme-structure/sections.md#b9bnC) 配置数据，数据会存储在 `theme.config.json` 固定组件配置字段 `presets.{name}.sections` 中。

如下截图展示了密码保护页在主题编辑器的编辑状态，左边侧栏框选区域为固定组件，你可以修改固定组件配置。

<img src="https://cdn.myshopline.com/sl/slfs/sl-new/174701522289422/1744631727155-5a1eefed-299d-4fc4-8d0c-b8b4b7fb44c7.png" alt="" />