EN

官方主题解析

收录有明确源码基线的官方主题解读及研究方法,不承载 WooDawn 自研产品文档。

官方主题是平台通用概念的实现案例。先阅读主题结构与配置,再按文章声明的版本追踪具体功能;不要把一个版本的文件名当成所有主题的固定接口。

当前阅读入口

研究方法与基线要求说明源码文章需要保留什么证据。尚未完成版本和功能核验的研究记录不列入公开必读路线。

已完成的 Dawn 入口:架构、数量选择器实验,以及按功能域整理的 9 篇源码解读:购物车抽屉与加购通知、购买区与可售状态、商品推荐、预测搜索、筛选与分页、页头与导航、商品媒体、订阅表单与徽章、内容分区与动效。2026-10-01 起另有 8 篇跨功能的写法专题:Section Rendering 用法、变体更新协议、局部替换工具、组件与 pubsub、色彩方案、加载策略、无障碍写法与主题编辑器适配。实验范围以单篇说明为准。

Horizon 4.2.0 已形成架构总览、商品页、购买流程和源码阅读方法,其余功能由总览连接;2026-09-29 起另有预测搜索、筛选与分页、商品推荐、页头与导航、吸底加购与可售状态、媒体放大与热点、跑马灯轮播与动效、徽章评价与订阅共 8 篇,逐项对照通用展现与功能模块的契约。2026-10-07 起另有 7 篇跨功能的写法专题,从 Web Components 基类进入,依次是分区刷新与 morph、带键延迟水合、跨文档 View Transitions、加购竞态处理、服务端对比色与布局抖动治理。全部是固定 commit 的源码分析,未完成店铺运行验证。

覆盖矩阵汇总两个固定版本对新增展现与模块的覆盖情况(内置、未找到或未核对)。

按官方主题源码阅读路线完成基础与版本化阅读。

本专题文章

Shopify 官方主题解析:Dawn 与 Horizon

Shopify 官方主题 Dawn 与 Horizon 的源码研究入口:先完成主题基础,再按固定版本或 commit 分析功能、配置与交互,并说明各自验证范围。

Dawn 15.3.0 架构:从商品页进入渲染与交互

Dawn 15.3.0 主题架构:以固定源码从商品页追踪 Layout、模板、分区、片段与浏览器组件的协作,并说明未经店铺验证的范围。

Dawn 数量选择器:规则、事件与浏览器验证

Dawn 数量选择器 QuantityInput:追踪加减与 min、data-min 边界逻辑,用独立浏览器实验复现同步 change 事件值的差异。

Horizon 4.2.0 架构:从页面组合追到浏览器行为

基于 Horizon 4.2.0 固定源码,从商品模板追到 Section、Theme Block、Snippet 与浏览器组件的协作,并给出按任务继续阅读的入口。

Horizon 商品页:模板、媒体与详情怎样组合

基于 Horizon 4.2.0 源码,追踪 Shopify 商品页从 JSON 模板到 Section 的上下文传递、媒体与详情布局委托及吸底购买条入口。

Horizon 购买流程:数量、加购与表单协作

基于 Horizon 4.2.0 源码,拆解 Shopify 购买区的数量选择、加购提交与加速结账,说明变体切换中的加购排队和数量约束该怎样验证。

Horizon 变体选择:从选项标记到返回 HTML

基于 Horizon 4.2.0 源码,从选择器 Liquid、请求 URL 到异步返回 HTML,追踪 Shopify 变体切换怎样更新购买按钮与数量状态。

Horizon 商品卡:上下文、子内容与快速购买

基于 Horizon 4.2.0 源码,解释商品循环怎样把商品传入 Shopify 商品卡,以及快速购买为何要继续读 JavaScript 中的缓存与跳转处理。

Horizon 集合与搜索:结果、筛选和分页的分工

基于 Horizon 4.2.0 源码,区分 Shopify 集合页与搜索结果页的数据来源、商品网格、筛选 URL 和分页控制器,以及预测搜索入口。

Horizon 购物车:页面、抽屉与数量更新

基于 Horizon 4.2.0 源码,追踪 Shopify 购物车页面与抽屉怎样共享条目组件、处理数量更新和分区刷新,并列出空车等验证场景。

Horizon 布局与导航:页面外壳和全站区域

