网店产品详情页检查清单：哪些问题让顾客放弃购买

基于 Baymard 和 WebAIM 研究的产品详情页检查清单：价格、运费与退货、商品图片、评价、手机端加入购物车、弹窗、站内搜索和键盘操作。

FixReports 编辑团队阅读约需 3 分钟

顾客最常在产品页放弃购买的原因是：算不清总花费，找不到运费和退货条款，无法通过照片和评价判断商品，或者很难找到并使用购买按钮，在手机上尤其如此。遮挡页面的弹窗、难以找到的政策页面、回答不了简单问题的站内搜索，以及无法用键盘操作的控件，同样会阻碍购买。下文的数据来自 Baymard Institute 和 WebAIM 的行业研究，基于大量网站和顾客样本；它们描述的是常见规律，而不是对任何单个店铺的预测。

要点

  • 在 Baymard 2026 年对 1,083 名过去三个月内有过网购经历的美国成年人进行的调查中，40% 的人表示曾因运费、税费和手续费等额外费用过高而在结账时放弃购买（Baymard Institute （在新标签页中打开））。
  • Baymard 的产品页基准研究发现，67% 的头部电商网站没有在购买区域附近提供总费用估算，44% 没有在产品主要内容中显示退货政策或提供其链接（Baymard Institute （在新标签页中打开），更新于 2026 年 3 月 18 日）。
  • 在同一项基准研究中，62% 的移动端网站产品页用户体验为“一般”（mediocre）或更差。
  • 2026 年 2 月，WebAIM 在排名前一百万网站的首页中，发现 95.9% 存在可检测到的 WCAG 不合规问题（WebAIM （在新标签页中打开））。
  • 在 Baymard 2021 年对 33 家营收最高的电商网站进行的评估中，45% 的网站存在无法用键盘操作的功能（Baymard Institute （在新标签页中打开））。

顾客为什么会放弃购买？

最常见的回答是顾客只是随便看看；其次是额外费用、配送太慢、不放心网站处理银行卡信息，以及被迫注册账户。

Baymard 的购物车放弃率页面根据 50 项研究计算得出，有记录的平均放弃率为 70.22%（页面最后更新于 2025 年 9 月 22 日）。其原因图表标注为 2026 年数据，来自一项针对 1,083 名在过去三个月内有过网购经历的美国成年人的调查。受访者可以选择多个原因（Baymard Institute （在新标签页中打开），截至 2026 年 10 月）：

在结账时放弃网购的原因受访者占比
我只是随便看看，还没准备好购买42%
额外费用太高（运费、税费、手续费）40%
配送太慢20%
我不放心把信用卡信息交给这个网站19%
网站要求我注册账户18%
结账流程太长或太复杂17%
网站出错或崩溃17%
退货政策不令人满意13%
我无法预先看到或算出订单总费用12%
信用卡被拒10%
付款方式不够多9%

这些是关于结账环节的美国调查结果，而不是对您店铺的测量。其中有几项问题其实更早就出现了，也就是在产品页上：顾客在这里第一次看到价格、配送条款和退货条件。只有您自己的分析数据才能显示哪些问题对您最重要。

产品页上的完整价格清楚吗？

当前价格、原价（如有）、包含与不包含哪些费用，以及运费估算，都应该放在购买按钮旁边。

Baymard 2026 年的产品页基准研究发现，67% 的网站没有在购买区域附近提供“订单总费用”估算，81% 的网站对以不同数量或规格出售的商品没有显示单位价格（Baymard Institute （在新标签页中打开））。请检查页面是否显示：

  • 当前价格，以及促销商品的原价。
  • 有多种规格的商品的单位价格。
  • 是否已含税费或关税。
  • 运费，或享受免运费所需的订单金额。

Shopify： 在 Dawn 主题中，当相关设置和配送政策存在时，价格区块会添加“Taxes included.”（已含税）文字和“Shipping calculated at checkout.”（运费在结账时计算）链接（Dawn 源代码 （在新标签页中打开））。这些信息准确，但并不是估算，因此请在文本区块中写上实际运费或免运费门槛。

WooCommerce： WooCommerce > 设置 > 配送（WooCommerce > Settings > Shipping）下的“Enable the shipping calculator on the cart page”（在购物车页面启用运费计算器）和“Hide shipping costs until an address is entered”（输入地址前隐藏运费）这两个选项，影响的是购物车和结账，而不是产品页（WooCommerce 源代码 （在新标签页中打开））。请把运费写进产品模板或简短描述中。

顾客在加入购物车之前能找到配送和退货信息吗？

在购买按钮附近放一段简短摘要，写明送达时间、运费和退货期限，并附上完整政策的链接。

在 Baymard 针对 1,032 名受访者的“考虑与购买行为”（Consideration & Purchase Behavior）调查中，60% 的人表示会在产品页上查找退货政策信息，但 44% 的基准测试网站没有在产品主要内容中显示退货政策或提供其链接（Baymard Institute （在新标签页中打开））。在上文 2026 年的放弃购买调查中，20% 的人提到配送太慢，13% 的人提到退货政策不令人满意。

