Shopify开发Skill shopify-developer

这个技能涵盖了Shopify电商平台的全面开发参考,包括Liquid模板语言、主题开发(OS 2.0)、GraphQL Admin API、Storefront API、自定义应用开发、Shopify Functions、Hydrogen框架、性能优化和调试。适用于处理.liquid文件、创建主题部分和块、编写GraphQL查询或突变、使用CLI和Polaris构建Shopify应用、通过Ajax API实现购物车操作、优化Shopify商店的核心Web指标、调试Liquid或API错误、配置settings_schema.json、访问Shopify对象(产品、集合、购物车、客户)、使用Liquid过滤器、创建应用扩展、处理webhooks、从Scripts迁移到Functions,或使用Hydrogen和React Router 7构建无头商店前端。关键词:Shopify开发、电商平台、Liquid模板、GraphQL API、主题定制、应用开发、性能优化。

其他 0 次安装 0 次浏览 更新于 3/15/2026

名称: shopify-developer 描述: Shopify开发的完整参考,包括Liquid模板语言、主题开发(OS 2.0)、GraphQL Admin API、Storefront API、自定义应用开发、Shopify Functions、Hydrogen、性能优化和调试。适用于处理.liquid文件、创建主题部分和块、编写GraphQL查询或突变用于Shopify、使用CLI和Polaris构建Shopify应用、通过Ajax API实现购物车操作、优化Shopify商店的核心Web指标、调试Liquid或API错误、配置settings_schema.json、访问Shopify对象(产品、集合、购物车、客户)、使用Liquid过滤器、创建应用扩展、处理webhooks、从Scripts迁移到Functions,或使用Hydrogen和React Router 7构建无头商店前端。覆盖API版本2026-01。

Shopify开发者参考

专业的Shopify开发全面参考 - API版本 2026-01

快速参考

项目
API版本 2026-01(稳定)
GraphQL管理API POST https://{store}.myshopify.com/admin/api/2026-01/graphql.json
Storefront API POST 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 Scripts Shopify Functions 2025年8月(迁移),停止时间待定
checkout.liquid Checkout Extensibility 2024年8月(Plus),已完成
REST管理API GraphQL管理API 主动弃用(暂无移除日期)
遗留自定义应用 新认证模型 2025年1月(已完成)
Polaris React Polaris Web组件 主动迁移
Remix(应用框架) React Router 7 Hydrogen 2025.5.0+

Liquid基础

三种语法类型:

{{ product.title | upcase }}                    {# 输出带过滤器 #}
{% if product.available %}有库存{% endif %}   {# 逻辑标签 #}
{% assign sale = product.price | times: 0.8 %}  {# 赋值 #}
{%- if condition -%}去除空格{%- 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管理 - 始终使用GraphQL而非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(仅主题购物车操作)
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 ~595 GraphQL查询/突变、REST(遗留)、OAuth、webhooks、速率限制
api-storefront.md ~235 Storefront API、Ajax API、购物车操作、客户账户API
app-development.md ~760 CLI、应用架构、扩展、Polaris Web组件、部署
functions.md ~300 函数类型、Rust/JS目标、CLI工作流、Scripts迁移
hydrogen.md ~375 设置、路由、数据加载、Storefront API、部署
performance.md ~605 图像、JS、CSS、字体、Liquid、第三方脚本、核心Web指标
debugging.md ~650 Liquid、JavaScript、API、购物车、webhook、主题编辑器故障排除