跳到主要内容

概述

为了让商家更方便地自定义您的 theme，您可以使用 JSON 创建商家可以通过主题编辑器访问的设置。

您可以在 theme、section 或 block 级别提供设置。设置可以是固定的（例如信息展示元素）或交互式的（例如下拉菜单）。设置值可以是静态的，也可以使用动态数据源来渲染与上下文相关的值。

开放设置功能可以使您的 theme 更具可定制性，从而更好地呈现商家的品牌。同时也能让您的 theme 更灵活，以适应各种商家的不同使用场景。

子类型​

设置分为两类：

类别描述
输入设置可以保存值的设置，可由应用用户配置。
Sidebar 设置不保存值的设置，不可由应用用户配置。这些是信息展示元素，可为输入设置提供说明和补充信息。

位置​

您可以在以下位置创建设置：

└── theme
    ├── config
    |   ├── settings_schema.json
    |   ...
    ├── sections
    |   ├── product_detail.liquid
    |   ├── collection_detail.liquid
    |   ...
    ...

settings_schema.json​

settings_schema.json 文件控制主题编辑器中主题设置区域的内容。该文件中的设置对应全局主题设置，可通过 Liquid settings 对象访问。

Section schema​

Section 的 {% schema %} tag 用于创建 section 设置和 block 设置。这些设置分别通过 section 对象和 block 对象的 settings 属性访问。

Schema​

设置以 JSON 的 settings 属性形式定义，作为其适用对象的子属性。该属性接受一个设置数组。

{
  ...
  "settings": [
    {
      "type": "checkbox",
      "id": "show_thumb_mb",
      "label": {
        "zh-CN": "开启移动端缩略图",
        "en-US": "Enable mobile thumbnails"
      },
      "default": true
    },
    {
      "type": "checkbox",
      "id": "zoom_on",
      "label": {
        "zh-CN": "悬停放大图片",
        "en-US": "Hover to zoom image"
      },
      "info": {
        "zh-CN": "仅在桌面端悬停图片时有效",
        "en-US": "Only works when hovering images on desktop"
      },
      "default": false
    },
  ]
  ...
}

使用说明​

使用设置时，您应该熟悉以下内容：

访问设置​

根据创建位置的不同，您可以通过以下 Liquid 对象访问设置：

要访问特定设置，请将该设置的 id 属性追加到对应的对象后面。

例如，假设您在各 Liquid 对象中都实现了以下设置：

{
  "type": "text",
  "id": "title",
  "label": "Title",
  "default": "Featured"
}

那么以下 Liquid 代码将生成如下输出：

<!-- 设置 -->
Title: {{ settings.title }}

<!-- Section -->
Title: {{ section.settings.title }}

<!-- Block -->
Title: {{ block.settings.title }}
<!-- 设置 -->
Title: Featured

<!-- Section -->
Title: Featured

<!-- Block -->
Title: Featured

检查设置值格式​

在引用设置时，您应始终验证值是否符合预期格式。没有自动默认值的设置可能没有值，这将转换为空字符串。

例如，如果您有一个 id 为 title 的设置，以下 Liquid 代码将根据值的不同生成以下输出：

<!-- 无值 -->
Title: {{ settings.title }}

<!-- 有值 -->
Title: {{ settings.title }}
<!-- 无值 -->
Title:

<!-- 有值 -->
Title: Featured

您可以使用 blank 运算符检查值是否为空字符串。例如：

{% unless settings.title == blank %}
  {{ settings.title }}
{% endunless %}

基于资源的设置​

为避免出现空字符串，请检查值是否符合预期格式。可能出现的情况包括：未选择任何资源、所选资源已不存在，或所选资源已被隐藏。

例如，如果您有以下 page 类型设置：

{
  "type": "page",
  "id": "page",
  "label": "Page"
}

您可以按如下方式检查空值：

{% if section.settings.page != blank %}
  {{ section.settings.page.title }}
  {{ section.settings.page.url }}
{% else %}
  No page, or invalid page, selected.
{% endif %}

动态数据源​

包含在 Liquid template 中的 section 和 block 的设置，可以为商家提供连接一个或多个动态数据源的选项，具体取决于设置类型。

了解更多关于动态数据源的内容。

平台控制的设置​

在主题编辑器中，Shoplazza 在 theme 级别提供了自定义 CSS 设置。