<details class="product-policy">
  <summary>Shipping and returns</summary>
  <p>Ships in 1 to 2 business days. Free shipping on orders over $75.</p>
  <p>Free returns within 30 days. <a href="{{ shop.refund_policy.url }}">Read the return policy</a></p>
</details>

Shopify： 在 设置 > 政策（Settings > Policies）中编写您的政策（Shopify 帮助中心 （在新标签页中打开））。在 Dawn 中，产品页上的 可折叠行（Collapsible row）区块可以显示文本或某个页面的内容（Dawn 源代码 （在新标签页中打开）），因此同一个配送和退货页面就能出现在每个产品上。

WooCommerce： WooCommerce 会创建一个“Refund and Returns Policy”（退款和退货政策）草稿页面（WooCommerce 源代码 （在新标签页中打开））。在您编辑并发布之前，它会一直处于未发布状态。

产品图片能解答顾客的疑问吗？

图片应该从多个角度展示商品，并展示其实际比例和使用场景，因为许多顾客是根据照片而不是规格参数来判断尺寸和合身程度的。

Baymard 的测试发现，42% 的用户会尝试通过图片判断商品尺寸，而 37% 的基准测试网站没有提供“比例参照”图片，即把商品与人或常见物品放在一起展示。另有 23% 的网站没有提供真人模特图，这对服装、配饰和化妆品最为重要（Baymard Institute （在新标签页中打开））。

还要检查：选择颜色后图库是否切换到对应的图片，手机上的缩放是否正常，以及每张图片是否都有描述该视角内容的替代文本，例如“亚麻衬衫，背面”。

评价容易找到、值得信任吗？

在产品标题附近显示平均评分和评价数量，并链接到完整评价，同时回复差评。

Baymard 发现，89% 的基准测试网站不回复差评，63% 的网站不支持顾客在不同评价之间连续浏览评价者上传的照片（Baymard Institute （在新标签页中打开））。加载较晚的评价插件还可能把页面内容往下推，因此要为其预留空间。

Shopify： Dawn 的 产品评分（Product rating）区块会显示来自评价应用的星级，主题也注明了需要安装应用（Dawn 源代码 （在新标签页中打开））。

WooCommerce： 在 WooCommerce > 设置 > 产品（WooCommerce > Settings > Products）下，评价选项包括“Enable product reviews”（启用产品评价）、“Show 'verified owner' label on customer reviews”（在顾客评价上显示“已验证买家”标签）、“Reviews can only be left by 'verified owners'”（仅“已验证买家”可发表评价）和“Enable star rating on reviews”（在评价中启用星级评分）（WooCommerce 源代码 （在新标签页中打开））。

在手机上，加入购物车按钮容易找到和点按吗？

在手机上，顾客应该无需四处寻找就能看到价格、选择变体并点按“加入购物车”，而且控件要足够大，便于点中。

在 Baymard 2026 年的基准研究中，52% 的桌面端网站和 62% 的移动端网站产品页用户体验为“一般”或更差，57% 的网站没有用按钮来选择尺码，而是把尺码藏在下拉菜单里（Baymard Institute （在新标签页中打开））。

用真实的手机打开一个产品页，检查以下几点：

  • 首屏。 在手机的堆叠布局中，图库通常排在最前面，因此一张很高的图片可能会把标题、价格和按钮挤到首屏以下。
  • 固定购买栏。 如果使用固定购买栏，它不能遮挡获得焦点的元素。W3C 在对 WCAG 2.2 成功标准 2.4.11（AA 级）的概述中，就以遮挡焦点元素的固定页脚作为示例（W3C （在新标签页中打开））。
  • 点按目标。 WCAG 2.5.8（AA 级）规定最小尺寸为 24 × 24 CSS 像素，但有例外情况（W3C （在新标签页中打开））；Shopify 的主题指南建议移动端至少为 48 × 48 像素（Shopify （在新标签页中打开））。
  • 横向滚动。 WCAG 1.4.10 重排（Reflow）要求内容在 320 CSS 像素宽度下无需双向滚动即可使用（W3C （在新标签页中打开））。过宽的尺码表和对比表格是常见原因。

弹窗会妨碍购买吗？

顾客一进入页面就遮住产品页的弹窗，会挡住顾客想看的信息，因此请优先使用小横幅，并减少注册订阅提示。

Google 搜索中心的指南将侵入式插页和对话框描述为会遮挡内容的元素，并建议用小横幅代替全屏覆盖（Google 搜索中心 （在新标签页中打开））。Shopify 指出，弹窗内容还可能导致布局偏移（Shopify 帮助中心 （在新标签页中打开））。您保留的任何对话框都必须能用键盘关闭；WCAG 2.1.2 无键盘陷阱（A 级）要求焦点只用键盘就能离开某个组件（W3C （在新标签页中打开））。

