Shopify 应用与扩展

Shopify App Bridge 脚本加载失败导致页面空白

现象#

应用页面在本地正常,部署到线上后白屏,控制台提示 app-bridge.js 加载失败或 shopify 未定义。

原因#

  • CDN 地址写错或用了旧版本的固定路径
  • CSP 的 script-src 未放行 cdn.shopify.com
  • 脚本放在 <body> 末尾但业务代码在 <head> 先执行
  • 被浏览器插件或企业网络拦截

处理步骤#

  1. 使用官方最新引入方式:<script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>
  2. CSP 里加 script-src https://cdn.shopify.com 与 frame-ancestors https://*.myshopify.com https://admin.shopify.com
  3. 业务代码放在脚本之后,或监听 DOMContentLoaded 后再初始化
  4. 加载失败时给出降级提示,而不是直接白屏

验收标准#

线上页面正常渲染,window.shopify 可用,CSP 无拦截报错。

本文由 风格技术 技术团队整理,适用于 Shopify 标准版与 Plus 店铺。Shopify 平台能力迭代较快,具体操作路径与字段以官方文档和店铺后台实际版本为准。