Shopify 官方主题解析:Dawn 与 Horizon
官方主题研究用于学习真实实现。每篇源码文章都应说明主题版本或 commit、功能入口、商家配置、相关文件、数据与交互,以及验证方法。
先完成通用基础
按主题结构 → 配置与 Schema → 国际化 → 布局实践阅读,再进入一个实际功能,避免把某个主题的命名当作平台规定。
如何选第一个源码案例
公告栏、图文分区、视频或基于 Custom Elements 的交互组件都适合作为起点。选择一个能观察到前台效果的功能:打开配置,定位文件,追踪状态变化,再验证空值、重复实例和移动视口。
| 阅读阶段 | 要留下的证据 |
|---|---|
| 固定基线 | 仓库、版本或 commit、文件路径 |
| 观察功能 | 页面位置、配置与操作结果 |
| 解释实现 | 渲染、数据与交互的实际关系 |
| 定制验证 | 修改目的、结果、限制与回退方式 |
当前研究状态
Dawn 已核对 v15.3.0 与 commit ecb06c31f1423fced1b3ea6ef7e1cb2143f04e47,并形成架构解读、数量选择器案例、9 篇功能域源码解读,以及 2026-10-01 新增的 8 篇跨功能写法专题(从 Section Rendering 用法进入;同样固定在该提交,均为静态源码分析)。数量选择器案例包含可重跑的独立浏览器实验,尚未覆盖 Shopify 店铺中的完整加购与编辑器行为。
Horizon 已固定到 4.2.0 的官方 commit 5acd1b6b66c02f61d3216e3adace5dd9e0404fc9(2026-10-07 由 4.1.5 升级,19 篇既有文章已逐篇对照新基线复核),形成 26 篇源码文章。由架构总览进入商品页、购买与变体、商品卡、集合与搜索、购物车、布局、样式和内容模块;源码阅读方法说明怎样校核版本、条件分支和既有结论。另有 7 篇跨功能的写法专题,建议按顺序阅读:Web Components 基类、分区刷新与 morph、带键延迟水合、跨文档 View Transitions、加购竞态处理、服务端对比色与布局抖动治理。当前完成源码核对,未执行店铺交互验证。两套主题的实现不能相互替代。
覆盖矩阵汇总两个固定版本对通用展现与功能模块的覆盖:哪些内置、哪些在全仓库搜索中未找到、哪些尚未核对。
按固定版本学习
Dawn 15.3.0 阅读路线将架构与数量控件实验串联,明确浏览器验证与店铺集成验证的区别。
官方主题源码阅读路线连接 Dawn 与 Horizon 的固定版本文章,按各自验证范围阅读。
平台层面的店面关系见Shopify 店面关系网。
第三方主题对照
官方主题之外,Impact 7.2.0 源码精读选取这款付费主题中六个值得借鉴的实现,包括相邻 section 的间距折叠、变体预取与局部重渲染、购物车事件总线等,可以与 Dawn、Horizon 的同类实现对照阅读。Impact 源码不公开,文中只引用必要片段;结论限于 7.2.0,同样只做了静态源码分析。
基线时效
Dawn 上游已在 2026-08-10 发布 v16.0.0(GitHub Releases 核对),本库 Dawn 正文统一以 v15.3.0 为基线,升级前各篇结论需要重新对照源码核对。Horizon 本库统一以 4.2.0 为基线:2026-10-07 核对时它是上游 main 的最新提交,固定提交中 config/settings_schema.json 的 theme_version 为 4.2.0;上游之后的更新不会自动进入本库,再次升级时同样需要逐篇复核。