顾客能找到您的信任和政策页面吗？

在每个页面的页脚中链接退款、配送、隐私、条款和联系页面。

在 Baymard 2026 年的调查中，19% 的受访者表示曾因不放心把银行卡信息交给网站而放弃购买。清晰的政策和联系方式，是表明店铺正规可信的基本信号。

Shopify： 在 设置 > 政策（Settings > Policies）中添加政策后，Shopify 会自动在结账页页脚中链接这些政策；如果要在店铺中显示它们，请在 内容 > 菜单（Content > Menus）中把它们添加到菜单里（Shopify 帮助中心 （在新标签页中打开）），或开启 Dawn 页脚的 政策链接（Policy links）设置。

WooCommerce： 发布退款政策草稿页面，然后把政策页面和联系页面添加到页脚。

站内搜索能找到商品和答案吗？

搜索应该能针对商品名称、拼写错误和同义词返回正确的商品，还应该能回答“退货”或“运费”之类的问题。

Baymard 2026 年对 170 多个网站和应用的搜索基准研究，将 46% 的桌面端、58% 的移动端和 64% 的应用搜索体验评为“一般”或更差，并发现 66% 的网站在非商品搜索上存在问题，例如搜索退货政策却返回一堆商品（Baymard Institute （在新标签页中打开），更新于 2026 年 4 月 29 日）。

用一款畅销品的名称、它的错误拼写、一个品类词和“退货”来测试您的店铺。在 Shopify 上，店面搜索会返回产品、博客文章和页面，并默认开启预测搜索和拼写容错，而 Search & Discovery 应用还能添加筛选器和产品加权（boost）功能（Shopify 帮助中心 （在新标签页中打开））。因此，一个汇总配送和退货信息的普通页面，就能出现在这类搜索的结果中。

只用键盘能完成购买吗？

从选择变体到进入结账，每一步都应该只用键盘就能完成，并且要有可见的焦点指示器。

WCAG 2.2 要求所有功能都能通过键盘使用（2.1.1，A 级），不能有键盘陷阱（2.1.2，A 级），焦点指示器可见（2.4.7，AA 级），且获得焦点的元素不会被其他内容完全遮挡（2.4.11，AA 级）（W3C （在新标签页中打开））。这些基本要求经常缺失。Baymard 2021 年对 33 家营收最高网站的评估发现，45% 的网站存在无法用键盘操作的功能，48% 的网站没有让焦点指示器始终可见（Baymard Institute （在新标签页中打开））。WebAIM 2026 年 2 月的扫描发现，每个首页平均检测到 56.1 个错误，其“购物”类网站则为 71.0 个（WebAIM （在新标签页中打开））。

五分钟快速测试：

  1. 打开一个产品页，不碰鼠标，按 Tab 键。
  2. 确认您始终能看到焦点在哪里。
  3. 选择尺码和颜色，并修改数量。
  4. 按下“加入购物车”，确认焦点移入购物车抽屉，并且抽屉能用键盘关闭。
  5. 到达结账按钮。
/* A visible focus style for keyboard users */
:focus-visible {
  outline: 3px solid #1a5fb4;
  outline-offset: 2px;
}

免费扫描大约一分钟就能检查其中的许多项目。转化报告会把价格可见性、手机端加入购物车、配送和退货信息、弹窗、页脚政策链接、搜索、键盘购买路径和横向滚动等页面检查结果，转化为按优先级排列的建议。它基于页面检查，而不是您的销售数据，也不对销售额作任何保证。

常见问题

顾客放弃购买最常见的原因是什么？

在 Baymard 2026 年对 1,083 名美国成年人的调查中，排名第一的回答是“只是随便看看”（42%）。在其他原因中，运费、税费和手续费等额外费用以 40% 位居首位，高于配送太慢的 20%。

解决这些问题会提高我的转化率吗？

没有人能作出这种承诺。这些研究描述的是在大量网站和顾客样本中普遍存在的障碍；消除这些障碍能否改变您的结果，取决于您的产品、价格和流量，因此请在每次改动前后进行测量。

配送和退货信息应该放在产品页的什么位置？

放在价格和购买按钮附近，以简短摘要的形式呈现，并附上完整政策的链接。在 Baymard 的研究中，60% 的受访者表示会在产品页上查找退货政策信息。

在手机上，加入购物车按钮必须无需滚动就能看到吗？

没有规定要求这样做，但顾客应该能很快看到价格并找到按钮。固定购买栏是一种选择，前提是它不会遮挡获得焦点的元素或其他内容。

无障碍是转化的一部分吗？

是的，道理很简单：如果顾客无法用键盘或屏幕阅读器操作变体选择器或加入购物车按钮，就无法完成购买。WCAG 2.2 AA 级涵盖了这些基本要求。

资料来源

全部指南