快速接入

先看主来源和安装命令，再打开仓库或文档；下面只保留这个条目的关键接入事实。

详细介绍

Shopify结账品牌MCP工具

一个模型上下文协议（MCP）服务器，用于通过人工智能工具进行全面的Shopify结账品牌管理。这款生产就绪的服务器使Claude和Cursor等AI助手能够以编程方式定制Shopify Plus结账的各个方面，从颜色和排版到部分、表单控件和完整的设计系统。

🚀 生产准备就绪：完全的API兼容性、智能值映射、增强的工具描述和安全性第一的默认值，用于精确的AI驱动的签出自定义。

✅ 光标MCP支持已修复！

MCP服务器现在与Cursor一起正常工作。JSON通信问题已解决。看 CURSOR-MCP-SETUP.md 了解详情。

🎯 快速开始

适用于Claude桌面用户

安装并配置：

# Clone and setup
git clone https://github.com/shandut/Shopify-Checkout-Branding-MCP-Tool.git
cd shopify-checkout-mcp-tool
npm install
npm run build

# Create .env file with your credentials
cp env.template .env
# Edit .env with your Shopify store details

配置Claude桌面 （见下面的配置部分）

使用克劳德的自然语言：

“显示所有结账配置文件”
“将徽标居中，使其宽度为150px”
“将原色更改为#5A31F4”

对于Cursor/HTTP API用户

启动HTTP服务器：

npm run start:http

测试API：

node test-http.js

🚀 特性

核心工具

列出结账档案：检索所有状态为“测试/已发布”的结账配置文件
阅读当前品牌：获得完整的品牌配置和设计系统
更新品牌：具有智能默认值的全面定制

- 🔒 安全特性：默认情况下自动以测试/草稿配置文件为目标 - 使用 useProductionProfile: true 明确更新实时结账

上传徽标：将图片从URL直接流式传输到Shopify CDN
上传自定义字体：上传WOFF/WOFF2/TTF/OTF字体以实现独特的排版

造型能力

颜色：背景、文本、主要（按钮）、带十六进制验证的表面颜色
排版：字体系列（Shopify或自定义）、权重（100-900）、基本大小（12-16）、比率（1.0-1.5）

- 主（正文）和次（标题）表面的自定义字体支持 - 可配置的字体加载策略（BLOCK、SWAP、FALLBACK、OPTIONAL）

圆角半径：所有元素均为“无”、“小”、“基本”、“大”
阴影：5个级别（SMALL_100、SMALL_200、BASE、LARGE_100、LARGE_200）
填充：14个变体（无到LARGE_500）
章节：独立的主区域和订单摘要样式，带分隔符
表单控件：边框、标签（内侧/外侧）、角半径
配色方案：针对不同路段的4种方案
头球：徽标可见性、横幅图像、购物车链接、对齐、分隔符
背景图像：支持标题横幅、主区域、订单摘要
集装箱分隔器：可配置样式（BASE/DASHED/DOTTED）、宽度、可见性
购物车链接：支持图像的自定义内容类型（图标/图像/文本）

API智能

多版本支持：与API 2024-10版至2026-01版兼容
价值映射：API兼容性的自动转换
增强的描述：详细的工具文档，以更好地理解人工智能
错误恢复：智能处理验证错误

📋 先决条件

Node.js 18+支持TypeScript
具有管理员API访问权限的Shopify商店
Shopify Admin API令牌，具有适当的范围：

- read_checkout_branding_settings - write_checkout_branding_settings - write_files （用于徽标上传）

🛠️ 安装

⚠️ 安全说明

永远不要将您的实际API证书提交给版本控制！

复制 env.template 到 .env 获取您的凭据
.env 已在 .gitignore 防止意外犯罪
所有示例配置都使用占位符值

设置步骤

克隆存储库：

git clone https://github.com/shandut/Shopify-Checkout-Branding-MCP-Tool.git
cd shopify-checkout-mcp-tool

安装依赖项：

npm install

构建项目：

npm run build

配置环境变量：

cp env.template .env

编辑 .env 使用您的Shopify凭据：

SHOPIFY_STORE_DOMAIN=your-store.myshopify.com
SHOPIFY_ADMIN_TOKEN=shpat_your_admin_api_token_here
SHOPIFY_API_VERSION=2026-01
PORT=8787  # Only if using HTTP wrapper

🔧 配置

适用于克劳德桌面

