Input settings

输入设置可以保存值，并且可以由商家配置。

输入设置通常由标准属性组成，分为两类：

了解如何在 theme 中访问这些设置值，请参考设置概述。

📘 提示

如果您想在设置展示中添加信息性元素（如标题），请参考 Sidebar 设置。

标准属性

以下是所有输入设置通用的标准属性。但根据输入类型不同，可能会有额外属性或部分属性不适用：

属性	描述	是否必填
`type`	设置类型可以是任何基础或专业输入设置类型。	是
`id`	设置 ID 用于访问设置值。	是
`label`	设置标签将在主题编辑器中显示。	是
`default`	设置的默认值。	否

基础输入设置

以下是基础输入设置类型：

checkbox

checkbox 类型的设置输出一个复选框字段。除了输入设置的标准属性外，checkbox 类型设置还具有以下属性：

属性	描述	是否必填
`info`	设置的信息提示，用法与 `label` 相同。	否

您可以使用这些字段来切换功能的开关状态，例如是否在加购按钮上显示价格。

例如，以下设置将生成如下输出：

{
  "type": "checkbox",
  "id": "enable_btn_price",
  "label": {
    "en-US": "Enable variant price on 'Add to cart ' button",
    "zh-CN": "开启加购按钮子款式价格"
  },
  "default": true,
  "info": {
    "en-US": "'Add to cart' button display effect when selecting variants",
    "zh-CN": "选中变体组合时'Add to cart'按钮的展示效果"
  }
}

输出：

访问 checkbox 类型的值时，数据以布尔值返回。

📘 说明

如果未指定 default，则默认值为 false。

range

range 类型的设置输出一个范围滑块字段。除了输入设置的标准属性外，range 类型设置还具有以下属性：

属性	描述	是否必填
`min`	输入的最小值	否
`max`	输入的最大值	否
`step`	滑块步进增量	否
`unit`	输入的单位，例如字体大小滑块可设置为 `px`。	否

您可以使用这些字段来获取不同的数值，例如字体大小。

例如，以下设置将生成如下输出：

{
  "type": "range",
  "id": "heading_font_size",
  "label": {
    "en-US": "Heading font size",
    "zh-CN": "标题字号"
  },
  "default": 20,
  "step": 1,
  "min": 16,
  "max": 32,
  "unit": "px"
}

输出：

访问 range 类型的值时，数据以数字返回。

🚧 注意

default 属性为必填项。min、max、step 和 default 属性不能为字符串值，否则将导致错误。

select

select 类型的设置输出一个下拉选择器字段。除了输入设置的标准属性外，select 类型设置还具有以下属性：

属性	描述	是否必填
`options`	下拉列表中每个选项的 `value`/`label` 定义数组。	是
`info`	设置的信息提示，用法与 `label` 相同。	否

您可以使用这些字段来获取多选项选择，例如购物车类型。

例如，以下设置将生成如下输出：

{
  "type": "select",
  "id": "cart_type",
  "label": {
    "en-US": "Cart type",
    "zh-CN": "购物车类型"
  },
  "default": "dropdown",
  "options": [
    {
      "value": "dropdown",
      "label": {
        "en-US": "Dropdown",
        "zh-CN": "下拉弹窗"
      }
    },
    {
      "value": "page",
      "label": {
        "en-US": "Page",
        "zh-CN": "页面"
      }
    }
  ]
}

输出：

访问 select 类型的值时，数据以字符串返回。

🚧 注意

如果未指定 default，则默认选中空选项。

text

text 类型的设置输出一个单行文本字段。除了输入设置的标准属性外，text 类型设置还具有以下属性：

属性	描述	是否必填
`placeholder`	输入框的占位符值，用法与 `label` 相同。	否
`info`	设置的信息提示，用法与 `label` 相同。	否

您可以使用这些字段来获取简短字符串，例如标题。

例如，以下设置将生成如下输出：

{
  "type": "text",
  "id": "heading",
  "label": {
    "en-US": "Heading",
    "zh-CN": "标题"
  },
  "default": "Sample",
  "info": {
    "en-US": "Defaults to 'Sample'",
    "zh-CN": "默认为'Sample'"
  }
}

输出：

访问 text 类型的值时，数据以字符串返回。

textarea

