编辑模板代码

您可以使用代码编辑器编辑模板代码，以便对您的在线商店进行详细更改。构成模板的大多数文件都包含 Liquid，即 Shopify 的模板语言。模板文件还包含 HTML、CSS、JSON 和 JavaScript。只有在您了解 HTML 和 CSS 并对 Liquid 有基本了解的情况下，才能编辑模板代码。

只有在购买模板后，您才能编辑其代码。这包括在模板编辑器中使用 AI 代码生成器。如果您使用的是付费模板的试用版，则需要先购买该模板，然后才能进行代码更改。

代码编辑器会显示模板文件的目录以及用于显示和编辑文件的区域。当您点击目录中的文件时，该文件将在代码编辑器中打开。您可以同时打开和编辑多个文件。您还可以同时打开和查看多个文件。

本页内容

编辑模板代码

您可以使用代码编辑器修改模板文件。

步骤：

台式电脑

在 Shopify 后台中，转至在线商店 > 模板。
点击 > 编辑代码。

移动设备

在 Shopify app 中，轻触图标。
在销售渠道部分，轻触在线商店。
轻触管理模板。
轻触 > 编辑代码。

保存更改

当您编辑文件时，标签页名称旁边会显示一个点，表示存在未保存的更改。点击保存按钮以保存您的更改。您也可以在 Mac 上按 ⌘ + S 或在 Windows 上按 Ctrl + S 来保存更改。

设置模板代码格式

要修复代码缩进，请在 Mac 上按 ⌘ + Shift + P 或在 Windows 上按 Ctrl + Shift + P 打开命令面板，键入 format，然后选择格式化文档。

步骤：

在 Shopify 后台中，转至在线商店 > 模板。
点击 > 编辑代码。
打开要设置格式的文件。
在 Mac 上按 ⌘ + P 或在 Windows 上按 Ctrl + P。
在命令面板中，输入 format，然后按键盘上的 Enter 键。
保存文件。

跟踪文件更改

若要将已修改的模板文件恢复为旧版本，请使用该文件的时间线视图。

时间线视图一次只能恢复一个现有文件。它不会恢复整个模板，也无法恢复已删除的模板文件。时间线历史记录是有限的，因此可能无法获取旧版本。

恢复操作将替换整个文件内容，包括您可能希望保留的更改。如果您希望保留任何更改，请在恢复文件之前，先将当前文件内容复制到安全位置。

步骤：

在 Shopify 后台中，转至在线商店 > 模板。
点击 > 编辑代码。
打开您要查看或恢复的现有文件。
可选：如果您可能希望保留任何当前更改，请在恢复操作前将当前文件内容复制到安全位置。
在时间线视图中，点击时间线中的条目，比较差异。
若要将整个文件内容替换为所选的旧版本，请右击时间线条目，然后选择恢复内容。
点击还原。

Theme Check

代码编辑器包含 Theme Check 功能，该功能可在编写代码时提供即时反馈以帮助防止出错，而不是等到在实时模板中才发现错误。

在代码编辑器中，Theme Check 可以识别已编辑代码中的以下错误：

解析器阻塞脚本，这可能会减慢在线店面的速度
翻译文件之间的不一致，例如翻译密钥缺失或区域设置文件中的翻译不匹配
模板缺失

错误将在代码下方用红线标出。若要查看错误，请将鼠标悬停在突出显示的行上。

在代码编辑器中搜索和替换

您可以通过以下任一方式在代码编辑器中进行搜索：

搜索特定文件中的代码。
搜索模板中所有文件的代码。

您还可以替换特定文件中的代码，或替换所有模板文件中的多个实例。您还可以按文件名搜索以打开文件。

在文件中搜索

您可以搜索特定文件中的代码并进行替换。使用箭头键可查看每个代码实例。

搜索代码后，您可以替换文件中的代码。

步骤：

在 Shopify 后台中，转至在线商店 > 模板。
点击 > 编辑代码。
打开您要搜索的文件。
在 Mac 上按 ⌘ + F，或在 Windows 上按 Ctrl + F。
在搜索字段中，输入您的搜索词。
可选：若要替换代码，请完成以下操作：

在搜索模态窗口中，点击图标。
在替换字段中，输入替换代码。您可以点击保留大小写，使替换代码的大小写与现有实例匹配。
点击替换图标可一次替换一个实例，或点击全部替换图标可一次性替换所有实例。