添加到您的Claude Desktop配置文件中：

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json 视窗: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "shopify-checkout": {
      "command": "node",
      "args": ["/path/to/shopify-checkout-mcp-tool/dist/index.js"],
      "env": {
        "SHOPIFY_STORE_DOMAIN": "your-store.myshopify.com",
        "SHOPIFY_ADMIN_TOKEN": "shpat_your_admin_api_token_here",
        "SHOPIFY_API_VERSION": "2026-01"
      }
    }
  }
}

用于游标或其他工具（HTTP模式）

启用HTTP包装器运行：

npm run start:http

服务器将在以下时间可用 http://localhost:8787

📚 可用的MCP工具

1. `shopify_list_checkout_profiles`

列出您商店中的所有结账配置文件。

输入：无需输出：包含id、名称和状态的配置文件数组

2. `shopify_get_checkout_branding`

检索特定配置文件的当前品牌设置。

输入:

profileId （string）：结账配置文件的Shopify GID

输出：当前徽标配置和配色方案

3. `shopify_update_checkout_branding`

更新结账配置文件的品牌设置。 🔒 默认为安全测试配置文件.

输入:

profileId （字符串，可选）：Shopify GID-如果未提供，则自动选择TEST配置文件
useProductionProfile （布尔值，可选）：设置为 true 更新实时结账（默认： false)
logoWidth （数字，可选）：宽度（像素）（1-1000）
logoPosition （枚举，可选）：“左”、“中”或“右”
colors （对象，可选）：

- background：十六进制颜色（例如“#FFFFFF”） - surface：十六进制颜色 - text：十六进制颜色 - primary：按钮的十六进制颜色 - primaryText：按钮文本的十六进制颜色

control （对象，可选）：窗体控件样式

- color：“透明” - border：“无”或“满” - cornerRadius：角样式 - labelPosition：“内部”或“外部”

imageId （字符串，可选）：上传徽标的ID

4. `shopify_upload_logo_from_url`

将图像从URL上传到Shopify文件。

输入:

url （字符串，必填）：图像的公共HTTPS URL
filename （字符串，可选）：所需的文件名
mimeType （字符串，可选）：图像MIME类型

输出：用于品牌更新的图像ID和CDN URL

5. `shopify_upload_custom_font_from_url`

将自定义字体文件从URL上传到Shopify Files，用于结账排版。

输入:

url （字符串，必填）：字体文件的公共HTTPS URL（WOFF、WOFF2、TTF或OTF）
filename （字符串，可选）：字体的所需文件名
mimeType （字符串，可选）：字体MIME类型（如果未提供，则自动检测）
fontWeight （数字，可选）：字体粗细（100-900，默认400表示常规，700表示粗体）
isBold （布尔值，可选）：标记为粗体变体（将权重设置为700）

输出:

genericFileId：用于签出品牌配置的文件ID
url：上传字体的CDN URL
weight：字体权重值
filename：上传字体的文件名

💡 使用示例

通过MCP（克劳德桌面）

配置完Claude Desktop后，您可以使用自然语言：

“你能把我的结账标志宽度减半并居中吗？”

克劳德将：

呼叫 shopify_get_checkout_branding 获取当前宽度
计算新宽度（当前宽度的50%）
呼叫 shopify_update_checkout_branding 使用新设置
用另一个验证更改 shopify_get_checkout_branding 呼叫

通过HTTP API（用于Cursor）

# List all checkout profiles
curl http://localhost:8787/profiles

# Get current branding
curl http://localhost:8787/profiles/gid://shopify/CheckoutProfile/123/branding

# Update branding (safer - auto-targets TEST profile)
curl -X POST http://localhost:8787/branding \
  -H "Content-Type: application/json" \
  -d '{
    "logoWidth": 150,
    "logoPosition": "CENTER",
    "colors": {
      "primary": "#5A31F4",
      "background": "#FFFFFF"
    }
  }'

# Update production checkout (explicit)
curl -X POST http://localhost:8787/branding \
  -H "Content-Type: application/json" \
  -d '{
    "useProductionProfile": true,
    "logoWidth": 150,
    "colors": {
      "primary": "#5A31F4"
    }
  }'

# Upload new logo
curl -X POST http://localhost:8787/files \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com/new-logo.png",
    "filename": "checkout-logo.png"
  }'

# Upload custom fonts
curl -X POST http://localhost:8787/fonts \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com/myfont-regular.woff2",
    "fontWeight": 400
  }'

