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 文件夹（如果需要）。 1. 添加这样的服务器条目（工作目录=项目根目录）：

      {
        "mcpServers": {
          "storefront-api": {
            "command": "node",
            "args": ["./mcp-server/dist/index.js"],
            "cwd": "."
          }
        }
      }

1. 验证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，在关闭之前 `` 标签：

    
    
    
      const apiIntegration = new StorefrontApiIntegration();
      const accessToken = 'API_ACCESS_TOKEN'; // paste token
      if (accessToken) {
        await apiIntegration.init(accessToken);
        window.storefrontApi = apiIntegration;
      }
    

  

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)