商贾欲于主题编辑器中试设计之变——按钮之色、字体之择、边框之厚、透明度。彼等不谙Liquid代码之编修；惟愿点而预览，存之。问于开发者：何以于主题编辑器显其适之旋钮，而勿使商贾破其主题？

主题编辑器之控面

Shopify之主题，有特定之文件，用以控驭商贾于主题编辑中所见之设：config/settings_schema.json。

此架构所定者：

• 主题之设——全局之控（网站之字体、品牌之色、按钮之默认）
• 分节之设——每节之控（图像、标题、每英雄节之号召行动）
• 块设置——区块内嵌控件（独立功能块）

巧设之设置架构，使商贾得有实控，而不为技术之旋钮所困.

文件结构

config/settings_schema.json定义商贾所见：

配置文件_settings_data.json_存商贾所存之值。此文件非开发者所直接编辑——每商贾于主题编辑器中存设时，即更新之。

Liquid模板取用设置，如_settings.color_button_primary_、_settings.font_heading_等。

"设计令牌应显露于何处"之正解

主控商贾可编辑之设者，乃 config/settings_schema.json 是也。于中增新设，则现于主题编辑之全局设。商贾点击预览，既存之；其变遍及诸引此设之部。

此与者异：

• config/settings_data.json - 所存之值，非其式也。
• sections/*.liquid - 各节之设，定于每节文末之谱签
• assets/*.css - 编译之CSS，不可于编辑器中修之
• templates/*.json - 页模之构，于主题编辑之定制式而修之

合于设式之型者，适于设计之符

Shopify之设范谱系，涵众类焉。若夫设范符记，其要者有：

• 色——十六进制色选器
• 色背景——可带透明之背景
• 色系——引他处所定之色系
• 字选器——择自Shopify之字库（Google字库加系统字）
• 范围 - 数值滑块（用于边框厚度、不透明度百分比、图像边框半径）
• 选择 - 下拉菜单（用于尺寸选项，如"小/中/大"）
• 复选框 - 布尔切换
• 文本 - 短文本输入（用于自定义CSS类名，若你确实需要）

就上首之境——按钮之色、字体、边框之厚、透明度——其宜设之型，乃色、字体选择器、范围也。

液体与CSS中用设

于液体中，设可通过全局设变量而得：

就众量CSS之饰，多主题将设编译为布局中之CSS自变量：

则组件CSS用其定制之属性：

此分野之故，主题编辑处之设计系统变易，一处更之，处处皆通。

复杂主题之配色方案

现代Shopify主题支持配色方案——背景、文字、按钮及点缀色之组合，以命名方式呈现，施于各区块。商贾可定"明色方案"与"暗色方案"，任择其一施于任一区块。

配色方案亦存于架构之中，然其结构自具。

此乃晨光与今世之操作系统2.0所循之范式。商贾每节择一方案；主题以方案之色恒常呈现.

字体选择器及font_url之滤器

至于字体，font_picker之设定类型将返字体之对象，含族名与加载URL。主题用font_url之滤器以载适切之样式表：

此乃所选字体之正@font-face声明也。商贾可择Shopify库中任一字体（Google Fonts与系统字体），而主题自能适应之。

非技术商贾之设置组织

设置架构井然：

• 将相关设置列于各标题之下（"色彩"、"字体排印"、"按钮"）
• 标签明晰，勿作"color_button_primary"之谬
• 附助文以明效
• 次第设罝，自重而轻
• 设合理之常度

百项未群之设罝，纵术者亦难用；十五项井然之设罝，则非术者可自信而试之。

何以示之何藏之

非每主题之值皆宜入设之纲。佳者：

• 品色
• 字体之择
• 布局之数（容之极宽、间之尺度）
• 按钮之式
• 篇级之开关（显/隐之能）

非佳者：

• 须知CSS之理（box-shadow之式，定制定位之法）
• 值若谬误则破布局（最小内边距不足则内容相叠）
• 实施之细（缓存时序，第三方ID）

其界也：值若谬而破主题之旨，则非商贾可编辑之设。

何船具良制之主题设范

主题支持非技商自服务者：

• 配置/设范.json，群组标记，预设之设
• 设计符通过CSS自定属性所取
• 设通过主题编者，以顺理之序显之
• 既定之制，可成可用之主题，无需定制
• 文牍（或编辑器中助文），释每项之设何用
• 版本之规——更易设项之ID于码，则商贾所存之值破矣

商贾能自设设计符者，于其主题愈乐。开发者之工，在供适宜之旋钮，非设陷阱也