textarea 类型的设置输出一个多行文本字段。除了输入设置的标准属性外，textarea 类型设置还具有以下属性：

属性	描述	是否必填
`placeholder`	输入框的占位符值，用法与 `label` 相同。	否
`info`	设置的信息提示，用法与 `label` 相同。	否

您可以使用这些字段来获取较长的文本块，例如描述信息。

例如，以下设置将生成如下输出：

{
  "type": "textarea",
  "id": "description",
  "label": {
    "en-US": "Description",
    "zh-CN": "描述"
  },
  "default": "",
  "placeholder": {
    "en-US": "Enter description...",
    "zh-CN": "输入描述..."
  }
}

输出：

访问 textarea 类型的值时，数据以字符串返回。

专业输入设置

以下是专业输入设置类型：

article

article 类型的设置输出一个文章选择器字段，自动填充商店可用的文章列表。您可以使用这些字段来获取文章选择，例如在首页展示的精选文章。

例如，以下设置将生成如下输出：

{
  "type": "textarea",
  "id": "description",
  "label": {
    "en-US": "Description",
    "zh-CN": "描述"
  },
  "default": "",
  "placeholder": {
    "en-US": "Enter description...",
    "zh-CN": "输入描述..."
  }
}

输出：

访问 article 类型的值时，数据返回以下之一：

一个 article 对象。
blank，如果未选择任何内容、所选内容不可见或所选内容已不存在。

📘 说明

article 设置不支持 default 属性。

blog

blog 类型的设置输出一个博客选择器字段，自动填充商店可用的博客列表。您可以使用这些字段来获取博客选择，例如侧边栏中的精选博客。

例如，以下设置将生成如下输出：

{
  "type": "blog",
  "id": "blog",
  "label": {
    "en-US": "Blog",
    "zh-CN": "博客"
  }
}

输出：

访问 blog 类型的值时，数据返回以下之一：

一个 blog 对象。
blank，如果未选择任何内容或所选内容已不存在。

📘 说明

blog 设置不支持 default 属性。

collection

collection 类型的设置输出一个专辑选择器字段，自动填充商店可用的专辑列表。您可以使用这些字段来获取专辑选择，例如在首页展示精选商品的专辑。

例如，以下设置将生成如下输出：

{
  "type": "collection",
  "id": "collection",
  "label": {
    "en-US": "Collection",
    "zh-CN": "专辑"
  }
}

输出：

访问 collection 类型的值时，数据返回以下之一：

一个 collection 对象。
blank，如果未选择任何内容、所选内容不可见或所选内容已不存在。

color

color 类型的设置输出一个颜色选择器字段。您可以使用这些字段为各种 theme 元素（例如正文文字颜色）获取颜色选择。

例如，以下设置将生成如下输出：

{
  "type": "color",
  "id": "body_text_color",
  "label": {
    "en-US": "Body text color",
    "zh-CN": "全局文字颜色"
  },
  "default": "#121212"
}

输出：

访问 color 类型的值时，数据以字符串返回。

font_picker

font_picker 类型的设置输出一个字体选择器字段，自动填充 Shoplazza 字体库中的可用字体。

您可以使用这些字段为各种 theme 元素（例如基础标题字体）获取字体选择。

例如，以下设置将生成如下输出：

使用 settings_data.json 文件时，只需将 handle 作为默认值即可。

// 在 settings_data.json 文件中
{
  "type": "font_picker",
  "id": "heading_font",
  "label": {
    "en-US": "Heading font",
    "zh-CN": "标题字体"
  },
  "default": "jost_n4"
}

与以下方式等效：

属性	描述	是否必填
`value_type`	返回值的类型，有效值为 `json`。	是

// 在 section 中
{
  "type": "font_picker",
  "id": "heading_font",
  "label": {
    "en-US": "Heading font",
    "zh-CN": "标题字体"
  },
  "value_type": "json",
  "default": {
    "handle": "jost_n4",
    "fallback_families": "sans-serif",
    "family": "Jost",
    "font_face": "@font-face { font-family: 'Jost';  font-style: normal;  font-weight: 400;  font-display: swap;  src: url(https://fonts.gstatic.com/s/jost/v9/92zPtBhPNqw79Ij1E865zBUv7myjJTVBNIg.woff2) format('woff2');}",
    "style": "normal",
    "style_name": { "zh_CN": "标准", "en_US": "Regular 400" },
    "weight": 400
  }
}

