Shopify App Blocks 上线前 QA 检查清单

Shopify app blocks 和 theme app extensions 比旧的 ScriptTag 式前台注入更干净，但它们依然是生产代码。评价、订阅、捆绑销售、推荐、尺码表、会员、门店自提和分析工具，都会影响布局、性能、追踪和转化体验。

这份清单适合发布新 Shopify 主题、迁移到 Online Store 2.0 sections、替换旧 app snippets，或重构商品模板时使用。目标是证明每个由 app 控制的前台区域都能在真实 storefront 中工作，而不是只在 Shopify admin 里看起来正常。

先列出主题里所有 app 区域：app blocks、app embeds、checkout extensions、购物车组件、商品页组件、analytics pixels、客户账户区域，以及仍然硬编码在主题里的旧 snippets。记录它出现在哪里，以及支持什么业务目标。

这份清单可以避免上线当天才发现问题。主题编辑器里看起来很干净，但 app embed 可能仍然在所有页面加载，旧 snippet 可能仍然渲染在旧模板里，或者某个 app block 只对一种商品类型显示。

• 记录每个 app、负责人、业务用途、模板位置和降级行为。
• 标记它属于 app block、app embed、checkout extension、pixel、script 还是旧 snippet。
• 检查首页、PDP、collection、购物车、账户、博客、落地页和政策页模板。
• 记录设置位于 Shopify admin、主题编辑器、metafields 还是 app dashboard。
• QA 开始前先移除不用的 app blocks 和 embeds，让测试范围真实可信。

App blocks 常常依赖商品数据，不要只测一个完美的畅销品。要测试有变体、无变体、售罄、订阅、捆绑销售、预售、评价、缺少媒体、本地化文案，以及不同商品模板的商品。

主要风险是条件渲染。没有尺码数据时，尺码表不应该留下空白区域。评价模块加载时不应该造成明显布局跳动。订阅模块也不应该和变体选择、selling plans、购物车属性或结账预期冲突。

• 为每个模板、商品类型、市场和履约规则选择一个代表商品测试。
• 检查空状态、加载、错误、售罄、预售、订阅、捆绑和折扣状态。
• 确认 app blocks 在商品媒体、价格、变体选择、数量和加购按钮周围顺序正确。
• 检查移动端间距、sticky add-to-cart 和抽屉交互不会与 app UI 重叠。
• 为每个影响收入的 app 区域保留上线前后截图。

App embeds 容易漏测，因为它们不一定是可见模块。它们可能注入聊天、分析、个性化、同意管理、评价脚本、推荐或样式。要在功能应该出现的页面测试，也要在不应该出现的页面测试。

常见性能问题是某个全局脚本在所有路由加载，但它只支持一个商品页组件。常见 QA 问题是团队以为 app block 已经替代旧实现，但 live theme 里对应 embed 仍然开启。

• 打开主题编辑器的 app embeds 面板，记录每个开启的 embed。
• 在首页、PDP、collection、购物车和内容页检查网络请求与脚本执行。
• 当 app extension 已经负责前台输出时，禁用重复的旧 snippets。
• 确认 consent、analytics 和个性化脚本遵守 cookie 与地区规则。
• 确保卸载或禁用 app 后，不会残留破损 Liquid、CSS 或 JavaScript 引用。

App blocks 是客户体验的一部分，所以需要和自定义主题代码一样做前端 QA。检查它们对 LCP、INP、CLS、JavaScript 体积、焦点顺序、键盘访问、标签、对比度和响应式表现的影响。

这些检查要在 storefront 中做，而不只是预览。第三方脚本会因为域名、市场、同意状态、登录状态或生产 app 配置不同而表现不同。既要测试顺利路径，也要测试较慢或失败的路径。

• 在重点模板上启用 app blocks 前后跑 Lighthouse 或 WebPageTest。
• 关注评价数量、推荐卡片、价格组件和延迟加载 embed 带来的布局跳动。
• 检查 app UI 的键盘焦点、弹窗陷阱、ARIA 标签、错误提示和颜色对比度。
• 使用移动网络节流测试，因为 app 脚本常常是慢会话里的主要成本。
• 记录哪些性能成本被接受，以及对应 app 的商业负责人是谁。

Apps 可能无意中影响 SEO 和分析。评价 app 可能输出 aggregateRating schema，捆绑销售 app 可能改变价格展示，个性化工具可能隐藏可抓取内容，追踪 app 可能重复记录 purchase 或 add-to-cart 事件。

上线前，把 app blocks 开启和关闭后的渲染 HTML 与分析事件做对比。测试要回答三个问题：页面是否仍然清楚描述商品，结构化数据是否有效，追踪是否只记录一次用户行为。

• 在 app blocks 渲染后验证 Product、Breadcrumb、Review、FAQ 和 MerchantListing 结构化数据。
• 检查 canonical、标题层级、内链、商品描述和重点文案是否存在于渲染 HTML 中。
• 确认加购、开始结账、购买、订阅、捆绑和评价事件没有重复触发。
• 检查 app 生成的链接不会制造抓取陷阱、被屏蔽 URL 或意外 nofollow。
• 测试本地化页面，确保 app 文案、schema 和追踪参数匹配所选市场。

Shopify 主题上线不只是点击 publish。App blocks 的设置可能绑定在未发布主题上，app embeds 可能需要在 live theme 中开启，旧 snippets 也可能仍然存在于旧主题中。真正上线前要先演练顺序。

回滚方案要说明如果新主题下线，每个 app 区域会发生什么。如果结账、订阅、评价或购物车行为出问题，团队需要一个已知恢复路径，而不是在压力下重新摸索 app 设置。

• 记录主题设置、app embeds、app dashboards、pixels 和 checkout extensions 的准确发布顺序。
• 复制当前 live theme，并在上线后 QA 完成前保留它。
• 修改新主题 app 设置前，先保存关键 app 设置截图。
• 测试回滚主题时，app 位置和 app embed 行为是否也会恢复。
• 指定谁可以批准临时禁用阻塞结账或加购的 app。

发布后，立即测试真实 storefront。使用真实 URL、真实市场和真实商品状态。执行测试加购流程，检查 analytics debug view，查看性能，并关注客服渠道是否出现 app 相关反馈。

至少监控一个活动周期。App 问题有时只会在流量上升、商品售罄、折扣上线、市场切换货币，或 app dashboard 同步新数据后才出现。

• 在 live URL 上复查 PDP、collection、购物车、结账入口、追踪和关键 app UI。
• 监控 app 错误日志、浏览器 console、结账转化、加购率和页面速度。
• 确认评价、订阅、会员、推荐和捆绑数据上线后仍然同步。
• 把 app block QA 加入未来每次主题发布、app 更新和活动落地页检查清单。