Shopify App Embed 应用嵌入启用方法

很多 App 安装完成后前台并没有任何变化，原因是它们需要在主题编辑器里手动开启。Shopify 现代 App 通过 Theme App Extension 把功能注入主题，表现为两种形式：「应用嵌入（App embeds）」是作用于全站的开关，在主题编辑器左侧的应用嵌入面板中打开；「应用区块（App blocks）」则是可以拖到页面任意位置的区块，在「添加区块」里选择。两者都只对你正在编辑的那个主题生效，更换主题后需要重新启用。

先搞清三种集成方式

• 应用嵌入（App embed）：适合全站生效、没有固定显示位置的功能，例如在线客服浮窗、弹窗订阅、Cookie 提示、跟踪脚本、浮动购物车按钮。它在主题编辑器中是一个开关，部分带有少量设置项。
• 应用区块（App block）：适合在特定位置展示的功能，例如商品页的评论列表、星级评分、尺码表按钮、信任徽章、追加销售推荐。它像主题自带的区块一样可以添加、拖动排序、删除。
• 旧式代码注入：早期 App 通过直接修改主题 Liquid 文件或插入 Script Tag 来工作。这种方式侵入性强，卸载后容易留下残留代码。如今 Shopify 要求新 App 优先使用 Theme App Extension，选 App 时也应优先选择支持应用嵌入和应用区块的产品。

启用应用嵌入的步骤

1. 进入 Shopify 后台，点击「在线商店 > 主题」。
2. 在要启用的主题上点击「自定义」，进入主题编辑器。注意要确认当前编辑的是「当前主题」（已发布的那个），如果只在未发布的主题上启用，客户是看不到的。
3. 在左侧面板最下方找到「应用嵌入」图标（形状像一个拼图或堆叠的方块），点击打开面板。
4. 面板中会列出所有已安装且支持应用嵌入的 App，找到目标 App，点击右侧的开关将其打开。
5. 如果开关旁有展开箭头，点开可以调整该嵌入的设置，例如显示位置、颜色、触发条件。
6. 点击右上角「保存」。
7. 回到前台刷新页面确认效果，必要时清除浏览器缓存或使用隐身窗口查看。

如果你的店铺启用了多个市场并对不同市场使用了不同的主题内容，编辑器顶部可以选择市场，应用嵌入设置会跟随所选市场。

添加应用区块的步骤

1. 在主题编辑器顶部的页面选择器中切换到需要添加区块的页面类型，例如「商品 > 默认商品」。
2. 在左侧结构树中找到要放置区块的分区（通常是商品信息分区），点击该分区下的「添加区块」。
3. 在弹出的列表中切换到「应用」分类，或者直接搜索 App 名称。
4. 选择对应的区块，它会出现在分区中，拖动手柄可以调整位置，例如把评分放在标题下方、把尺码表放在变体选择器旁边。
5. 在右侧设置区调整区块参数，点击「保存」。

有些 App 也提供可以作为独立分区添加的区块，这时使用「添加分区」而不是「添加区块」，在分区列表的「应用」分类下找到。

常见问题排查

• 应用嵌入面板里找不到这个 App：该 App 可能不支持 Theme App Extension，而是用旧式方式集成，请查看 App 的设置页或文档，通常会有「启用」按钮或手动添加代码的说明。
• 开关打开了但前台没变化：确认编辑的是当前主题而不是备份主题；检查 App 自身设置中是否还有总开关或触发条件；清除缓存后用隐身窗口查看。
• 更换或更新主题后 App 消失：应用嵌入与应用区块的启用状态存储在主题的设置里，新主题需要重新打开开关、重新添加区块。发布新主题前务必核对一遍。
• 区块添加后位置不对或样式冲突：先调整区块顺序；若仍有样式问题，通常需要少量 CSS 调整，属于主题定制范围。
• 一个 App 既有嵌入又有区块：这是正常设计，嵌入负责加载脚本或全局功能，区块负责在特定位置渲染，两者通常都需要启用。

对开发者的意义

如果你在为自己的店铺定制 App，建议一开始就按 Theme App Extension 的方式开发：功能对主题零侵入，商家可以在编辑器里自助启用和配置，卸载后不留痕迹，也符合 Shopify App Store 的审核要求。自定义 App 与公开 App 的差别可以参考 Shopify 私有 App 与自定义 App 的区别，主题编辑器的整体操作可以参考 Shopify 主题安装与 Theme Editor 教程。

什么时候需要找服务商

启用应用嵌入和添加应用区块是几分钟就能完成的操作。需要帮助的情况通常是：App 用旧方式集成导致主题代码混乱、多个 App 的区块样式冲突、更换主题后需要批量迁移配置，或者你需要开发一个专属 App 并用 Theme App Extension 的方式嵌入。创意时空是 Shopify Plus Partner，长期从事 Shopify App 开发与主题定制，欢迎 联系我们。