输出：

访问 font_picker 类型的值时，数据以 font 对象返回。

🚧 注意

default 属性为必填项，缺少该属性将导致错误。您可以通过 Shoplazza 字体库中的可用字体查找可用的值。

html

html 类型的设置输出一个接受 HTML 标记的多行文本字段。您可以使用这些字段来获取自定义 HTML 内容块，例如视频嵌入代码。

例如，以下设置将生成如下输出：

{
  "type": "html",
  "id": "html",
  "label": {
    "en-US": "HTML",
    "zh-CN": "HTML"
  }
}

输出：

以下 HTML 标签将被自动移除：

<html>
<head>
<body>

访问 html 类型的值时，数据以字符串返回。

📘 说明

未闭合的 HTML 标签将导致错误，请确保输入正确的 HTML。

image_picker

image_picker 类型的设置输出一个图片选择器字段，自动填充 Shoplazza 管理后台文件区域中的可用图片，并提供上传新图片的选项。商家还可以输入 alt 文本。除了输入设置的标准属性外，image_picker 类型设置还具有以下属性：

属性	描述	是否必填
`info`	设置的信息提示，用法与 `label` 相同。	否

您可以使用这些字段来获取图片选择，例如 Logo、Favicon 和轮播图。

例如，以下设置将生成如下输出：

{
  "type": "image_picker",
  "id": "image",
  "label": {
    "en-US": "Image",
    "zh-CN": "图片"
  }
}

输出：

访问 image_picker 类型的值时，数据以字符串返回。

link_list

link_list 类型的设置输出一个菜单选择器字段，自动填充商店可用的菜单列表。除了输入设置的标准属性外，link_list 类型设置还具有以下属性：

属性	描述	是否必填
`info`	设置的信息提示，用法与 `label` 相同。	否

您可以使用这些字段来获取菜单选择，例如页脚链接使用的菜单。

例如，以下设置将生成如下输出：

{
  "type": "link_list",
  "id": "menu",
  "label": {
    "en-US": "Menu",
    "zh-CN": "菜单"
  }
}

输出：

访问 link_list 类型的值时，数据返回以下之一：

一个 linklist。
一个空对象，如果未输入任何内容。

📘 说明

default 属性为可选项，但如果使用，其值不能为空字符串。

page

page 类型的设置输出一个页面选择器字段，自动填充商店可用的页面列表。您可以使用这些字段来获取页面选择，例如在配送政策展示中使用的页面。

例如，以下设置将生成如下输出：

{
  "type": "page",
  "id": "page",
  "label": {
    "en-US": "Page",
    "zh-CN": "页面"
  }
}

输出：

访问 page 类型的值时，数据返回以下之一：

一个 page 对象。
blank，如果未选择任何内容、所选内容不可见或所选内容已不存在。

📘 说明

page 设置不支持 default 属性。

product

product 类型的设置输出一个商品选择器字段，自动填充商店可用的商品列表。您可以使用这些字段来获取商品选择，例如在首页展示的精选商品。

例如，以下设置将生成如下输出：

{
  "type": "product",
  "id": "product",
  "label": {
    "en-US": "Product",
    "zh-CN": "商品"
  }
}

输出：

访问 product 类型的值时，数据返回以下之一：

一个 product 对象。
blank，如果未选择任何内容、所选内容不可见或所选内容已不存在。

📘 说明

product 设置不支持 default 属性。

richtext

richtext 类型的设置输出一个带有以下基本格式化选项的多行文本字段：

加粗
斜体
段落

除了输入设置的标准属性外，richtext 类型设置还具有以下属性：

属性	描述	是否必填
`info`	设置的信息提示，用法与 `label` 相同。	否

您可以使用这些字段来获取格式化文本内容，例如首页上的品牌介绍内容。

例如，以下设置将生成如下输出：

{
  "type": "richtext",
  "id": "paragraph",
  "label": {
    "en-US": "Paragraph",
    "zh-CN": "段落"
  }
}

输出：

访问 richtext 类型的值时，数据以字符串返回。

spacing

spacing 类型的设置输出 top、left、right 和 bottom 字段，支持移动端和 PC 端的独立配置。

您可以使用这些字段来配置 section 的间距留白。

例如，以下设置将生成如下输出：

