样式设置（Style settings）

开发者预览

样式设置目前仅作为 Flex 分区开发者预览的一部分提供。

样式设置是输入设置的一个新类别，可保存映射到 CSS 属性的值。与其他输入设置在所有断点中共享同一值不同，样式设置可以为不同的断点保存不同的值。

样式设置分为两类：

类别	描述
样式面板设置	Shopify 组织的设置，映射到如布局、尺寸和间距等 CSS 属性类别。
样式输入设置（即将推出）	可根据断点保存可变值的输入设置，直接绑定到可控制的 CSS 属性。

如需了解如何在主题中访问这些设置的值，请参考用法部分。

标准属性

以下是在所有样式设置中通用的属性：

属性	描述	是否必填
`type`	设置类型，可为样式面板或样式输入设置类型	是
`id`	设置 ID，用于访问设置值	是
`label`	设置标签，将显示在主题编辑器中	是
`default`	设置的默认值	否
`info`	可选的设置说明文字	否

样式面板设置（Style Panel Settings）

样式面板设置将多个输入组合成一个面板，简化在主题中设置可由商家编辑的样式设置流程。添加一个样式面板设置即可获得一整套相关的样式设置，映射到 CSS 属性。样式面板是持续更新的，将来会不断新增 CSS 属性。

当前可用的面板类型包括：

尺寸
间距
布局

未来还将推出更多面板类型。

尺寸（Size）

style.size_panel 类型的样式面板控制元素的宽度和高度。

示例：

{
  "type": "style.size_panel",
  "id": "size",
  "label": "Size",
  "default": {
    "width": "25%",
    "height": "auto"
  }
}

支持的属性与默认值如下：

属性	支持的值	默认值
`width`, `min-width`	`auto`, `%`, `px`	`auto`
`height`, `min-height`	`auto`, `%`, `px`	`auto`
`max-width`, `max-height`	`%`, `px`, `none`	`none`
`flex-grow`	`数字`	`0`
`flex-shrink`	`数字`	`1`
`flex-basis`	`auto`, `%`, `px`	`auto`

间距（Spacing）

style.spacing_panel 类型的样式面板用于控制元素的内边距（padding）和外边距（margin）。

示例：

{
  "type": "style.spacing_panel",
  "id": "spacing",
  "label": "Spacing",
  "default": {
    "padding": "16px 2px",
    "margin": "0px"
  }
}

支持的属性包括 padding-*, margin-* 物理和逻辑属性，支持简写和逐项属性。

默认值为 0px。

注意：

虽然支持输入物理属性，但最终呈现到商店前端的是逻辑属性（如 padding-inline-start）。

布局（Layout）

style.layout_panel 类型的样式面板用于控制容器中项目的方向、定位和对齐方式。

示例：

{
  "type": "style.layout_panel",
  "id": "layout",
  "label": "Layout",
  "default": {
    "display": "flex",
    "flex-direction": "row",
    "flex-wrap": "wrap",
    "gap": "20px",
    "justify-items": "flex-start",
    "align-items": "center"
  }
}

支持的属性如下：

属性	支持的值	默认值
`display`	`flex`	`flex`
`flex-direction`	`row`, `column`	`row`
`flex-wrap`	`wrap`, `no-wrap`	`no-wrap`
`align-items`	`flex-start`, `center`, `flex-end`, `baseline`, `stretch`	`flex-start`
`justify-content`	`flex-start`, `center`, `flex-end`, `space-around`, `space-between`, `space-evenly`	`flex-start`
`align-content`	`flex-start`, `center`, `flex-end`, `space-around`, `space-between`, `space-evenly`, `baseline`, `normal`	`normal`
`gap`, `row-gap`, `column-gap`	`%`, `px`	`0px`

使用方式

在使用 style settings（样式设置）时，你需要了解以下内容：

如何使用 style settings
如何访问 style settings
如何将 style settings 应用到元素上
如何为不同 breakpoint 设置不同的 style 值
如何覆盖默认的 style setting 值

如何使用 style settings

你目前可以在以下位置使用 style settings：

而你很快也可以在以下位置使用：

App blocks

如何访问 style settings

跟其他 input settings 一样，你可以通过对应设置的 id 属性在 Liquid 中访问 style settings。例如，假设有一个 id 是 "layout" 的设置：

Theme settings: {{ settings.layout }}
Section: {{ section.settings.layout }}
Block: {{ block.settings.layout }}

如何将 style settings 应用到元素上

你可以使用 Liquid 中的 class_list filter，把 style settings 应用到任意元素上：

<div class="group {{ block.settings.layout | class_list }}">
  {% content_for "blocks" %}
</div>
{% schema %}
{
  "name": "Group",
  "blocks": [{"type": "@theme"}, {"type": "@app"}],
  "settings": [
    {
      "type": "style.layout_panel",
      "id": "layout",
      "label": "Layout",
      "default": {
        "flex-direction": "column"
      }
    }
  ]
}
{% endschema %}

这样设置后，这个元素就会应用该 style setting 的默认值，以及商家在 theme editor 中做的任何修改。

你可以把多个不同的 style settings 应用到同一个元素上，或者把一个 style setting 应用到多个元素上。比如这样：

<div class=”wrapper {{ block.settings.spacing | class_list }}”>
  <div class="group {{ block.settings.layout | class_list }}">
    {% content_for “blocks” %}
  </div>
