编辑模板

您可以编辑模板以自定义在线商店的内容、布局、版式和颜色。每个模板都提供了一些分区和设置,可供您用于更改商店的外观,而无需编辑任何代码。

自定义模板前的准备工作

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

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

模板编辑器

模板编辑器会在树形图中显示您当前在侧边栏中查看的模板的所有内容。您可以使用展开图标 来展开分区结点以查看其中的块,还可以使用折叠图标 将其折叠来隐藏块。您可以点击任何分区或块来查看其设置。

展开和折叠分区以查看块

访问模板编辑器

  1. 在 Shopify 后台中,转至在线商店 > 模板
  2. 在要编辑的模板旁边,点击自定义
  3. 点击分区

预览检查器

预览检查器是模板编辑器中的新功能。此功能可用于直接从预览窗口导航到分区和块,以及更快捷、更直观地查找相应的设置。通过使用预览检查器,您可以直接从预览窗口对分区和块执行重新排序、隐藏或删除操作。

预览检查器在所有免费的 Shopify 模板中可用,并且是默认激活。您可以在编辑访问期间通过切换按钮来打开或关闭预览检查器。

通过主页栏中的切换按钮来打开或关闭预览检查器

激活预览检查器后,您可以点击任何轮廓元素以打开相应的设置。在移动设备上,激活预览检查器后,您可以点击任何元素来选择相应的设置。您可以打开底部表格,通过此所选设置进行编辑。

预览检查器的侧边栏中加载了所选的“带文本图片”分区和对应的设置

移动设备上的预览检查器

预览检查器会在预览窗口中已点击的分区和块周围显示两种不同的边框:

  • 蓝色实线:活跃分区。侧边栏中的相应设置会以灰色突出显示。
  • 蓝色点线:分区的关联块。点击预览窗口中的项将打开该块或分区对应的设置。

点击预览窗口中网站的任何部分都会加载侧边栏中的相应设置。在移动设备上,点击两次即可像客户一样在网站中导航。

在预览检查器中添加分区和块

使用预览检查器时,您可以直接从预览窗口向您的模板中添加分区和块。在移动设备上,您可以使用底部表格中的编辑模式来添加、复制、隐藏、移动和删除分区。

预览检查器“添加分区”选项

预览检查器“添加块”选项

添加分区或块
工具 描述
添加分区 添加分区按钮会显示在所选分区的顶部和底部。点击添加分区可在所选分区上方或下方插入新分区。
添加块 将鼠标悬停在现有块上时,添加块按钮将会出现。若要添加块,请点击 + 图标。弹出菜单中将显示模板和应用块,您可将这些内容添加到所选分区中。点击您要添加的块。新块的设置窗口会在右侧栏中加载。

预览检查器工具

您可以使用预览检查器从模板编辑器中移动、隐藏、复制或删除分区和块。

预览检查器工具集

预览检查器工具
工具 描述
移至下一/上一位置 您可以使用预览检查器中的箭头图标将分区或块移动到下一位置或上一位置。如果所选分区位于页面顶部,移至上一位置按钮将显示为灰色。同理,如果您的分区位于页面底部,则不能使用移至下一位置按钮。
复制分区或块 点击复制图标以复制分区或块及其内容。
隐藏分区或块 点击眼睛图标可隐藏分区或块。隐藏某个分区或块后,将无法从预览检查器中取消隐藏该分区或块。您可以点击主页栏上的撤销按钮,或关闭设置面板以返回模板编辑器主页,此处的侧边栏中会列出任何隐藏的分区或块,并且对应的眼睛图标会突出显示。点击此图标可取消隐藏分区或块。
删除分区或块 点击预览检查器中的垃圾桶图标可删除所选分区或块。

侧边栏模式

模板编辑器提供两种模式来利用屏幕上的所有空间。

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

双侧边栏模式

