Horizon 4.2.0 架构：从页面组合追到浏览器行为
本文基于 Horizon 4.2.0，源码固定到 5acd1b6（核验于 2026-10-07）。结论限于此 commit，不表示其他版本行为相同；本篇为源码分析，未完成店铺运行验证。
Horizon 的一个页面同时包含页面组合、资源数据、渲染片段和浏览器行为。只按 Liquid 文件逐篇阅读，容易遗漏模板中的实例配置和 JavaScript 中的状态更新。本系列沿实际功能组织阅读顺序。
从商品模板向下读
templates/product.json 将商品主区域配置为 product-information，并保存媒体、详情及推荐等区块实例。sections/product-information.liquid 收集媒体画廊、商品详情和追加区块，再交给共享布局片段。blocks/_product-details.liquid 继续收集详情子块，并委托 group 输出组合容器。
这条链说明两件事：JSON 模板参与页面实现，不能因为它没有 Liquid 逻辑就跳过；Section、Block 和 Snippet 也不是严格的一次性三级流水线，Block 可以嵌套，容器可以先收集 HTML 再交给片段布局。具体的数据流见商品页渲染链。
四个问题，对应四个阅读入口
| 问题 | 从哪里开始 | 接下来查什么 |
|---|---|---|
| 页面为什么出现这些区域 | JSON 模板 | Section 类型、实例与顺序 |
| 商家能调整什么 | Section / Block 的 schema | 实例设置如何被 Liquid 消费 |
| 内容从哪里来 | 当前资源与传入上下文 | 商品数据、设置数据、捕获的子内容 |
| 点击之后如何更新 | 自定义元素对应的 JavaScript | 事件、请求、返回 HTML 与替换范围 |
这些是本主题的源码阅读入口；关于业务页面和模块选择，另见页面组合，不要从代码文件数倒推业务分类。
Liquid 与 JavaScript 通过标记连接
snippets/scripts.liquid 声明模块映射并加载浏览器组件。assets/component.js 收集 ref 引用，处理 on: 声明式事件，还会在 DOM 变化后更新引用。因此修改一段标记时，类名之外还要检查组件标签、引用和事件绑定；视觉没有变化，不代表交互契约没有变化。
Liquid 生成初始页面，JavaScript 继续处理变体选择、购物车和局部更新。源码中存在这些处理逻辑，不等于已验证每一种无脚本退化或无障碍状态。