# Apply custom font to checkout
curl -X POST http://localhost:8787/branding \
  -H "Content-Type: application/json" \
  -d '{
    "designSystem": {
      "typography": {
        "primary": {
          "customFontGroup": {
            "base": {
              "genericFileId": "gid://shopify/GenericFile/123456",
              "weight": 400
            },
            "bold": {
              "genericFileId": "gid://shopify/GenericFile/789012",
              "weight": 700
            },
            "loadingStrategy": "SWAP"
          }
        }
      }
    }
  }'

🏗️ 建筑

src/
├── index.ts           # Application entry point
├── mcpServer.ts       # MCP server implementation
├── httpServer.ts      # Optional Fastify HTTP wrapper
├── shopify.ts         # GraphQL client for Shopify API
├── branding.ts        # Business logic for branding operations
├── schemas.ts         # Zod schemas for validation
└── logging.ts         # Pino logger with security redaction

🔐 安全

令牌保护：API令牌从不记录或在响应中公开
输入验证：使用Zod模式验证所有输入
速率限制：Shopify API限制指数退避的自动重试
仅限HTTPS：仅接受HTTPS URL进行图像上传
范围权限：仅限于结账品牌和文件操作

🧪 测试

运行测试：

npm test

针对开发商店进行测试：

npm run test:integration

📝 发展

使用热重载启动开发服务器：

npm run dev

生产建设：

npm run build

启动生产服务器：

npm start

🚦 错误处理

服务器处理各种错误情况：

400：无效输入或验证错误
403：缺少所需的Shopify API作用域
429：速率受限（带回退的自动重试）
500：意外的服务器错误

🤝 贡献

分叉存储库
创建要素分支(git checkout -b feature/amazing-feature)
提交您的更改(git commit -m 'Add amazing feature')
推到分支(git push origin feature/amazing-feature)
打开拉取请求

📄 许可证

此项目根据MIT许可证获得许可-有关详细信息，请参阅许可证文件。

⚠️ 已知限制和重要注意事项

排版字段限制

这 customizations.global.typography 字段有严格的限制：

✅ 允许: kerning （基础、松散、外向）， letterCase （无、下、标题、上）
❌ 不允许: font, size, weight （使用 designSystem.typography 对于这些）

API的其他限制

全局角半径：仅接受 NONE 价值
控制颜色：仅接受 TRANSPARENT 价值
徽标格式：SVG文件不能用于结账徽标
枚举值：API版本之间的某些枚举值不同（例如，UPPERP与UPPERCASE）

🆘 支持

对于问题、疑问或建议：

在GitHub上打开一个问题
检查现有问题的解决方案
查看Shopify Admin API文档

🗺️ 路线图

\[\]支持多个商店配置
\[\]批量配置文件更新
\[\]应用更改前预览生成
\[\]备份和恢复功能
\[\]WebSocket支持实时更新
\[\]与Shopify webhooks集成
\[\]支持基于主题的品牌推广
\[\]A/B测试能力

目录标签

TypeScriptClaude设计Shopify品牌管理本地部署AI驱动定制结账页面设计电子商务工具ShopifyPlus

支持客户端

Claude DesktopClaudeCursor

接入字段

传输方式（transport，传输协议）

未说明

鉴权方式（authType，认证方式）

none

工具数量（toolCount，工具数）

5

资源数量（resourceCount，资源数）

0

提示词数量（promptCount，提示词数）

0

权限和风险

未说明none部署方式未说明

接入前请确认传输方式、认证方式和部署位置，并根据实际工具能力限制访问范围。

安装前确认

不要直接授予不必要的文件、网络或账号权限；先核对安装命令和配置内容。

仍需确认：installCommand

来源信息

MCP World

mcpworld.com

/detail/6ac39093a8c26d7f2651112fa5355f1e

一个用于通过AI工具全面管理Shopify结账品牌化的生产就绪服务器，支持颜色、排版、表单控件等各方面的定制。

继续浏览同类 MCP

更多设计创作 MCP（1,700）返回 MCP 目录

上一个 MCP

Sharp MCP (Great Sumini)

Sharp MCP是一个基于Model Context Protocol的图像会话管理和处理工具，提供图像存储、元数据提取、颜色提取、背景去除、区域裁剪和图像压缩等功能。

下一个 MCP

Shopify MCP 86c20b35

MCP server for Shopify Admin API with a ComfyUI bridge for AI product image generation. Covers products, orders, inventory, and customers.

Shopify Checkout Branding MCP Tool