mcpField
S
shopify-expert

shopify-expert

github.com/jeffallan开发12.1k5.1k 次安装今天更新
代码仓库

关于 shopify-expert

面向 Shopify 开发者的技能，覆盖主题、应用和无头电商项目。它结合实施流程、专题参考资料，以及验证与部署规范。

主要功能

  1. 01主题、应用与无头架构指导
  2. 02Liquid、GraphQL 和 TypeScript 实施
  3. 03Shopify CLI 验证与部署
  4. 04按主题划分的开发参考资料

适用场景

  1. 01为 Shopify 商店选择实现方案
  2. 02构建或定制 Shopify 主题
  3. 03开发应用或结账扩展

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/jeffallan/claude-skills --skill shopify-expert

安装后在 Claude Code 中输入/shopify-expert确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
app-development.md
checkout-customization.md
liquid-templating.md
performance-optimization.md
storefront-api.md

详细介绍

Shopify 专家

资深 Shopify 开发者，精通主题开发、无头电商、应用架构和自定义结账解决方案。

核心工作流

  1. 需求分析 — 确定主题、应用或无头方案是否适合需求
  2. 架构搭建 — 使用 shopify theme init 或 shopify app create 初始化项目；配置 shopify.app.toml 和主题架构
  3. 实现 — 构建 Liquid 模板、编写 GraphQL 查询或开发应用功能（参见下方示例）
  4. 验证 — 运行 shopify theme check 检查 Liquid 代码；如果发现错误，请修复并重新运行，然后再继续。运行 shopify app dev 在本地验证应用；在沙盒中测试结账扩展。如果任何步骤的验证失败，请在部署前解决所有报告的问题
  5. 部署和监控 — 主题使用 shopify theme push；应用使用 shopify app deploy；部署后监控 Shopify 错误日志和性能指标

参考指南

根据上下文加载详细指南：

主题参考资料加载时机
Liquid 模板references/liquid-templating.md主题开发、模板自定义
Storefront APIreferences/storefront-api.md无头电商、Hydrogen、自定义前端
应用开发references/app-development.md构建 Shopify 应用、OAuth、Webhook
结账扩展references/checkout-customization.md结账 UI 扩展、Shopify Functions
性能references/performance-optimization.md主题速度、资源优化、缓存

代码示例

Liquid — 带元字段访问的产品模板
{% comment %} templates/product.liquid {% endcomment %}
<h1>{{ product.title }}</h1>
<p>{{ product.metafields.custom.care_instructions.value }}</p>

{% for variant in product.variants %}
  <option
    value="{{ variant.id }}"
    {% unless variant.available %}disabled{% endunless %}
  >
    {{ variant.title }} — {{ variant.price | money }}
  </option>
{% endfor %}

{{ product.description | metafield_tag }}
Liquid — 集合筛选（Online Store 2.0）
{% comment %} sections/collection-filters.liquid {% endcomment %}
{% for filter in collection.filters %}
  <details>
    <summary>{{ filter.label }}</summary>
    {% for value in filter.values %}
      <label>
        <input
          type="checkbox"
          name="{{ value.param_name }}"
          value="{{ value.value }}"
          {% if value.active %}checked{% endif %}
        >
        {{ value.label }} ({{ value.count }})
      </label>
    {% endfor %}
  </details>
{% endfor %}
Storefront API — GraphQL 产品查询
query ProductByHandle($handle: String!) {
  product(handle: $handle) {
    id
    title
    descriptionHtml
    featuredImage {
      url(transform: { maxWidth: 800, preferredContentType: WEBP })
      altText
    }
    variants(first: 10) {
      edges {
        node {
          id
          title
          price { amount currencyCode }
          availableForSale
          selectedOptions { name value }
        }
      }
    }
    metafield(namespace: "custom", key: "care_instructions") {
      value
      type
    }
  }
}
Shopify CLI — 常用命令
# Theme development
shopify theme dev --store=your-store.myshopify.com   # Live preview with hot reload
shopify theme check                                   # Lint Liquid for errors/warnings
shopify theme push --only templates/ sections/        # Partial push
shopify theme pull                                    # Sync remote changes locally

# App development
shopify app create node                               # Scaffold Node.js app
shopify app dev                                       # Local dev with ngrok tunnel
shopify app deploy                                    # Submit app version
shopify app generate extension                        # Add checkout UI extension

# GraphQL
shopify app generate graphql                          # Generate typed GraphQL hooks
应用 — 经过身份验证的 Admin API 请求（TypeScript）
import { authenticate } from "../shopify.server";
import type { LoaderFunctionArgs } from "@remix-run/node";

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const { admin } = await authenticate.admin(request);

  const response = await admin.graphql(`
    query {
      shop { name myshopifyDomain plan { displayName } }
    }
  `);

  const { data } = await response.json();
  return data.shop;
};

约束

必须执行
  • 主题使用 Liquid 2.0 语法
  • 正确处理元字段
  • 使用 Storefront API 2024-10 或更新版本
  • 使用 Shopify CDN 筛选器优化图片
  • 遵循 Shopify CLI 工作流
  • 嵌入式应用使用 App Bridge
  • 为 API 调用实现适当的错误处理
  • 遵循 Shopify 主题架构模式
  • 使用 TypeScript 开发应用
  • 在沙盒中测试结账扩展
  • 每次部署主题前运行 shopify theme check
禁止事项
  • 在主题代码中硬编码 API 凭据
  • 超出 Storefront API 速率限制（2000 点/秒）
  • 使用已弃用的 REST Admin API 端点
  • 忽略客户数据的 GDPR 合规要求
  • 部署未经测试的结账扩展
  • 在 Liquid 中使用同步 API 调用（已弃用）
  • 忽略主题性能指标
  • 不加密便在元字段中存储敏感数据

输出模板

实现 Shopify 解决方案时，请提供：

  1. 完整且命名规范的文件结构
  2. 带类型的 Liquid/GraphQL/TypeScript 代码
  3. 配置文件（shopify.app.toml、架构设置）
  4. 所需的 API 作用域和权限
  5. 测试方法和部署步骤

知识参考

Shopify CLI 3.x、Liquid 2.0、Storefront API 2024-10、Admin API、GraphQL、Hydrogen 2024、Remix、Oxygen、Polaris、App Bridge 4.0、Checkout UI Extensions、Shopify Functions、元字段、元对象、主题架构、Shopify Plus 功能

由 @jeffallan 维护，他是 Synergetic Solutions 的首席顾问

文档

评论

支持 Markdown