Layouts（布局）

布局（Layouts）是主题的基础，所有的 templates 模板 都是通过布局来渲染的。

布局是 Liquid 文件，可以让你把需要在多个页面中重复出现的内容集中写在一个地方。比如，你可以在布局中放 <head> 元素里的内容、页头（header）和页脚（footer）这些重复区域。

你可以修改默认的 theme.liquid 布局文件，也可以根据需要创建多个自定义布局文件。在模板层级上，你可以指定使用哪个布局，甚至可以不使用布局：

  • 在 JSON 模板中，用 layout 属性 来指定页面使用的布局。
  • 在 Liquid 模板中，用 layout 标签 来指定使用的布局。

主题架构中组件结构图，布局被高亮显示。

Location（位置）

布局文件位于主题的 layout 目录下：

  1. └── theme
  2.     ├── layout
  3.     |   ├── theme.liquid
  4.     |   ...
  5.     ├── templates
  6.     ...

Subtypes（子类型）

布局类型包括以下几种：

类型 描述
General 通用 通用布局可以用于所有非结账页的页面。

默认布局文件是 theme.liquid，这是所有主题必须包含的。
Checkout 结账页 这个布局类型适用于所有结账页面。只有 Shopify Plus 商家才可以使用。

关于这个布局的详细内容，可以参考 checkout.liquid。

Schema（结构）

因为布局文件是主题的基础，所以大多数情况下应该遵循 标准 HTML 文档 的结构。大部分布局文件也会包含以下这些 Liquid 对象：

basic_layout_example.liquid

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     ...
  5.     {{ content_for_header }}
  6.     ...
  7.   </head>
  9.   <body>
  10.     ...
  11.     {{ content_for_layout }}
  12.     ...
  13.   </body>
  14.  </html>

Content（内容）

布局可以让你把在多个页面中重复的内容集中写在一个地方。比如，布局中可以包含 header 和 footer 的 sections 区块，也可以包含 SEO metadata SEO 元数据。

布局文件是 .liquid 文件，所以内容可以用标准 HTML 和 Liquid 来写。

布局可以访问所有 global Liquid objects 全局 Liquid 对象，并且可以包含以下 Liquid 对象：

注意

这些对象在 theme.liquid 中是必须要有的。如果没有包含这些对象，你就无法通过代码编辑器或 Shopify CLI 等工具保存或更新这个文件。

content_for_header

content_for_header 对象在 theme.liquid 中是必须存在的，必须放在 HTML 的 <head> 标签内。它会自动把 Shopify 所需的脚本动态加载到文档头部。这些脚本是实现 hCaptcha、Shopify 应用等功能所必须的。

你不应该尝试修改或解析 content_for_header 对象。如果这个对象发生变化，你的 Liquid 行为也会受到影响。

content_for_layout

content_for_layout 对象会动态输出每个 template 模板 的内容。你需要在 HTML 的 <body> 和 </body> 标签之间添加对它的引用。

Usage（用法）

在使用布局文件时，你需要了解以下这些概念：

支持特定模板的 CSS 选择器

你可以通过在 <body> 标签里输出 template 对象 的数据，来帮你写出适用于某个特定模板的 CSS 规则。

  1. <body class="template-{{ template.name }}">
  2.   ...
  3. </body>
  1. .template-product {
  2.   margin-bottom: 2em;
  3. }

访问并自定义 checkout.liquid

已废弃

checkout.liquid 现在不再支持结账流程中的信息页、配送页和支付页了。对于 Thank you 页面（感谢页） 和 Order status 页面（订单状态页），checkout.liquid、附加脚本和 <script> 标签也都将在 2025 年 8 月 28 日正式废弃。

当前使用 checkout.liquid 自定义 感谢页 和 订单状态页 的商店，需要在截止日期之前 升级到 Checkout Extensibility（结账扩展机制）。Shopify Scripts 将继续与 Checkout Extensibility 一起使用，直到 2025 年 8 月 28 日。

你可以参考 如何构建 Checkout 扩展，来拓展 Shopify 结账的功能。

Shopify Plus 商家如果想开启或关闭 checkout.liquid 的访问权限，需要 联系支持团队。了解如何开启访问权限，请参考 访问 checkout.liquid。

在开始任何自定义之前，建议你先看看 checkout.liquid 文件 的格式和内容，以及 修改 checkout.liquid 的最佳实践。