关于 Shopify 与电商的报道与研究
商家之所以在 Dawn 中寻找固定加入购物车按钮的开关,是因为 Horizon 有这个功能,但 Dawn 实际的 section 文件里根本没有这项设置,而弄清楚存在哪些文件,会改变一个修复方案实际能做到什么。
有商家会搜索 “shopify dawn sticky add to cart”,因为他们在别处看到了这个功能,就以为当下每款 Shopify 主题都有某种形式的实现。Dawn 没有。混淆的根源是 Horizon——另一款确实带有固定吸附开关的 Shopify 主题——两款主题在论坛帖子和应用商店评论里被混为一谈,直到人们开始在 Dawn 里找一个从未写进其代码的设置。
真正管控 Dawn 购物车体验的两个文件是 sections/main-cart-footer.liquid 和 sections/main-cart-items.liquid。两者都是在 Shopify/dawn 仓库的提交 258f00f(日期 2026-08-10)上核查的。页脚 section 有 3 项设置和 3 种 block 类型。这些设置是 color_scheme、一个从 0 到 100、步进 4px 的 padding_top 范围,以及一个同样是 0 到 100、步进 4px 的 padding_bottom 范围。商品项 section 也有 3 项设置,而且是完全相同的三件套:color_scheme、padding_top、padding_bottom。两个文件都没有提到 position、fixed、sticky,或任何类似于吸附到视口的行为。这不是文档缺失,而是所核查提交中完整的设置 schema。如果一款主题的 schema 里没有某种行为的字段,主题后台就不会有对应的复选框,就这么简单。
Horizon 的 sections/product-information.liquid 才是真正承载 enable_sticky_add_to_cart 的文件,它位于该文件的 9 项设置和 2 种 block 类型之中,核查于 Shopify/horizon 的提交 8b42ace(日期 2026-08-31)。同一文件中的其他 8 项设置是 content_width(含 2 个选项的下拉选择)、desktop_media_position(同样 2 个选项)、equal_columns 和 limit_details_width(均为复选框),以及一个从 0 到 48、步进 4px 的 gap 范围。这告诉你 Shopify 自家主题团队认为固定吸附应归属何处:不在购物车页脚,不在购物车商品列表,而在管控产品媒体与详情如何并排摆放的产品页 section 中。商家若想通过编辑购物车页脚把固定吸附行为移植进 Dawn,那是完全改错了页面层级。
| 文件 | 设置数 | Block 类型 | 值得注意的字段 |
|---|---|---|---|
Dawn sections/main-cart-footer.liquid | 3 | 3 | color_scheme、padding_top 0–100/4px、padding_bottom 0–100/4px |
Dawn sections/main-cart-items.liquid | 3 | 未列出 | color_scheme、padding_top 0–100/4px、padding_bottom 0–100/4px |
Horizon sections/product-information.liquid | 9 | 2 | enable_sticky_add_to_cart、content_width、desktop_media_position、gap 0–48/4px |
Horizon sections/main-cart.liquid | 5 | 9 | section_width、background_color、text_color、padding-block-start/end 0–100/1px |
Horizon blocks/add-to-cart.liquid | 4 | 未列出 | style_class(3 个选项)、custom_button_background/text/border |
Horizon blocks/_cart-products.liquid | 14 | 未列出 | gap 8–36/4px、image_ratio(3 个选项)、dividers、vendor、input_style |
Horizon 的 sections/main-cart.liquid 有 5 项设置和 9 种 block 类型,设置中包括 section_width、background_color、text_color,以及两个名为 padding-block-start 和 padding-block-end 的内边距范围,二者都从 0 到 100、步进 1px,比 Dawn 的 4px 内边距控件更细。block 文件 blocks/_cart-products.liquid 自身就带有 14 项设置,比 Dawn 任一购物车文件的总数都多,其中包括一个从 8 到 36、步进 4px 的 gap 范围,一个含 3 个变体的 image_ratio 下拉选择,以及用于 dividers 和 vendor 的复选框。加入购物车 block 本身,即 blocks/add-to-cart.liquid,只有 4 项设置:含 3 个变体的 style_class,以及按钮背景、文字和边框三个颜色字段。这 4 项都不涉及固定吸附,因为那部分逻辑在上一层文件里,也就是产品信息 section 的那个复选框。
方法:下列数据来自 2026-09-04 在 themescout.co 上核查的 329 款主题的市场汇总,加上一份独立的 2026 年 7 月 CrUX 数据集,该数据集测量真实访客会话,而非实验室跑测。全市场主题价格中位数为 $300,区间从 $100 到 $500。在 308 款主题中,评分中位数为 4.53(满分 5),评论数中位数为 23。Core Web Vitals 通过率在这里之所以重要,是因为通过自定义代码添加固定按钮会触及布局稳定性,而布局稳定性正是 Core Web Vitals 所评分的指标之一。在移动端,247 款拥有足够数据的主题中,通过全部 Core Web Vitals 的访问占比中位数为 85.5%,市场上最好的主题达到 98.6%,最差的仅有 46.1%。在桌面端,199 款拥有足够数据的主题中,中位数为 86.2%,最好的为 99.2%,最差的为 30.3%。任何编辑 Dawn 以强行加上固定吸附行为的人,都是在一个以此为基准线的主题上做改动,并且应当在上线改动后重新核查真实访客的通过率,而不是相信单次测试跑测。
就代码所呈现的情况来看,可选项其实很有限。第一,添加自定义 CSS 和一小段脚本,针对现有的购物车页脚标记,因为 sections/main-cart-footer.liquid 的 3 项设置做不到这件事,但底层 HTML 仍然可以在主题代码编辑中用 position: sticky 来定位,完全绕开设置 schema。第二,如果真正的目标是产品页(而不是购物车页)上的固定加入购物车按钮,那就为产品页切换到 Horizon,因为 enable_sticky_add_to_cart 在那里是原生复选框,无需任何代码。第三,对于大众市场上的任何主题,包括 UTD 的主题(浏览 UTD 的主题列表),都只应在按本文核查 Dawn 和 Horizon 的方式核查过其实际设置文件之后,才把它当作候选,因为一张显示固定按钮的主题商店截图,完全无法证明该设置存在于哪个 section 文件中,甚至无法证明它是否存在。
任何在 Dawn 里追求固定加入购物车按钮的人,都该停止编辑购物车页脚,要么给现有标记添加自定义代码,要么把这个功能需求转移到产品页——在那里 Horizon 已经以复选框的形式提供了它。在假定任何主题(包括 UTD 的某款主题)拥有某个仅由截图暗示的开关之前,先自己去查一查设置文件。
没有。Dawn 中管控购物车区域的两个文件 sections/main-cart-footer.liquid 和 sections/main-cart-items.liquid,各自恰好暴露 3 项设置,而且全部都是 color_scheme、padding_top 或 padding_bottom。截至 Shopify/dawn@258f00f(提交 2026-08-10),这两个文件中都不存在 sticky、position 或 fixed 之类的开关。如果商家想在 Dawn 中实现这种效果,就必须添加自定义代码,因为主题自身的设置 schema 并不提供。
Horizon 有。它的 sections/product-information.liquid 文件包含 9 项设置和 2 种 block 类型,其中一项设置的名字就叫 enable_sticky_add_to_cart,是一个复选框。同一个文件还控制 content_width、desktop_media_position、equal_columns、limit_details_width,以及一个从 0 到 48、步进 4px 的 gap 范围。这些数据取自 Shopify/horizon@8b42ace(提交 2026-08-31)。
这里没有任何测量能单独隔离出固定按钮脚本对 Core Web Vitals 的影响,所以没人能给出确定的答案。已知的是市场背景:在 247 款拥有足够移动端数据的主题中,通过全部 Core Web Vitals 的访问占比中位数为 85.5%,最好的主题达到 98.6%,最差的为 46.1%。在桌面端,199 款拥有足够数据的主题中,中位数为 86.2%,最好的为 99.2%,最差的为 30.3%。任何添加到 Dawn 的自定义脚本,都应在上线后对照真实访客数据核查,而不是假定它是安全的。
有。Horizon 中的 sections/main-cart.liquid 有 5 项设置和 9 种 block 类型,包括 section_width、background_color、text_color,以及两个内边距范围 padding-block-start 和 padding-block-end,二者都从 0 到 100、步进 1px。block 文件 blocks/_cart-products.liquid 自身又增加了 14 项设置,其中包括一个从 8 到 36、步进 4px 的 gap 范围,一个带 3 个选项的 image_ratio 下拉选择,以及用于分隔线和供应商显示的复选框。
blocks/add-to-cart.liquid 有 4 项设置:style_class(一个含 3 个变体的下拉选择),加上 custom_button_background、custom_button_text 和 custom_button_border,全部是颜色设置。这 4 项设置都不直接涉及固定吸附,那个逻辑在上一层,即产品信息 section 的 enable_sticky_add_to_cart 复选框里。