mcpField
S
shopify-developer

shopify-developer

github.com/tech-leads-club开发7.1k218 次安装3 天前更新
代码仓库

关于 shopify-developer

面向开发主题、应用、API 或无头店面的 Shopify 开发者参考技能。内容按任务分类,涵盖 API 版本 2026-01,以及实现和故障排查主题。

主要功能

  1. 01Liquid 语法、过滤器与对象
  2. 02主题架构指南
  3. 03Admin 与 Storefront API 参考
  4. 04应用与 Shopify Functions 指南
  5. 05Hydrogen 与性能参考
  6. 06故障排查和迁移说明

适用场景

  1. 01构建或调试 Liquid 主题
  2. 02开发 Shopify 应用和扩展
  3. 03集成 Admin 或 Storefront API
  4. 04排查店面性能及 API 问题

安装

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

$npx skills add https://github.com/tech-leads-club/agent-skills --skill shopify-developer

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

包含的文件

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

references/
api-admin.md
api-storefront.md
app-development.md
debugging.md
functions.md
hydrogen.md
liquid-filters.md
liquid-objects.md
liquid-syntax.md
performance.md
theme-development.md

详细介绍

Shopify 开发者参考

面向专业 Shopify 开发的综合参考资料——API 版本 2026-01。

快速参考

项目值
API 版本2026-01(稳定版)
GraphQL AdminPOST https://{store}.myshopify.com/admin/api/2026-01/graphql.json
Storefront APIPOST https://{store}.myshopify.com/api/2026-01/graphql.json
Ajax API(主题)/cart.js、/cart/add.js、/cart/change.js
CLI 安装npm install -g @shopify/cli
主题开发shopify theme dev --store {store}.myshopify.com
应用开发shopify app dev
部署shopify app deploy
文档shopify.dev

选择你的路径

阅读与任务相匹配的参考文件:

Liquid 模板——编写或调试 .liquid 文件:

主题开发——构建或自定义主题:

API 集成——以编程方式获取或修改数据:

应用开发——构建 Shopify 应用:

无服务器逻辑——自定义业务规则:

无头商务——自定义店面:

优化与故障排查:

弃用通知

已弃用替代方案截止时间
Shopify ScriptsShopify Functions2025 年 8 月(迁移),停止日期待定
checkout.liquidCheckout Extensibility2024 年 8 月(Plus),已完成
REST Admin APIGraphQL Admin API正在弃用(尚未确定移除日期)
旧版自定义应用新身份验证模型2025 年 1 月(已完成)
Polaris ReactPolaris Web Components正在迁移
Remix(应用框架)React Router 7Hydrogen 2025.5.0+

Liquid 基础

三种语法类型:

{{ product.title | upcase }}                    {# Output with filter #}
{% if product.available %}In stock{% endif %}   {# Logic tag #}
{% assign sale = product.price | times: 0.8 %}  {# Assignment #}
{%- if condition -%}Stripped whitespace{%- endif -%}

关键模式:

{% for product in collection.products limit: 5 %}
  {% render 'product-card', product: product %}
{% endfor %}

{% paginate collection.products by 12 %}
  {% for product in paginate.collection.products %}...{% endfor %}
  {{ paginate | default_pagination }}
{% endpaginate %}

API 基础

// GraphQL Admin - always use GraphQL over REST
const response = await fetch(`https://${store}.myshopify.com/admin/api/2026-01/graphql.json`, {
  method: 'POST',
  headers: {
    'X-Shopify-Access-Token': accessToken,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ query, variables }),
})
const { data, errors } = await response.json()
if (errors) throw new Error(errors[0].message)

// Ajax API (theme-only cart operations)
fetch('/cart/add.js', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ id: variantId, quantity: 1 }),
})

参考文件

文件行数覆盖范围
liquid-syntax.md~600标签、控制流、迭代、变量、空白处理、LiquidDoc
liquid-filters.md~870字符串、数值、数组、Shopify 专用、日期、URL、颜色筛选器
liquid-objects.md~695所有 Shopify 对象:产品、变体、集合、购物车、客户、订单等
theme-development.md~1200文件结构、JSON 模板、分区、区块、设置架构、布局
api-admin.md~595GraphQL 查询/变更、REST(旧版)、OAuth、Webhook、速率限制
api-storefront.md~235Storefront API、Ajax API、购物车操作、Customer Account API
app-development.md~760CLI、应用架构、扩展、Polaris Web Components、部署
functions.md~300Function 类型、Rust/JS 目标、CLI 工作流、Scripts 迁移
hydrogen.md~375设置、路由、数据加载、Storefront API、部署
performance.md~605图片、JS、CSS、字体、Liquid、第三方脚本、Core Web Vitals
debugging.md~650Liquid、JavaScript、API、购物车、Webhook、主题编辑器故障排查

评论

支持 Markdown