Dawn 15.3.0 架构：从商品页进入渲染与交互
本篇研究 Shopify Dawn 的 v15.3.0，固定到 commit ecb06c31f1423fced1b3ea6ef7e1cb2143f04e47。它解释这个版本的源码关系，不代表 Dawn 最新版，也不用于推断 Horizon 的实现。源码基线。
从一个商品页进入
可以沿以下关系阅读，而不是按目录顺序逐个背文件名：
| 层次 | 这个版本的入口 | 需要理解的关系 |
|---|---|---|
| 页面框架 | layout/theme.liquid | 加载通用脚本，插入 header/footer 分区组和模板内容 |
| 商品模板 | templates/product.json | 用 main-product 分区组织商品页，并记录区块顺序 |
| 商品分区 | sections/main-product.liquid | 按区块类型输出价格、选择器、数量和购买内容 |
| 复用片段 | snippets/ | 为多个入口复用局部呈现；具体调用以 render 为准 |
| 浏览器行为 | assets/global.js、assets/product-info.js | 数量控件、变体与商品信息更新等交互 |
以上入口逐个核对了固定版本的文件。可直接查看布局、商品模板与商品分区。
商品数据与商家配置交汇在哪里
商品模板决定页面使用哪些分区与区块；分区中的 Liquid 同时读取商品数据和配置。商品名称、选中变体的数量规则与区块排列，不是同一来源。
例如，模板包含 quantity_selector 区块，分区 schema 允许这种区块并设置数量上限为一个；但购买数量的 min、max、increment 来自变体规则，并不是这个区块中的三个商家输入设置。这里说的“一个”是区块实例限制，不是购买件数上限。
因此，改变区块位置属于页面组成；改变商品允许的数量属于商品规则；改变加减按钮的交互属于浏览器代码。先明确任务发生在哪一层，再修改对应入口。
浏览器交互不是只有一个文件
global.js 注册 quantity-input 自定义元素，负责输入和按钮的基本交互。product-info.js 的 setQuantityBoundries 则结合购物车中的数量调整输入边界，并发布数量更新事件。只读基本控件，不能完整解释商品页在变体或购物车变化后的行为。
数量选择器案例将这两层分开，并给出独立浏览器实验。商品表单的提交另由product-form.js处理，不能把数量按钮的点击当成已完成加购。
从阅读转为一次定制
先选一个实际目标，例如修改数量区域的说明或交互。记录商品页效果、后台可配置项、相关文件和数据来源，再列出长文案、空值、多个实例以及数量边界的验证条件。
不要先修改全局文件再寻找影响面；公共控件还可能被购物车或批量订购界面使用。将定制限制在明确入口后，再回到其他调用方检查回归。
已验证与未覆盖
本篇已核对固定版本的源码关系，并在独立 HTML 夹具中验证数量控件行为。未执行 Shopify 服务端 Liquid 渲染、主题编辑器操作、变体切换、购物车请求或付款测试。完整店铺验收仍应按购买验证流程保留证据。