介绍一下Shopify App 的 Theme App Extensions

在 Shopify 生态中，App 是商家用来扩展功能的重要工具，比如通知栏、倒计时、推荐商品等等，而如何将 App 的功能在商店前（Theme）中展示出来呢？比如下图中顶部的通知栏是如何展示在商店里面的。

以前，开发者常常需要让商家手动修改 Liquid 代码，将 App 的代码片段嵌入到模板文件里，这不仅容易出错，而且体验很不友好。为了更好地解决这个痛点，Shopify 推出了 Theme App Extensions。

Theme App Extensions

Theme App Extensions 是 Shopify 推出的一种机制，允许 App 以「扩展」的方式直接与商店的主题集成，商家只需在主题编辑器里进行简单配置，就可以将 App 功能块添加到店铺前台页面，无需再修改代码。它是 App 的一部分，但它和 App 主体是独立部署、独立更新的，使用的是 Shopify 提供的扩展框架和文件夹结构。

dart 复制代码

└── extensions
  └── my-theme-app-extension
      ├── assets
      ├── blocks
      ├── snippets
      ├── locales
      ├── package.json
      └── shopify.extension.toml

这些目录结构的作用如下：

**blocks/：**定义在主题编辑器中可以插入的区块，比如公告栏、倒计时条、推荐商品区块等。
**snippets/：**Liquid 文件，用来渲染前端 HTML 内容，通常和 block 配合使用。
**assets/：**存放 CSS、JS 等静态资源文件。
**locales/：**国际化语言文件，用来支持多语言。

Theme App Extensions 的特点

**无需手动修改代码：**商家不需要自己去复制/粘贴 Liquid 片段，减少了错误和麻烦。
**可视化配置：**App 提供的区块（Block）可以在 Shopify Theme Editor（主题编辑器）中像组件一样拖放、配置，体验更好。
**自动更新与安全性：**扩展更新由 Shopify 管理，安全、可靠，并且可以快速同步到商店中。
**更好的与主题兼容性：**通过 Shopify 官方的机制插入内容，不容易和其他自定义 Theme 或其他 App 冲突。

比如我们开发了一个「限时折扣倒计时」App，以前商家需要复制代码到 product.liquid 文件中，现在可以用 Theme App Extension 提供一个「通知栏」扩展，商家只要在 Theme Editor 的App embeds中直接打开这个扩展的开关，就能立即生效，如下图所示，这是Essential Announcer这个App的效果：

Theme App Extensions的开发流程

初始化

shopify app generate extension --type=theme

这条命令会自动帮我们生成一个 extensions/your-extension-name 文件夹。

开发与配置 block 在 blocks/ 文件夹里定义我们要插入的区块，修改 schema JSON 配置文件来控制在主题编辑器里的展示方式和可配置字段。
编写 Liquid 渲染逻辑 在 snippets/ 文件夹里写好渲染内容，比如 HTML 结构、JS 初始化等。
打包并部署

shopify app deploy

发布后，商家就可以在主题编辑器中找到并使用我们的扩展。

App Blocks 和 App Embed Blocks

接下来我们看看与之相关的两个概念，当我们用 Theme App Extensions 开发 Shopify App 时，有两个非常重要的概念，就是 App Blocks 和 **App Embed Blocks，**这两者看起来类似，但其实用途、添加方式和适用场景都不一样。

App Blocks

App Blocks 是指可以被商家在主题编辑器的具体模板（比如首页、产品页、集合页等）里拖入并放置到特定位置的区块，这些区块就像主题自带的 Section 或 Block 一样灵活，商家可以在编辑器中「点击 + 添加」，自由决定出现在哪个模板、哪个区域，以及配置其内容、样式、显示条件等。比如下图中的评分组件

App Embed Blocks

App Embed Blocks 是指可以全局启用或关闭的功能块，主要用于一些需要在所有页面上统一插入的脚本、浮动按钮、全局样式或隐藏逻辑等，Embed Block 通常不会出现在具体的页面模板中，而是在「主题编辑器 → App Embeds」区域里，通过开关控制是否启用。比如下图右下角的悬浮组件

总结一下就是：App Blocks 更适合需要精准控制位置、可视化编辑、可多次使用的场景。App Embed Blocks 则适合需要全站生效、只需一个开关就能控制启用或停用的场景。

Theme扩展就介绍到这里，本文只是做一个简单的介绍，便于大家理解，关于Theme扩展更详细的的信息可以参考官方文档

关于我：

曾在字节跳动等大厂工作超过8年，有资深的移动端、前端开发经验，目前在做Shopify相关业务的创业，关注我，我们一起探索Shopify的精彩世界。

卫星公众/小🍠：浅墨 momo