2026年10月19日星期一 独立的电商情报
Storefront Daily.

关于 Shopify 与电商的报道与研究

指南

Dawn 没有固定加入购物车按钮:代码揭示了什么,以及 3 种解决办法

商家之所以在 Dawn 中寻找固定加入购物车按钮的开关,是因为 Horizon 有这个功能,但 Dawn 实际的 section 文件里根本没有这项设置,而弄清楚存在哪些文件,会改变一个修复方案实际能做到什么。

作者 Storefront Daily 研究组  ·  2026年9月11日  ·  2 分钟阅读  ·  由 AI 依据来源数据撰写


有商家会搜索 “shopify dawn sticky add to cart”,因为他们在别处看到了这个功能,就以为当下每款 Shopify 主题都有某种形式的实现。Dawn 没有。混淆的根源是 Horizon——另一款确实带有固定吸附开关的 Shopify 主题——两款主题在论坛帖子和应用商店评论里被混为一谈,直到人们开始在 Dawn 里找一个从未写进其代码的设置。

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 把这个开关放在了 Dawn 最不需要它的位置

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,那是完全改错了页面层级。

除了这个开关,Horizon 的购物车与加入购物车 block 还提供了什么

文件设置数Block 类型值得注意的字段
Dawn sections/main-cart-footer.liquid33color_scheme、padding_top 0–100/4px、padding_bottom 0–100/4px
Dawn sections/main-cart-items.liquid3未列出color_scheme、padding_top 0–100/4px、padding_bottom 0–100/4px
Horizon sections/product-information.liquid92enable_sticky_add_to_cart、content_width、desktop_media_position、gap 0–48/4px
Horizon sections/main-cart.liquid59section_width、background_color、text_color、padding-block-start/end 0–100/1px
Horizon blocks/add-to-cart.liquid4未列出style_class(3 个选项)、custom_button_background/text/border
Horizon blocks/_cart-products.liquid14未列出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 的那个复选框。

给准备给 Dawn 添加自定义代码的人的市场背景

方法:下列数据来自 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 以强行加上固定吸附行为的人,都是在一个以此为基准线的主题上做改动,并且应当在上线改动后重新核查真实访客的通过率,而不是相信单次测试跑测。

给真正想在 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 对比(schema 设置项数量) 3 Dawn cart-footer 3 Dawn cart-items 9 Horizon product-info 5 Horizon main-cart 4 Horizon add-to-cart 14 Horizon cart-products 方法:设置数直接读取自所核查提交中每款主题的 schema(Dawn 258f00f,Horizon 8b42ace)。

任何在 Dawn 里追求固定加入购物车按钮的人,都该停止编辑购物车页脚,要么给现有标记添加自定义代码,要么把这个功能需求转移到产品页——在那里 Horizon 已经以复选框的形式提供了它。在假定任何主题(包括 UTD 的某款主题)拥有某个仅由截图暗示的开关之前,先自己去查一查设置文件。

常见问题

Dawn 有让加入购物车按钮固定在屏幕上的设置吗?

没有。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 并不提供。

哪款 Shopify 主题真正内置了固定加入购物车按钮的开关?

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)。

如果我用自定义代码给 Dawn 加上固定加入购物车按钮,会影响页面速度吗?

这里没有任何测量能单独隔离出固定按钮脚本对 Core Web Vitals 的影响,所以没人能给出确定的答案。已知的是市场背景:在 247 款拥有足够移动端数据的主题中,通过全部 Core Web Vitals 的访问占比中位数为 85.5%,最好的主题达到 98.6%,最差的为 46.1%。在桌面端,199 款拥有足够数据的主题中,中位数为 86.2%,最好的为 99.2%,最差的为 30.3%。任何添加到 Dawn 的自定义脚本,都应在上线后对照真实访客数据核查,而不是假定它是安全的。

Horizon 的购物车页面也有我需要了解的布局设置吗?

有。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 下拉选择,以及用于分隔线和供应商显示的复选框。

在 Horizon 中,加入购物车 block 本身控制什么?

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 复选框里。

来源与数据

  1. Themescout market aggregate ranking, 329 themes, price and rating fields (checked September 4, 2026)
  2. CrUX Core Web Vitals dataset, July 2026, real visitor pass rates by theme (checked September 4, 2026)
  3. Shopify/dawn repository, sections/main-cart-footer.liquid and sections/main-cart-items.liquid, commit 258f00f (checked September 4, 2026)
  4. Shopify/horizon repository, sections/product-information.liquid and sections/main-cart.liquid, commit 8b42ace (checked September 4, 2026)
引用本报告: Storefront Daily 研究组 (2026). “Dawn 没有固定加入购物车按钮:代码揭示了什么,以及 3 种解决办法.” Storefront Daily. https://storefrontdaily.com/zh/guides/dawn-has-no-sticky-add-to-cart-what-the-code-shows-and-3-fixes/
本页数据为我们自行实测所得。您可以引用,并转载其中一个表格或图表,前提是附上指向本页的可见且可点击的链接。完整条款: 转载与引用.