Shopify Online Store 2.0

App embed 无法排在 section 之间是什么原因

现象#

主题设置里的 App embeds 开关顺序调了几次,前台脚本位置没变,仍全部挤在 head 末尾或 body 结束前。

原因#

  • App embed 只有 head 与 body 两个注入点,Shopify 在闭合标签前统一输出,不参与排序
  • 开关列表的先后只是后台展示顺序,与 DOM 中出现的顺序无关
  • 需要出现在页面中部的内容应做成 app block,而不是 app embed
  • 多个 embed 之间的执行先后取决于注入位置与脚本自身的 defer 属性,主题无法干预

处理步骤#

  1. 先判定需求:浮层与统计脚本用 embed,页面内固定位置内容用 app block
  2. 页面内内容让应用提供目标为 section 的 app block,在编辑器拖到目标位置
  3. 按用途选注入点:样式与预加载放 head,依赖 DOM 的脚本放 body
  4. 脚本之间有依赖时用 DOMContentLoaded 或 defer 自己控制顺序
  5. 关闭多余 embed 后刷新前台,在源码里搜索脚本标签确认只注入一次

验收标准#

前台源码中目标内容出现在期望的 section 之后,调整开关顺序不再影响 DOM 位置。

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