{
  "type": "spacing",
  "id": "spacing",
  "label": {
    "en-US": "Spacing",
    "zh-CN": "间距留白"
  },
  "default": {
    "pc": {
      "top": "40",
      "right": "",
      "bottom": "40",
      "left": ""
    },
    "mobile": {
      "top": "20",
      "right": "",
      "bottom": "20",
      "left": ""
    }
  }
}

输出：

访问 spacing 类型的值时，数据以字符串返回。

此外，还可以访问 spacing 的 pc 和 mobile 值。

例如：

PC top: {{ section.settings.spacing.pc.top }}
Mobile top: {{ section.settings.spacing.mobile.top }}

PC top: 40
Mobile top: 20

url

url 类型的设置输出一个 URL 输入字段，您可以在其中手动输入外部 URL 和相对路径。它还包含一个选择器，自动填充商店的以下可用资源：

首页
专辑
商品
文章
博客
页面
订单查询
自定义 URL

您可以使用这些字段来获取 URL 选择，例如轮播图按钮的链接 URL。

例如，以下设置将生成如下输出：

{
  "type": "url",
  "id": "button_link",
  "label": {
    "en-US": "Button link",
    "zh-CN": "按钮链接"
  }
}

输出：

访问 url 类型的值时，数据返回以下之一：

包含所选 URL 的对象。
空字符串，如果未输入任何内容。

📘 说明

url 设置不支持 default 属性。

video_picker

video 类型的设置输出一个视频选择器，商家还可以上传新视频。除了输入设置的标准属性外，video_picker 类型设置还具有以下属性：

属性	描述	是否必填
`info`	设置的信息提示，用法与 `label` 相同。	否

例如，以下设置将生成如下输出：

{
  "type": "video_picker",
  "id": "video",
  "label": {
    "en-US": "Video",
    "zh-CN": "视频"
  }
}

输出：

访问 video 类型的值时，数据返回以下之一：

一个 video 对象。
nil，如果未进行选择。

video_url

video_url 类型的设置输出一个 URL 输入字段。除了输入设置的标准属性外，video_url 类型设置还具有以下属性：

属性	描述	是否必填
`accept`	接受的视频平台数组，有效值为 `youtube`、`vimeo` 或两者均包含。	是
`value_type`	返回值的类型，有效值为 `json`。	是
`placeholder`	输入框的占位符值，用法与 `label` 相同。	否
`info`	设置的信息提示，用法与 `label` 相同。	否

{
  "type": "video_url",
  "id": "video",
  "value_type": "json",
  "accept": ["youtube", "vimeo"],
  "label": {
    "en-US": "Video",
    "zh-CN": "视频"
  }
}

输出：

访问 video_url 类型的值时，数据返回以下之一：

包含已输入 URL 的字符串。
nil，如果未输入任何内容。

此外，还可以访问视频的 id 和 type（youtube 或 vimeo）。

例如，假设您将此视频与上述设置结合使用，以下 Liquid 代码将生成如下输出：

ID: {{ section.settings.video.id }}
Type: {{ section.settings.video.type }}

ID: V4M4m24uNlY
Type: youtube

创建链接

您可以在 info 设置属性中添加链接，方法是将链接文字用 <a> 标签包裹，并在其后紧跟括号中的 URL。

例如，以下设置将生成如下输出：

{
  "type": "checkbox",
  "id": "show_filter",
  "label": {
    "zh-CN": "开启筛选",
    "en-US": "Enable filter"
  },
  "info": {
    "en-US": "To display the filter, add and <a href='/admin/smart_apps/store/menus' target='_blank'>customize filters</a>.",
    "zh-CN": "展示筛选器需要在后台添加<a href='/admin/smart_apps/store/menus' target='_blank'>筛选纬度</a>。"
  },
  "default": true
}

输出：

标准属性​

基础输入设置​

checkbox​

range​

select​

text​

textarea​

专业输入设置​

article​

blog​

collection​

color​

font_picker​

html​

image_picker​

link_list​

page​

product​

richtext​

spacing​

tags​

url​

video_picker​

video_url​

创建链接​

标准属性

基础输入设置

checkbox

range

select

text

textarea

专业输入设置

article

blog

collection

color

font_picker

html

image_picker

link_list

page

product

richtext

spacing

tags

url

video_picker

video_url

创建链接