详情页还是购物车：搭售推荐位到底放哪好？

消费者已经做好了决定。选好了色号，选好了 30 片装，大拇指就停在加购按钮附近。搭售的第二件商品必须在某个节点出现。在结账前，它有两个去处：一个是当前浏览的详情页，另一个是点击加购后的购物车。放在哪里，决定了你在这一刻向消费者提出什么要求。下面三家品牌给出了三种不同的解法。

详情页：搭售模块永远在按钮下方

这三家品牌没有一家把搭售商品放在加购按钮上方。唯一的区别在于距离：Bloom 距离按钮不到半屏，Glossier 约占三分之二屏，Transparent Labs 则隔了整整五屏半。

Glossier 的 Futuredew 详情页长达 12 屏，主按钮 Add to bag（售价 $30）位于第 2 屏。紧接着是四个搭售模块：第 3 屏的 ADD ON 和 SAVE WITH SETS，第 5 与第 6 屏的 BUILD YOUR LOOK，以及第 8 屏的 YOU MIGHT ALSO LIKE。前两个模块是折叠行，点击加号才会展开：Invisible Shield SPF50 和 Balm Dotcom 各配有一张图、一个品名和一个 +，没有价格，也没有加购按钮。点击 Invisible Shield SPF50 上的加号，这一行才会展开，显示 Add to bag（售价 $32）和 See full page。

Bloom 的青汁详情页将优惠模块放在加购按钮下方不到半屏的位置，采用双标签页形式。当页面向下滚动时，加购按钮会吸附在屏幕底部，直到滚动到标签页正上方才停住定位。Pair It With 默认展开；Bundle & Save 25% 只有点击才会显示内容。展开的标签页里放着一款搭配推荐商品，自带独立的 Add to Cart 按钮。

Transparent Labs 是三家中唯一明确说明搭售用途的。它的模块标题写着 Complete Your Stack，开头一段话：Pair Bulk Pre-Workout with these products for a complete foundational stack.（将这款氮泵与以下产品搭配，打造完整的补剂组合）。随后是四张卡片，每张都写明了功效；但都没有标注价格或折扣，也没有加购按钮，四张卡片上的按钮都写着 Shop Now，点击会直接跳转到该商品自身的详情页。这个标题位于第 8 屏（总共 18 屏），距离主加购按钮 Add To Cart 隔了五屏半。此时吸底加购条已经跟随滚动，在这个深度直接遮挡了标题的下半部分。

所以，唯一说明搭售用途的品牌，反而无法直接在当前页面购买。另外两家只在标题上写个短语，要么强调效果（BUILD YOUR LOOK），要么强调搭配（Pair It With），要么强调省钱（Bundle & Save 25%），谁都没有写一句话解释“为什么这两样东西要放在一起买”。这是我在屏幕上直观看到的现象；折叠行或未滑动的轮播图里可能写了更多内容，但我没有展开查看。

详情页搭售的应用场景其实比想象中更窄。它只适合一种优惠：消费者为了使用刚选好的商品而需要的补充品。我们在 2026年7月关于商品详情页必备七大模块的文章里就提到过这一点：搭售商品应当用来完善你自家的用法指南。

购物车：第一次看到订单全貌的地方

在这三家网站分别点一下加购，页面侧栏都会滑出一个抽屉式购物车。但这三个购物车截然不同。

Glossier 的购物车直接在消费者面前算账。标题写着 You’re $10 away from free shipping（还差 $10 即可包邮），下方是一条带有两个标记点的进度条：Free shipping（包邮）和 + Free gift（赠品）。之前的详情页写着 Free standard shipping on orders $40+（满 $40 包邮）；加购商品是 $30；购物车抽屉直接算出了差额，且 $10 会随着车内金额实时变动。商品下方跟着 BUNDLE + SAVE：Save on Cloud Paint，现价 $13（原价 $16），附带提示 You save 20% by bundling with items in your bag.（与购物车内商品组合购买可省 20%）。

