如何将Shopify CLI创建的嵌入式应用转为非嵌入式应用？

如果已经在Shopify Partners仪表盘禁用嵌入选项但未生效，可按以下步骤排查修复：

• 确认Partners后台设置已保存生效
  进入Shopify Partners后台→目标应用→「设置」标签→找到「嵌入应用到Shopify管理后台」选项，取消勾选后务必点击页面底部的保存按钮。部分场景下会因未保存导致设置不生效。

• 修改应用代码中的嵌入配置
  Shopify CLI生成的应用会通过配置文件控制嵌入行为：

  • 若为Node.js/Remix应用，检查根目录下的shopify.app.toml，确保embedded字段设为false：

    [application]
    embedded = false
    

  • 若为React前端应用，查看入口文件（如app/entry.server.tsx）中的AppProvider组件，移除或修改isEmbeddedApp={true}属性为false，避免强制开启嵌入模式。

• 重新部署并加载新配置

  • 本地开发环境：重启Shopify CLI服务，执行shopify app dev确保新配置被加载。
  • 生产环境：部署修改后的代码后，回到Partners后台的应用设置页面，重新保存一次「应用URL」等基础配置，触发Shopify端的配置更新。

• 调整OAuth授权后的重定向逻辑
  部分CLI生成的应用默认会在授权完成后跳转到嵌入路径，需修改auth路由的重定向逻辑：

  • 移除重定向URL中的embedded=1等嵌入相关参数，直接指向应用的独立首页，确保授权后打开的是独立页面而非iframe内的路径。

• 清除缓存测试

  • 清除浏览器缓存或使用无痕模式打开Shopify后台，避免旧的嵌入状态被缓存。
  • 等待5-10分钟让Shopify后台缓存更新，再测试应用是否以独立窗口打开。

内容的提问来源于stack exchange，提问作者Pranoy S Kumar