模板编辑器功能概览

您可以使用模板编辑器来自定义模板的区域(例如颜色),以及通过分区和块来管理内容。

访问模板编辑器

您可以从 Shopify 后台访问模板编辑器。

  1. 在 Shopify 后台中,转至在线商店 > 模板

  2. 在要编辑的模板旁边,点击编辑模板

模板编辑器布局分区

模板编辑器包含以下分区:

  • 菜单栏的左侧包含用于在分区、模板设置和应用嵌入块之间进行切换的导航按钮;中间包含模板名称、市场和模板菜单;右侧包含自定义控件。
  • 侧边栏会以树状视图显示您当前查看模板的所有内容。您可以从侧边栏中管理分区和区块应用嵌入块以及设置。侧边栏可折叠。
  • 预览窗口会显示您的模板,并会在您进行更改时自动更新。您可以激活移动设备预览,或者使用预览检查器来管理预览窗口中的模板样式内容。

菜单栏会显示导航、模板信息以及用于自定义模板的控件。

菜单栏会显示模板信息和用于管理模板自定义的按钮。

模板编辑器菜单栏中的模板详细信息和操作

在菜单栏左侧,您可以在侧边栏中的以下视图之间进行切换:

  • 分区:用于管理当前模板上的分区和区块。
  • 模板设置:用于管理模板的全局设置,例如颜色、排版和布局。
  • 应用嵌入块:用于管理嵌入模板中的应用。

如需隐藏侧边栏并全宽预览模板,请再次点击处于活动状态的按钮以取消选择。如果两个面板均可见,点击该活动按钮可同时折叠这两个面板。

模板详细信息、市场和模板菜单

菜单栏中间的模板详细信息、市场和模板菜单

在菜单栏中间,您可以找到以下内容:

  • 模板名称 及其状态。已发布的模板会显示 在线 状态标签。未发布的模板会显示 草稿 状态标签。点击模板名称即可访问以下选项:
  • 市场菜单,用于针对不同市场预览和自定义您的模板。
  • 模板菜单,用于在您当前模板的不同页面模板之间进行导航。

自定义快捷方式

模板编辑器菜单栏中的自定义图标

您可以使用菜单栏中的以下控件来自定义模板和管理更改:

如果没有可供重做或撤销的未保存自定义项,则相应的按钮将处于非活动状态。

侧边栏会显示您当前查看的模板的所有内容的树状视图。您可以通过侧边栏管理分区和区块以及模板设置。您可以再次点击菜单栏中处于活动状态的导航按钮将其切换为关闭状态,即可折叠侧边栏。

您的模板可能包含条件性设置,这些设置会根据其他处于活动状态的设置在侧边栏中显示。例如,如果您的模板中包含一个用于设置添加视频或图片的区块,则图片选择器或视频链接可能是条件性设置,只能在您选择图片作为媒体文件类型后显示。

模板编辑器有两种模式,可充分利用您屏幕上的所有空间。

双侧边栏模式适用于较宽的浏览器窗口和较大的屏幕,而单侧边栏模式适用于较窄的浏览器窗口和较小的屏幕。侧边栏模式决定了设置面板在编辑器中的显示位置。

双侧边栏模式

如果您的浏览器窗口宽度至少为 1600 像素,则会显示两个面板。左侧面板包含分区和区块所在的页面结构,右侧面板包含所选分区或区块的设置。您可以通过取消选择分区来折叠右侧面板。

在双侧边栏模式下,设置面板显示在屏幕的右侧。

要在较大屏幕上以单侧边栏模式查看模板编辑器,请调窄浏览器窗口,直到编辑器切换为堆叠式布局。

单侧边栏模式

在较窄的屏幕上,编辑器采用堆叠式布局。当您点击分区或区块时,设置面板会从屏幕底部向上滑动,而不会遮挡页面结构。您可以拖动分隔线来调整页面结构和设置之间的比例,使两者始终保持可见。

在单侧边栏模式下,设置面板以堆叠式布局显示

预览您的模板

您可以点击菜单栏中的 移动设备 按钮,预览您模板的移动设备布局。要返回台式电脑预览,请再次点击移动设备按钮。

如需全宽预览模板,请点击处于活动状态的侧边栏导航按钮,以折叠侧边栏。如果两个面板均可见,此操作将同时折叠这两个面板,以便您全宽预览在线店面。

撤销和重做未保存的更改

您可以使用 撤销重做 按钮来撤销或重做未保存的自定义项。保存更改后,您便无法再执行重做或撤销操作。

在模板编辑器中使用键盘快捷键

您可以在模板编辑器中使用键盘快捷键来导航和执行操作。

模板编辑器中适用于 Windows 和 macOS 设备的键盘快捷键列表。
类别操作Windows 快捷键macOS 快捷键
常规 撤销CTRL + Z + Z
重做CTRL + Y + Y
保存CTRL + S + + S
查看所有快捷键CTRL + / + /
工具 预览检查器CTRL + SHIFT + | + + |
预览模式 + CTRL + | + + |
SidekickCTRL + . + .
导航 分区 + CTRL + Z + + 1
模板设置 + CTRL + Z + + 2
应用嵌入 + CTRL + Z + + 3
分区和块 隐藏和显示CTRL + SHIFT + H + + H
删除SHIFT + +
选择上一个SHIFT + +
选择下一个SHIFT + +
打开所选元素SHIFT + ENTER +
展开全部分区CTRL + SHIFT + O + + O
折叠全部分区CTRL + SHIFT + P + + P