基于 Horizon 4.2.0 源码,解释 Shopify 布局文件、页眉页脚分区组、首屏页眉测量与脚本加载的边界,并说明导航改动需跨页面验证。

Horizon 样式机制:全局变量、实例配置与组件 CSS

基于 Horizon 4.2.0 源码,沿全局颜色变量、实例间距与尺寸片段和组件 CSS,追踪 Shopify 主题外观设置怎样生效及共享片段的修改范围。

Horizon 内容模块:容器、媒体与业务表单

基于 Horizon 4.2.0 源码,区分通用容器、Hero 媒体、Page 与博客正文和联系表单的职责,说明各类内容模块的选择与验证重点。

Horizon 源码阅读:固定版本、条件分支与证据边界

说明阅读 Horizon 源码时怎样固定版本与 commit、按 Liquid 求值顺序读条件分支,避免把未固定版本的资料、文件命名或静态检查当成平台规则。

Dawn 购物车:抽屉、加购通知与购物车页的更新链

基于 Dawn v15.3.0 源码,追踪 cart_type 设置如何在购物车抽屉、加购通知与购物车页之间分叉,梳理 Section Rendering 更新链、空车分支、数量更新与错误处理,并对照通用抽屉与 Toast 契约列出差距。

Dawn 商品页购买区:价格、变体、加购按钮与库存状态

基于 Dawn v15.3.0 源码,追踪商品页价格、变体选择器、加购与动态结账按钮、product-form 请求、库存与低库存提示、本地取货和售罄状态,并对照通用购买区与到货通知契约列出差距与未内置项。

Dawn 商品推荐:相关商品、搭配商品与空结果行为

基于 Dawn v15.3.0 源码,追踪 related-products 分区与 main-product 内置 complementary 搭配区块怎样请求推荐端点、渲染网格或分页滑块、处理空结果,并对照通用交叉销售、Carousel 与 Grid 契约列出差距。

Dawn 预测搜索:建议请求、键盘行为与结果页

基于 Dawn v15.3.0 固定源码,追踪页头搜索弹层、predictive-search 元素、/search/suggest 分区请求、combobox 标记、键盘与状态播报,并对照站内搜索契约列出差距。

Dawn 筛选、排序与分页:分区请求、URL 与移动抽屉

基于 Dawn v15.3.0 固定源码,追踪集合页与搜索页的筛选表单、Section Rendering 局部刷新、pushState URL、已选条件移除、价格区间、移动筛选抽屉与分页,并对照通用契约列出差距。

Dawn 页头与导航:下拉菜单、抽屉、公告栏与吸顶

基于 Dawn v15.3.0 固定源码,追踪页头分区组、下拉与 Mega Menu、移动抽屉菜单、公告栏和吸顶页头脚本,说明面包屑的搜索结果,并对照导航契约的 ARIA 与键盘要求列出差距。

Dawn 商品媒体:图库、变体联动与放大浏览

基于 Dawn v15.3.0 源码,追踪商品页媒体图库、缩略图、变体切换时的媒体联动、放大 Modal,以及视频与 3D 模型的按需加载和无障碍实现,并对照通用图库要求列出差距。

Dawn 邮件订阅、商品徽章与评分星:表单与卡片实现

基于 Dawn v15.3.0 源码,梳理邮件订阅表单在 newsletter、email-signup-banner 与页脚中的实现和成功错误状态,商品卡与价格中的售罄折扣徽章,以及依赖 reviews 元字段的评分星,并如实说明未内置评价列表。

Dawn 内容分区与动效:轮播、折叠、横幅与滚动显现

基于 Dawn v15.3.0 源码,列出 slideshow、collapsible-content、multicolumn、image-banner、image-with-text、video、rich-text、collage 对应的通用展现,并核对轮播自动播放、键盘、减少动态与滚动显现动画的实现差距。

Dawn 的 Section Rendering 用法:前端拿 HTML,不拿 JSON

基于 Dawn v15.3.0 源码,横向对比变体切换、商品推荐、筛选、预测搜索与购物车六处局部刷新,拆解 section_id 与 sections 两种取法、getSectionsToRender 约定和它带来的重复请求、缓存与乱序代价。

Dawn 变体切换的局部更新协议:option_values、ID 约定与快速加购复用