跨所有文件搜索

点击左侧边栏中的搜索按钮，以在所有模板文件中进行搜索。结果会显示您搜索词的每个实例及其所在的文件。

步骤：

在 Shopify 后台中，转至在线商店 > 模板。
点击 > 编辑代码。
点击图标可打开搜索面板。
在搜索字段中，输入您的搜索词。
可选：若要替换代码，请完成以下操作：

在搜索模态窗口中，点击图标。
在替换字段中，输入替换代码。
一次替换一个实例，或一次性替换所有实例。

高级搜索选项

若要缩小搜索结果范围，请使用以下一个或多个搜索选项：

区分大小写：返回大小写匹配的搜索词。例如，如果您输入 product，则搜索会突出显示“product”或“Product”的任何实例。如果您选择区分大小写，则搜索将仅突出显示 product 的实例。
全字匹配：返回与整个单词完全匹配的搜索词，并排除部分匹配。例如，如果您输入 cart，则搜索将突出显示“cart”的实例，但不会突出显示“carton”。
使用正则表达式：返回与正则表达式 (regex) 匹配的搜索结果。regex 是一个用于指定文本中匹配模式的字符串。

在搜索面板中，您还可以选择要包含在搜索结果中或从搜索结果中排除的文件和文件夹。

点击以打开高级菜单。您可以在要包含的文件或要排除的文件字段中输入任何文件或文件夹路径。若要添加多个文件或文件夹，请用空格和逗号将它们隔开。例如，若要在 sections 文件夹中搜索文件，请在要包含的文件字段中输入 ./sections。

您还可以从文件目录视图中在特定文件夹内进行搜索。右键点击某个文件夹，然后从下拉菜单中选择在文件夹中查找...。

管理模板文件

您可以在模板代码中管理文件。您可以删除文件、添加新文件、重命名文件，如果存在以前的版本，还可以从其 时间线 视图中恢复已修改的现有代码文件。assets 文件夹中的资源文件（例如图片、CSS、JavaScript 和字体）没有时间线历史记录。

打开模板文件

若要打开模板文件，请点击某个文件夹，然后从资源管理器中点击文件名。您还可以按名称或扩展名搜索文件，然后打开文件。

步骤：

在 Shopify 后台中，转至在线商店 > 模板。
点击 > 编辑代码。
在 Mac 上按 ⌘ + P 或在 Windows 上按 Ctrl + P。
在搜索栏中输入文件名并选择文件，或从最近打开列表中选择一个文件。

添加新模板文件

若要添加文件，请选择一个文件夹，点击新建文件图标，然后输入文件名和文件扩展名。

文件名可包含字符 A-Z 和 0-9，但不能包含空格。请使用短划线或下划线分隔单词。文件扩展名由句点 . 和扩展名类型定义。例如，.liquid 或 .css。

步骤：

在 Shopify 后台中，转至在线商店 > 模板。
点击 > 编辑代码。
点击要向其中添加新文件的文件夹。
右键点击文件夹名称，然后从下拉菜单中选择新建文件...。
为文件输入新名称。
按键盘上的 Enter 键。

上传新资产

您可以将新资产（例如图标或图片文件）上传到代码编辑器的 assets 文件夹。

步骤：

在 Shopify 后台中，转至在线商店 > 模板。
点击 > 编辑代码。
右键点击 assets 文件夹。
点击上传...。
选择您要上传的文件。
点击打开。

重命名模板文件

您可以右键点击文件来重命名。请确保不要编辑或删除文件扩展名。文件扩展名由一个句点 . 和扩展名类型构成，例如 .liquid 或 .css。文件名可以包含字符 A-Z 和 0-9，但不能包含空格。请使用短划线或下划线来分隔单词。如果文件名无效，则新文件名将无法保存。

步骤：

在 Shopify 后台中，转至在线商店 > 模板。
点击 > 编辑代码。
右键点击某个文件，然后从下拉菜单中选择重命名...。
为文件输入新名称。
按键盘上的 Enter 键。

删除模板文件

您可以删除模板中的任何文件。已删除的模板文件无法恢复。

步骤：

在 Shopify 后台中，转至在线商店 > 模板。
点击 > 编辑代码。
右键点击某个文件，然后从下拉菜单中选择永久删除。
点击删除。