Shopify 知识库 · 指南

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

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

历史资料

请结合文中的适用版本和来源阅读。

本文基于 Horizon 4.2.0，源码固定到 5acd1b6（核验于 2026-10-07）。结论限于此 commit，不表示其他版本行为相同；本篇为源码分析，未完成店铺运行验证。

商品页既要展示当前商品，也要允许商家调整信息顺序。Horizon 把媒体和详情作为主区域中的固定组成，把详情内部及追加内容保留为可配置组合。

模板决定实例，Section 连接内容

先读 templates/product.json，再读 sections/product-information.liquid。模板保存实例与配置；Section 用静态调用取得 _product-media-gallery 和 _product-details，另用动态插槽取得追加区块。三个结果被捕获为 HTML，再传给 snippets/product-information-content.liquid。

因此，修改页面左右布局时先看共享布局片段；调整详情内部内容顺序时先看模板和详情容器；修改商品媒体的行为时继续进入媒体区块与其脚本。把所有修改都放进主 Section 会跨越这些职责。

主 Section 向两个固定子块显式传递当前商品上下文。详情区块在 blocks/_product-details.liquid 中收集子内容，再交给 group。媒体入口位于 blocks/_product-media-gallery.liquid。

另一条入口 sections/featured-product-information.liquid 也使用共享的商品信息布局。复用布局意味着视觉结构可以相似，但阅读时仍需检查商品从哪一处设置或上下文进入，不能把精选商品自动当作当前页面商品。

主 Section 根据设置输出吸底购买条，它拥有自己的商品信息、价格与按钮标记；浏览器行为见 assets/sticky-add-to-cart.js。只调整详情购买按钮的文案或状态，还不足以确认吸底条同步正确。

定制商品页时，至少同时检查详情购买区、吸底条以及快速购买场景。有关提交行为的职责边界见购买流程，有关卡片入口见商品卡。

先用只有默认变体的商品确认页面基础结构，再加入多变体、无媒体、长标题和不可购买状态。分别检查媒体顺序、详情内容顺序和按钮所对应的商品；最后在小屏与键盘操作下检查阅读和焦点顺序。

这些是根据调用关系列出的验证步骤。本篇完成的是源码核对，没有把它们写成已经通过的店铺测试。