基于 Dawn v15.3.0 源码,拆解 product-info 如何不下发变体矩阵、改用 option_values 让服务端选出变体,如何用 ID 后缀约定把同一份分区 HTML 复用到快速加购弹窗,以及中止请求、焦点恢复与媒体对齐的写法和遗留问题。

Dawn 的 HTMLUpdateUtility:替换 DOM 时要处理的四件事

基于 Dawn v15.3.0 源码,逐行拆解 HTMLUpdateUtility 的双缓冲替换、旧节点 ID 去重、脚本重建与前后处理钩子,说明它为什么只用在商品信息区,以及 500ms 延迟删除、只改旧节点 ID 等写法的取舍。

Dawn 的组件组织:Custom Elements 加 25 行 pubsub

基于 Dawn v15.3.0 源码,分析不使用前端框架时 Dawn 如何用轻 DOM 自定义元素承载服务端 HTML、用 25 行发布订阅连接商品页与购物车,以及 Promise.all 等待订阅者、生命周期退订的写法和一处订阅泄漏、异常中断渲染的风险。

Dawn 色彩方案:Liquid 把商家配置编译成 CSS 变量

基于 Dawn v15.3.0 源码,拆解 color_scheme_group 设置如何在 theme.liquid 中循环生成 .color-* 类与 RGB 三元组变量,分区如何套用方案与渐变,服务端如何预先计算对比色,以及这种设计令牌方案的取舍与限制。

Dawn 的加载策略:按分区引入资源、首屏图片与按需媒体

基于 Dawn v15.3.0 源码,整理分区级 CSS 与 JS 按条件引入、非关键样式异步加载、字体预连接与预加载、srcset 与 sizes、首屏图片立即加载与 fetchpriority、视频与 3D 延迟挂载、推荐区提前加载,以及 CartPerformance 埋点和几处失效的优化。

Dawn 的无障碍写法:details 增强、焦点管理、状态播报与 combobox

基于 Dawn v15.3.0 源码,横向整理跳转链接、details 与 summary 的渐进增强、trapFocus 焦点循环与返还、共享描述文本、状态区播报、预测搜索 combobox 与减少动态,并指出焦点集合不更新、正则未转义等问题。

Dawn 怎样适配主题编辑器:设计模式、编辑器事件与重渲染清理

基于 Dawn v15.3.0 源码,梳理 request.design_mode 与 Shopify.designMode 的分工、theme-editor.js 对区块选中与分区加载卸载事件的处理、挪到 body 的弹窗如何清理、滚动动画在编辑器中的降级,以及重复加载脚本等问题。

Horizon 预测搜索:搜索弹窗、分区请求与键盘交互

基于 Horizon 4.2.0 源码,追踪 Shopify 预测搜索从头部按钮、dialog 弹窗、分区渲染请求到结果面板的全链路,并对照站内搜索模块列出空状态、键盘、aria 与请求失败处理的差距。

Horizon 筛选、排序与分页:分区刷新、URL 状态与无限滚动

基于 Horizon 4.2.0 源码,拆解 Shopify 集合与搜索结果页的筛选表单、URL 与分区刷新、已选条件移除、移动端抽屉、排序,以及默认无限滚动与普通分页的差别,并对照通用模块列出差距。

Horizon 商品推荐:分区请求、intent 与空结果回退

基于 Horizon 4.2.0 源码,说明商品页推荐区块如何用分区渲染接口按 related 或 complementary 取回商品、怎样为空时回退或隐藏,以及与商品卡、轮播的关系,并对照交叉销售模块列出差距。

Horizon 页眉导航:Mega Menu、移动抽屉、吸顶与公告栏

基于 Horizon 4.2.0 静态源码,拆解页眉分区组中的公告栏、桌面 Mega Menu、移动端菜单抽屉与吸顶滚动逻辑,并对照通用导航与抽屉契约列出无障碍差距。

Horizon 吸底加购与可售状态:库存文案、取货与加购反馈

基于 Horizon 4.2.0 静态源码,说明商品页吸底加购栏的显示条件、购买区可售与库存文案、门店取货可用性、加购成功与失败反馈,并对照通用契约列出缺口。

Horizon 商品媒体放大与热点:画廊、缩放对话框与 Shop the look

