编辑模板代码

已于 Apr 18, 2024 打印了此页面。若要查看当前版本，请访问 https://help.shopify.com/zh-CN/manual/online-store/themes/theme-structure/extend/edit-theme-code。

您可以通过编辑模板代码来对在线商店进行详细更改。构成模板的大多数文件都包含 Liquid，这是 Shopify 的模板语言。模板文件还包含 HTML、CSS、 JSON 和 JavaScript。只有在您了解 HTML 和 CSS，并具备 Liquid 的相关基础知识时，才可编辑模板的代码。

本页相关主题

自定义模板前的准备工作

若要准备自定义您的主题，请完成以下建议任务：

  • 复制您的模板以创建一个备份副本。这使您在需要时能够轻松地放弃更改并重新开始进行自定义。
  • 确保您了解可用的支持级别。
  • 了解上传图片的要求和最佳做法。

编辑模板代码

您可以编辑模板的代码。

步骤：

  1. 在 Shopify 后台中，转至在线商店 > 模板。
  2. 点击 ... > 编辑代码。
  1. 在 Shopify 应用中，点击 … 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触管理模板。
  4. 点击 ... > 编辑代码。
  1. 在 Shopify 应用中，点击 … 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触管理模板。
  4. 点击 ... > 编辑代码。

代码编辑器的左侧显示了模板文件的目录，右侧显示了用于查看和编辑文件的空间。

点击左侧目录中的文件时，它将在代码编辑器中打开。您可以同时打开和编辑多个文件。您修改的所有文件的文件名旁边都会显示一个圆点：

模板文件的目录，已修改的文件旁边显示一个圆点

这可以帮助您跟踪已做出更改的地方。

回退到旧版模板

如果您更改了模板文件并需要恢复，您可以将各个 .liquid 文件回退到执行更改之前的某个时间和日期。

步骤：

  1. 在 Shopify 后台中，转至在线商店 > 模板。
  2. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
  3. 在模板标头下，点击最近编辑的一个 .liquid 文件。
  4. 点击 .liquid 文件名下的最新版本。
  5. 点击下拉菜单以选择旧版本。点击日期戳可将代码回退到该保存的版本。
  6. 可选：点击预览商店以确认是否已修复错误。
  1. 在 Shopify 应用中，点击 … 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触管理模板。
  4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
  5. 在模板标头下，点击最近编辑的一个 .liquid 文件。
  6. 点击 .liquid 文件名下的最新版本。
  7. 点击下拉菜单以选择旧版本。点击日期戳可将代码回退到该保存的版本。
  8. 可选：点击预览商店以确认是否已修复错误。
  1. 在 Shopify 应用中，点击 … 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触管理模板。
  4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
  5. 在模板标头下，点击最近编辑的一个 .liquid 文件。
  6. 点击 .liquid 文件名下的最新版本。
  7. 点击下拉菜单以选择旧版本。点击日期戳可将代码回退到该保存的版本。
  8. 可选：点击预览商店以确认是否已修复错误。

模板检查

代码编辑器中提供模板检查功能，该功能可在编写代码时提供即时反馈，而不是发现实时模板中的错误，进而帮助防止出现错误。

在代码编辑器中，模板检查可在编辑后的代码中识别以下错误：

  • 分析器阻止脚本，可能会减慢店面速度
  • 翻译文件之间的不一致，例如缺少翻译键或区域设置文件中的翻译不匹配
  • 缺少模板

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

模板检查发现代码错误的示例

模板代码自定义教程

您可以按照模板代码自定义教程来指导您对在线商店进行更改。此教程根据代码修改的页面或功能类型整理而成。

模板自定义教程根据其使用的模板架构版本进行划分。了解如何确定您的模板架构版本。

获取有关自定义项的帮助

如需更改模板方面的帮助，则可以联系您的模板开发人员寻求支持。

要查看可用于帮助您进行模板自定义的其他资源，请参阅模板支持的其他资源。

准备好开始使用 Shopify 进行销售了吗？

免费试用