如何为自定义Shopify应用创建App Embed Blocks？

1. 初始化主题应用扩展 #

• 打开终端，进入你的自定义应用项目根目录
• 执行命令：shopify extension generate，选择theme类型的扩展，按提示完成命名等基础配置

2. 配置Manifest文件 #

• 进入生成的主题扩展目录，找到extension.config.yml文件
• 写入App Embed Block的配置（可根据需求调整）：

type: theme
name: 自定义嵌入组件
extension_points:
  - extension_point: app_blocks
    target: "product" # 指定嵌入的页面类型，如product/collection/home等，留空则支持全页面
    config:
      name: "我的自定义嵌入块"
      description: "用于展示自定义应用功能的嵌入组件"
      template: "embed.liquid" # 关联的Liquid模板文件名
      settings: # 可选：添加后台可配置的参数
        - type: text
          id: display_text
          label: "展示文本"
          default: "来自自定义应用的内容"

3. 编写嵌入模板 #

• 在主题扩展的templates目录下创建embed.liquid文件
• 编写嵌入逻辑，示例：

<div class="custom-app-embed-block">
  <h3>{{ settings.display_text }}</h3>
  <!-- 这里可添加自定义应用的业务逻辑，比如调用API、加载前端脚本 -->
  <script src="{{ 'app-script.js' | asset_url }}"></script>
  <link rel="stylesheet" href="{{ 'app-style.css' | asset_url }}">
</div>

4. 添加静态资源（可选） #

• 若需要JS/CSS等资源，将文件放入主题扩展的assets文件夹
• 在Liquid模板中通过asset_url过滤器引用，如上述示例所示

5. 部署并启用 #

• 执行命令：shopify extension push，将扩展部署到目标Shopify店铺
• 登录Shopify后台，进入「在线商店」>「主题」> 对应主题的「自定义」页面
• 在左侧组件库中找到你的App Embed Block，拖拽到页面指定位置，配置参数后保存发布

内容的提问来源于stack exchange，提问作者Alexandru R