</div>
{% schema %}
{
  "name": "Group",
  "blocks": [{"type": "@theme"}, {"type": "@app"}],
  "settings": [
    {
      "type": "style.layout_panel",
      "id": "layout",
      "label": "Layout",
      "default": {
        "flex-direction": "column"
      }
    },
    {
      "type": "style.spacing_panel",
      "id": "spacing",
      "label": "Spacing",
      "default": {
        "padding": "20px"
      }
    }
  ]
}
{% endschema %}

如果你想把一个 section 或 block 的所有 style settings 都应用到同一个元素上，你可以直接在 block.settings 或 section.settings 上用 class_list：

<div class="group {{ block.settings | class_list }}">
  {% content_for “blocks” %}
</div>
{% schema %}
{
  "name": "Group",
  "blocks": [{"type": "@theme"}, {"type": "@app"}],
  "settings": [
    {
      "type": "style.layout_panel",
      "id": "layout",
      "label": "Layout",
      "default": {
        "flex-direction": "column"
      }
    },
    {
      "type": "style.spacing_panel",
      "id": "spacing",
      "label": "Spacing",
      "default": {
        "padding": "20px"
      }
    }
  ]
}
{% endschema %}

注意事项

你可以把多个不同类型的 style panel settings 应用到同一个元素上，但如果是相同类型的 style panel settings 应用到同一个元素上，它们会互相覆盖。

把 style settings 应用到合适的元素上

你可以根据需要多次使用 style settings，应用到任何元素上。但要注意的是，style settings 应用在哪个元素上会影响它的效果。

比如，这里是一些推荐的做法：

如果你想让商家可以完全自定义布局，建议把 style.layout_panel 设置应用到包裹 {% content_for "blocks" %} 的元素上。
如果你打算让商家控制区块的大小，建议把 style.size_panel 设置应用到最外层的元素上。因为像 flex-grow、flex-shrink 和 flex-basis 这类属性只有在直接作用于 flex 容器的子元素上才有效，而这个子元素通常是包裹 {% content_for "blocks" %} 的那个元素。

下面是一个把 style.size_panel 设置应用到 theme block 最外层元素的示例：

<button class="button {{ block.settings.size | class_list }}" {{ block.shopify_attributes }}>
  {{ block.settings.text }}
</button>
{% schema %}
{
  "name": "Button",
  "tag": null,
  "settings": [
    {
      "type": "text",
      "id": "text",
      "label": "Content",
      "default": "Shop now"
    },
    {
      "type": "style.size_panel",
      "id": "size",
      "label": "Size",
      "default": {
        "flex-grow": "1"
      }
    }
  ]
}
{% endschema %}

说明

Shopify 会自动把 theme block 的内容包裹在一个 wrapper 元素中。如果你不想这样，可以把 tag 属性设置为 null。一旦设置为 null，Shopify 就不会再额外包裹这个区块内容，而是直接输出。

另外，为了让 theme editor 能识别该区块，记得要加上 {{ block.shopify_attributes }}。更多内容请参考 Rendering blocks without a wrapper。

为不同 breakpoint 设置 style 值

style settings 支持为不同的 breakpoint 存储不同的值。你可以在默认设置和 preset 中为每个 breakpoint 指定不同的值。

要为特定 breakpoint 设置样式属性，可以通过 @media 查询来覆盖默认值：

{
  "type": "style.spacing_panel",
  "id": "spacing",
  "label": "Spacing",
  "default": {
    "padding": "20px",
    "margin": "10px",
    "@media (--mobile)": {
      "padding": "10px",
      "margin": "0px"
    }
  }
}

在 theme editor 中，当商家切换到 mobile breakpoint 时，这些值会作为 override 出现在侧边栏中。

说明

目前只支持 mobile breakpoint，不过将来会加入更多 breakpoint，比如 tablet。mobile 的默认 breakpoint 是 750 像素及以下。将来你可以配置这个值，也可以配置其他新加的 breakpoint。

覆盖默认 style setting 值

你可以在 preset 中覆盖默认的 style setting 值。商家的修改会保存在 JSON 模板文件中。

下面是一个为 Columns（横向布局）和 Rows（纵向布局）预设不同方向的示例：

<div class="
  group
  {{ block.settings.layout | class_list }}
  {{ block.settings.spacing | class_list }}
">
  {% content_for "blocks" %}
</div>
{% schema %}
{
  "name": "Group",
  "blocks": [{"type": "@theme"}, {"type": "@app"}],
  "settings": [
    {
      "type": "style.layout_panel",
      "id": "layout",
      "label": "Layout",
      "default": {
        "display": "flex",
        "gap": "20px"
        "flex-direction": "row",
        "flex-wrap": "wrap"
      }
    }
  ],
  "presets": [
    {
      "name": "Columns",
    },
    {
      "name": "Rows",
      "settings": {
        "flex-direction": "column"
      }
    }
  ]
}
{% endschema %}

你可以看到，只需要覆盖 flex-direction 这个属性，其它属性会继续使用默认值。

商家在 theme editor 中做的修改会保存在他们正在编辑的模板文件中：

{
  "sections": {
    "section-id": {
      "type": "section",
      "block_order": ["block-id"],
      "blocks": {
        "block-id": {
          "type": "group",
          "settings": {
            "layout": {
              "flex-direction": "column",
              "@media (--mobile)": {
                "column-gap": "0px",
                "row-gap": "0px"
              }
            }
          }
        }
      }
    }
  },
  "order": [
    "section-id"
  ]
}