AI导哈

Shopify主题开发工具

提供Shopify Liquid主题开发、Storefront API WebAssembly模块和MCP服务器集成的开发工具套件。

  • by azuree0
  • Liquid
  • 本地部署
  • 更新于
在 GitHub 查看 azuree0/Liquid-MCP-API

使用说明

液体

  1. 安装Shopify命令行界面：
npm install -g @shopify/cli @shopify/theme
  1. 主题目录：
cd Liquid-main
  1. 开发服务器[2]：
shopify theme dev

MCP（模型上下文协议，游标）

  1. 安装MCP服务器依赖关系：
cd mcp-server
npm install
npm run build
  1. 复制.mcp-config.json：
Copy-Item .mcp-config.example.json .mcp-config.json

  1. 在游标中添加MCP服务器：

    1. 创建文件 .cursor/mcp.json 在项目根目录中（创建 .cursor 文件夹（如果需要）。
    2. 添加这样的服务器条目（工作目录=项目根目录）：
      {
  "mcpServers": {
    "storefront-api": {
      "command": "node",
      "args": ["./mcp-server/dist/index.js"],
      "cwd": "."
    }
  }
}

  2. 验证MCP服务器是否已连接：

    • File → 偏好→ 光标设置
    • 引导到 工具和MCP
    • 验证“店面api”服务器显示为已连接/正在运行

店面API WebAssembly模块

安装wasm包

cargo install wasm-pack

2.构建WebAssembly模块

cd storefront-api-wasm
build.bat

这将在中创建WebAssembly文件 Liquid-main/assets/wasm/:

  • storefront_api_wasm.js -JavaScript绑定
  • storefront_api_wasm_bg.wasm -编译的WebAssembly二进制文件
  • 等

3.获取您的店面API代币

  1. 首选 应用 （或 设置 > 应用程序和销售渠道)
  2. 点击 应用商店，安装 无头.
  3. 点击 店面API ，管理
  4. 复制 私有访问令牌.

在 Liquid-main/layout/theme.liquid，在关闭之前 </body> 标签：

    <script src="{{ 'storefront-api.js' | asset_url }}" defer></script>
    <script src="{{ 'storefront-api-integration.js' | asset_url }}" defer></script>
    <script type="module">
      const apiIntegration = new StorefrontApiIntegration();
      const accessToken = 'API_ACCESS_TOKEN'; // paste token
      if (accessToken) {
        await apiIntegration.init(accessToken);
        window.storefrontApi = apiIntegration;
      }
    </script>

  </body>

window.storefrontApi  //Console, check if the API is loaded.

函数

Shopify Liquid主题设置，Storefront API WebAssembly模块，Cursor的MCP（模型上下文协议）服务器。

历史

2006年，Shopify创建了Liquid作为主题的模板语言；随后的几年里，店面API和无头/店面的使用也随之而来。 2025年，Liquid和Storefront API用于定制店面、主题应用程序扩展，以及从JS/WAM对目录和购物车的编程访问，以及Hydrogen和其他堆栈。

结构

Liquid-main/
├── layout/                         # Theme layout templates                          (Frontend) (Liquid)
│   ├── theme.liquid                # Main layout (Storefront API script injection)   (Frontend) (Liquid)
│   ├── password.liquid             # Password page layout                            (Frontend) (Liquid)
│   └── config/                     # Theme settings                                  (Config)
│       ├── settings_data.json
│       └── settings_schema.json

mcp-server/                         # MCP server for Cursor (storefront-api)
├── src/
│   └── index.ts                    # MCP server implementation                       (Backend)  (Source)
├── package.json                    # Node.js dependencies                            (Backend)  (Config)
├── tsconfig.json                   # TypeScript configuration                        (Backend)  (Config)

storefront-api-wasm/
├── src/
│   └── lib.rs                      # Rust Storefront API WASM logic                   (Backend)  (Source)
├── Cargo.toml                      # Rust project and dependency configuration        (Backend)  (Config)
├── build.sh                        # Build script for Linux/macOS                     (Backend)  (Config)
├── build.bat                       # Build script for Windows                         (Backend)  (Config)
└── .cargo/
    └── config.toml                 # Rust compiler configuration                      (Backend)  (Config)

相关 MCP