如果您的屏幕宽度大于 1600 像素并且浏览器窗口已完全展开,或者您的浏览器窗口已扩展到至少 1600 像素宽度,此时将显示两个侧边栏。左侧的侧边栏包含导航面板,右侧的侧边栏包含设置面板。

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

单侧边栏模式

较窄的浏览器窗口仅显示一个侧边栏来为模板预览留出空间。点击分区或块以对其进行编辑时,设置面板会在侧边栏中的导航面板顶部打开。

在单侧边栏模式下,设置面板在导航面板中以叠加方式显示

分区组

分区会被分组到每个页面模板中的以下区域:

  • 标头:这包括标头、公告栏以及任何应用或自定义 Liquid。
  • 模板:这包括构成页面正文的分区。例如,模板分区可以包含博客文章、拼贴、产品系列列表或自定义 Liquid。
  • 页脚:这包括页脚、电子邮件注册以及任何应用或自定义 Liquid。

您的所有在线商店页面均使用相同的标头和页脚。例如,如果您向标头添加自定义 Liquid 块,则所有产品页面、主页和任何其他页面上均会显示该自定义 Liquid。您可以根据需要对分区进行重新排序。

分区和块

在分区和块列表中,默认情况下显示页面上分区的所有块。

默认情况下,组成标头或页脚的分区会折叠,但如果您点击分区名称旁边的展开图标 ,便可以看到这些分区。

移动分区和块

您可以将分区或块从页面的一个区域移动到其他区域:使用 ⋮⋮ 图标来点击并拖动分区或块,然后将其拖放到其他可用位置。

如果您尝试将分区或块移动到不被允许的位置,则该分区或块将被放回原始位置。

删除分区

您可以在每个商品的设置屏幕中删除模板中的分区或块。删除分区按钮显示在分区设置的底部。

使用“删除分区”按钮删除分区

步骤:

  1. 在模板编辑器侧边栏中,点击要删除的分区或块。
  2. 点击删除分区删除块
  3. 点击保存。如果您要编辑已发布的模板,请点击发布以保存更改并将其保存在您的商店中。

隐藏块

您可以使用眼睛图标隐藏任何分区或块。

使用“删除分区”按钮删除分区

模板

您可以在模板编辑器顶栏的页面选择器中访问所有模板。

如果您使用的是“Online Store 2.0” 模板,则还可以通过点击新建模板选项来直接从页面选择器中创建新模板。

通过应用于特定资源来预览模板效果

查看模板时,您可以将其应用于商店中的任何兼容资源来预览其显示效果。例如,如果您查看产品模板,则可以使用商店的任何产品来测试它。

步骤:

  1. 在模板编辑器页面选择器中,选择您要预览的模板。
  2. 在导航面板的预览分区中,点击更改
  3. 选择菜单中,选择您要预览的资源。

撤消和恢复操作

撤销恢复按钮位于模板编辑器的右上方。

模板编辑器顶栏中的“撤销”和“恢复”按钮。

自定义数据的内联编辑

使用自定义数据开发元对象页面时,您可以直接以内联方式编辑元字段和元对象,而无需导航到后台进行更改。这适用于图片、视频、颜色、产品、页面、产品系列和文本元字段。

步骤:

  1. 在元对象引用的模板中选择一个兼容的设置。
  2. 从设置面板中选择并编辑元对象条目中的元字段值。
  3. 保存您的工作,您的登陆页面随后将自动刷新并包含更新后的信息。

查看文档、获取支持并检查您的模板版本

指向模板文档和支持信息的链接已移动到菜单栏中的更多 菜单。在此菜单中,您还可以查看模板版本和创建者信息。

使用“更多”按钮访问模板信息。

提示 如果使用来自 Shopify 的免费模板,那么您可以通过参阅来自 Shopify 的免费模板以及点击模板的名称来查看此模板的分区和设置的详细信息。

若要了解付费模板的分区和设置,请参阅模板文档

获取有关自定义项的帮助

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

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

与本节相关的主题

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

免费试用