基于 Horizon 4.2.0 源码,追踪商品画廊的媒体排序、放大对话框、视频与 3D 加载,以及 product-hotspots 的坐标、触屏退化和售罄状态,并对照通用页面列出无障碍与退化差距。

Horizon 跑马灯、幻灯片与滚动动画:自动播放、控制与减少动态

基于 Horizon 4.2.0 源码,拆解跑马灯、幻灯片、卡片轮播、分层幻灯片与 Hero 的自动播放、暂停控制、键盘与 aria 处理,并核查主题是否内置滚动显现,对照通用页面列出减少动态差距。

Horizon 徽章、评分与订阅表单:内置能力与缺口

基于 Horizon 4.2.0 源码核查商品徽章、评分星标、邮件订阅表单的实现,并以全仓库搜索给出倒计时、尺码表、评论列表和弹窗订阅未内置的依据,对照通用页面列出差距。

Dawn 与 Horizon 对通用展现和功能模块的覆盖矩阵

汇总 Dawn v15.3.0 与 Horizon 4.2.0 在固定提交中对新增展现形式和功能模块的覆盖:哪些内置、哪些在全仓库搜索中未找到、哪些尚未核对,并指向各功能域源码解读。

Horizon 的 Web Components 基类:ref 收集、on: 事件委托与升级竞态

基于 Horizon 4.2.0 源码,拆解不依赖框架的 Component 基类:ref 自动收集与归属判断、on: 属性的全局事件委托、自定义元素升级竞态、声明式 Shadow DOM 补水,以及 updatedCallback 与 morph 的配合和其中的疑点。

Horizon 的分区刷新与 morph:SectionRenderer 的并发控制和 DOM 合并

基于 Horizon 4.2.0 源码,拆解 SectionRenderer 与自研 morph:同分区请求取消与结果复用、排序后的缓存键、首屏预存缓存与有限的请求去重,morph 的表单状态同步、编辑中保护、运行时状态保留与跳过开关,以及几处值得商榷的耦合。

Horizon 的带键延迟水合:只更新 data-hydration-key 标记的节点

基于 Horizon 4.2.0 源码,拆解 morph 的 hydration 模式:只按 data-hydration-key 匹配、不插入不删除的契约,商品推荐、购物车抽屉与页眉三个使用场景,页眉首屏省掉精选商品的分支,以及这种两段式渲染的局限。

Horizon 的跨文档 View Transitions:渲染阻塞、放弃条件与 WebView 黑名单

基于 Horizon 4.2.0 源码,拆解多页面主题里的跨文档 View Transitions:按设置输出的 opt-in、等主内容的 render blocking 与 1.8 秒上限、不可能过渡时立即放手、用户交互即跳过、按类型切换动画并跨页传递,以及内嵌 WebView 黑名单与页面内过渡。

Horizon 的加购竞态处理:变体切换未完成时点击加入购物车

基于 Horizon 4.2.0 源码,拆解用户刚切换变体、分区请求尚未返回就点击加购时的处理:携带 promise 的 ProductSelectEvent、代次计数、意图快照队列、纯函数变体解析、按新变体重新校正数量与批量提交,以及入队即播动画等值得商榷之处。

Horizon 的服务端对比色:用 Liquid 颜色过滤器推导文字与派生色

基于 Horizon 4.2.0 源码,拆解区块自定义背景色时的服务端对比色推导:调色板最亮与最暗色、contrast-override 的三级文字色回退与边框回退、按亮度切换的透明度令牌、悬停色推导、背景媒体时跳过对比,以及亮度阈值和预设说明与实现不符等问题。

Horizon 的布局抖动治理:按需测量、读写分批与帧级调度

基于 Horizon 4.2.0 源码,整理一组避免强制同步布局的做法:首帧前按需测量页眉高度、从 IntersectionObserver 取得尺寸、变体选择器读写分批、跳过首次回调的 ResizeNotifier、等待过渡的 Scheduler、让出主线程,以及用 CSS 动画合成实现飞入购物车弧线。

Shopify Theme 交付框架:范围、开发与验收

Shopify Theme 交付框架:从产品范围、页面矩阵、模块契约到编辑体验、实现与验收,形成可复查的流程,并说明 Theme Store 清单何时适用。