Bloom 的购物车抽屉展示了刚添加的商品，以及一个包含四张卡片的轮播模块，标题为 Psst…We Think You'd Love These Too!，每张卡片都有独立的 Add To Cart 按钮；但屏幕上只能看到第一张卡片，且卡片上推荐的就是购物车里已有的青汁粉。Transparent Labs 的购物车抽屉里只有商品和一条绿色的 Free Shipping 提示，说明订阅模式本身就包含包邮。在我测试当天，后两家的购物车里都没有凑单倒计时的包邮进度条，没有赠品提示，也没有优惠码输入框，连 Bloom 详情页上写的 FREESHIP 折扣码在购物车里也找不到踪影。在把这当成缺点之前需要注意：Glossier 购物车里装的是单次购买商品，而 Transparent Labs 和 Bloom 购物车里装的都是自带包邮的订阅商品，本来就没有包邮门槛需要倒计时。我只查看了一次购物车，里面只有一件商品，这不足以断定网站本身就是这么设计的，还是恰好因为商品属性所致。

购物车之所以看起来光秃秃，很大程度上取决于建站主题自带的默认功能。Shopify 帮助中心提到，默认情况下，详情页在主题编辑器中包含 Product information section（商品信息模块）和 Related products section（相关商品模块），而 By default, the cart page has an Items section and a Subtotal section in the theme editor.（默认情况下，购物车页面在主题编辑器中只有商品列表模块和小计模块）。这些只是默认设置，并非上限：同一篇文章也指出，具体设置取决于主题开发者和版本，而且文章完全没提到这三家网站都在用的抽屉式购物车（Cart Drawer）。

当然还有第三个位置，即下单完成后的感谢页，本文暂不展开讨论。

决策链节点

原则：详情页补全商品，购物车补全订单

搭售推荐必须放在消费者能顺理成章做出决定的地方。在详情页，消费者还在思考商品本身，因此适合推荐能够补全该商品的配套组件：一件商品，明确标注它能补全什么，附带价格和直接加购按钮。到了购物车，消费者第一次看到订单全貌，此时适合推荐能够补全订单的优惠：距离包邮还差多少，满额送什么赠品，或者买第二件能省多少钱。我们在 2026年7月关于结账流程的文章中就已经提倡设置包邮门槛提示；购物车正是发挥这一作用的最佳场所，因为门槛针对的是整笔订单，而购物车是第一个展示订单全貌的界面。仅看这三家店铺并不能证明一切；这是我基于观察做出的判断，但我依然敢下这个赌注。

这为你排查现有模块提供了一个标准。如果一个搭售模块没有价格，没有加购按钮，或者标题只提能省多少钱，那就是要求消费者先自己去查清楚资料，然后才能决定买不买。

今天就动手做这件事

用手机打开你的网站，不要用电脑。把爆款商品加入购物车，按顺序查看展示给你的所有推荐内容。记下三件事：第一个搭售模块距离加购按钮有多远；它的标题是写明了能补全什么，还是只写了能省多少钱；价格和加购按钮是否无需二次点击就能直接看到。

接着查看购物车。如果详情页任何地方写了包邮门槛，看看购物车是否把这个数字转化为了具体的凑单差额，就像我们结账流程文章里 $18 away from free shipping 那样。如果购物车里只有商品、小计和结账按钮，其他什么都没有，这就是默认模板的原始状态。至于你的主题是不需要安装应用或写代码就能加上这行提示，就需要找帮你建站的人问清楚了。

资料来源：

以下品牌官网均于 2026年8月17日 在移动端设备打开测试

• Glossier, Futuredew — [glossier.com/products/futuredew]([http://glossier.com/products/futuredew]](http://glossier.com/products/futuredew])(https://www.glossier.com/products/futuredew))

• Transparent Labs, Bulk Pre-Workout — [transparentlabs.com/products/preseries-bulk-preworkout]([http://transparentlabs.com/products/preseries-bulk-preworkout]](http://transparentlabs.com/products/preseries-bulk-preworkout])(https://www.transparentlabs.com/products/preseries-bulk-preworkout)),

• Bloom Nutrition, Greens & Superfoods — [bloomnu.com/products/greens-superfoods]([http://bloomnu.com/products/greens-superfoods]](http://bloomnu.com/products/greens-superfoods])(https://bloomnu.com/products/greens-superfoods))