templates

templates 目录包含了主题的多种页面类型模板文件，模板文件定义了页面的布局和内容展示方式，支持 .html 和 .json 两种文件后缀格式：

HTML 模板：适用于固定页面内容，通常用于静态页面，内容固定且不依赖动态数据。
JSON 模板：适用于动态页面，支持通过组件灵活搭建页面结构

目录结构

以下是标准主题的页面模板目录结构：

templates
├── customers	            		# 客户相关页面
│   ├── account.json				# 账户页
│   ├── activate_account.json		# 账户激活页
│   ├── addresses.json    			# 地址管理页
│   ├── company.json      			# 公司注册页
│   ├── forgot_password.json 		# 忘记密码页
│   ├── login.json        			# 登录页
│   ├── order.json        			# 订单详情页
│   ├── orders.json       			# 订单列表页
│   └── register.json     			# 注册页
├── 404.json              			# 404错误页
├── article.json          			# 博客详情页
├── blog.json             			# 博客列表页
├── cart.json             			# 购物车页
├── collection.json       			# 商品分类详情页
├── collections_all.json  			# 商品分类集合页
├── gift_card.html        			# 礼品卡页面（静态 HTML）
├── index.json            			# 首页
├── page.contact.json     			# 联系我们页面
├── page.json             			# 自定义页面
├── page.order_tracking.json 		# 订单跟踪页面
├── password.json         			# 密码保护页
├── policy.html           			# 政策页面（静态 HTML）
├── product.json          			# 商品详情页
├── proofing.html         			# 打烊页（静态 HTML）
└── search.json           			# 搜索结果页

模板类型

每个模板文件都对应一种模板类型，一种模板有一个或多个访问路径：

模板类型	访问路径	文件路径	描述
index	/	templates/index.json	店铺首页
password	/password	templates/password.json	店铺密码保护页，展示密码填写表单信息
proofing	/proofing	templates/proofing.html	店铺打烊页，展示打烊后的页面
404	/404	templates/404.json	无效URL时展示的404页
cart	/cart	templates/cart.json	购物车页，展示商品加购后的购物车列表
search	/search	templates/search.json	搜索结果页，展示搜索结果列表
product	/products/{productHandle}	templates/product.json	商品详情页，展示商品的sku、优惠、加购按钮等信息
collections_all	/collections-all	templates/collections_all.json	商品分类集合页，展示全部商品分类
collection	/collections/{collectionHandle}	templates/collection.json	商品分类详情页，展示单个商品分类下的全部商品
gift_card	/gift_cards/{storeId}/{handle}	templates/gift_card.html	礼品卡页面，展示发给用户的礼品卡
blog	/blogs/{blogHandle}	templates/blog.json	博客列表页，展示全部博客列表
article	/blogs/{blogHandle}/{articleHandle}	templates/article.json	博客详情页，展示博客信息
page	/pages/{handle}	templates/page.json	自定义页面，展示自定义内容信息
policy	/policies/{handle}	templates/policy.json	政策页，展示政策合规信息
login	/user/signIn	templates/customers/login.json	客户登录页，展示用户登录表单
register	/register	templates/customers/register.json	客户注册页，展示用户注册表单
company	/user/company	templates/customers/company.json	公司注册页，展示公司注册表单
activate_account	/user/activate	templates/customers/activate_account.json	账户激活页，展示账户激活表单
forgot_password	/user/passwordNew	templates/customers/forgot_password.json	忘记密码页，展示重置密码表单
account	/user/center	templates/customers/account.json	账户页，展示账户的信息
addresses	/user/address/new	templates/customers/addresses.json	地址管理页，用于地址列表展示及创建地址表单
addresses	/user/address/{addressSeq}/edit	templates/customers/addresses.json	地址管理页，用于地址列表展示及创建地址表单
orders	/user/orders	templates/customers/orders.json	订单列表页，展示全部订单列表
order	/user/orders/{id}	templates/customers/order.json	订单详情页，展示订单信息

HTML 模板

静态页面模板，文件后缀名为 .html，可直接在文件中写 HTML / CSS / Javascript 及 Sline 模板语法，不支持商家在可视化编辑器动态搭建内容，一般用于政策页、打烊页等不需要商家灵活配置且内容相对固定的页面。

JSON 模板

动态页面模板，文件后缀名为 .json，以一定的数据结构规范，渲染出动态组件数据。

核心字段

JSON 数据中基本会包含以下几个字段：

字段	数据类型	必填	描述
layout	string	否	指定布局文件（如 theme.html）
sections	object	是	存放页面组件配置数据
order	array	是	存放组件显示顺序

结构规范

以下是一个 JSON 模板的数据规范：

{
  layout: <LayoutName>,
  sections: {
    <SectionID>: {
      "type": <SectionType>,
      "disabled": <SectionDisabled>,
      "settings": {
        <SettingID>: <SettingValue>
      },
      "blocks": {
        <BlockID>: {
          "type": <BlockType>,
          "settings": {
            <SettingID>: <SettingValue>
          },
          "blocks": {
            <BlockID>: {
              "type": <BlockType>,
              "settings": {
                <SettingID>: <SettingValue>
              }
            }
          }
        }
      },
      "block_order": <BlockOrder>
    }
  },
  "order": <SectionOrder>
}

字段说明

字段	数据类型	描述
<LayoutName>	String	指定布局文件，默认为 `layout.theme.html`
<SectionID>	String	全局唯一随机 hash 字符串，组件的唯一标识
<SectionType>	String	组件文件名
<SectionDisabled>	Boolean	组件显示状态，默认为 `false`，即隐藏，`true` 为显示
<BlockID>	String	全局唯一随机 hash 字符串，区块的唯一标识
<BlockType>	String	区块文件名
<BlockOrder>	String	<BlockID> 列表，决定区块的渲染顺序
<SectionOrder>	String	<SectionID> 列表，决定组件的渲染顺序
<SettingID>	String	配置项 ID，在 schema 中自定义
<SettingValue>	String	配置项值，由商家自定义

结构示例

下面是一个密码页模板的数据结构示例：

{
  "layout": "password",
  "sections": {
    "main-password": {
      "type": "main-password",
      "settings": {...},
      "blocks": {
        "content": {
          "type": "$content-group",
          "settings": {...},
          "blocks": {
            "heading": {
              "type": "heading",
              "settings": {
                "text": "Opening soon"
              }
            }
          }
        }
      },
      "block_order": ["content"]
    }
  },
  "order": ["main-password"]
}

多模板风格支持

为提升页面展示灵活性，支持为同一页面类型创建多个模板文件（如不同风格的商品详情页）。以下是一个创建和使用新模板的基本步骤：

复制模板文件

在 templates 目录下复制 product.json 并重命名为 product.shoes.json。文件内容如下：

{
  "sections": {
    "main-product-info": { ... },
    "recommended-product": { ... }
  },
  "order": ["main-product-info", "recommended-product"]
}

注意:

多模板支持功能只适用于 JSON 模板。
模板文件命名必须遵循 {模板类型}.{模板名称}.json 格式。

调整组件顺序（可选）

修改 product.shoes.json 中的 order 字段，调整组件显示顺序：

{
  "sections": {
    "main-product-info": { ... },
    "recommended-product": { ... }
  },
  "order": ["recommended-product", "main-product-info"]
}

分配模板

在商家后台为指定商品选择 Shoes 模板：

验证效果

访问商品详情页，确认组件顺序已更新。

这篇文章对你有帮助吗？

SHOPLINE

条款协议

templates​