shopify-expert by jeffallan/claude-skills
npx skills add https://github.com/jeffallan/claude-skills --skill shopify-expert资深 Shopify 开发者,精通主题开发、无头电商、应用架构和自定义结账解决方案。
shopify theme init 或 shopify app create 搭建脚手架;配置 shopify.app.toml 和主题架构shopify theme check 进行 Liquid 代码检查;如果发现错误,修复后重新运行再继续。运行 shopify app dev 在本地验证应用;在沙盒环境中测试结账扩展。如果任何步骤验证失败,在进入部署前解决所有报告的问题shopify theme push;应用使用 shopify app deploy;部署后监控 Shopify 错误日志和性能指标广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
根据上下文加载详细指导:
| 主题 | 参考 | 加载时机 |
|---|---|---|
| Liquid 模板 | references/liquid-templating.md | 主题开发、模板定制 |
| Storefront API | references/storefront-api.md | 无头电商、Hydrogen、自定义前端 |
| 应用开发 | references/app-development.md | 构建 Shopify 应用、OAuth、Webhooks |
| 结账扩展 | references/checkout-customization.md | 结账 UI 扩展、Shopify Functions |
| 性能优化 | references/performance-optimization.md | 主题速度、资源优化、缓存 |
{% 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 }}
{% 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 %}
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
}
}
}
# 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
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;
};
shopify theme check实施 Shopify 解决方案时,请提供:
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, metafields, metaobjects, theme architecture, Shopify Plus features
每周安装量
1.3K
代码仓库
GitHub 星标数
7.2K
首次出现
Jan 21, 2026
安全审计
安装于
opencode1.1K
gemini-cli1.1K
codex1.1K
github-copilot1.1K
cursor1.0K
amp974
Senior Shopify developer with expertise in theme development, headless commerce, app architecture, and custom checkout solutions.
shopify theme init or shopify app create; configure shopify.app.toml and theme schemashopify theme check for Liquid linting; if errors are found, fix them and re-run before proceeding. Run shopify app dev to verify app locally; test checkout extensions in sandbox. If validation fails at any step, resolve all reported issues before moving to deploymentshopify theme push for themes; shopify app deploy for apps; watch Shopify error logs and performance metrics post-deployLoad detailed guidance based on context:
| Topic | Reference | Load When |
|---|---|---|
| Liquid Templating | references/liquid-templating.md | Theme development, template customization |
| Storefront API | references/storefront-api.md | Headless commerce, Hydrogen, custom frontends |
| App Development | references/app-development.md | Building Shopify apps, OAuth, webhooks |
| Checkout Extensions | references/checkout-customization.md | Checkout UI extensions, Shopify Functions |
| Performance | references/performance-optimization.md |
{% 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 }}
{% 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 %}
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
}
}
}
# 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
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;
};
shopify theme check before every theme deploymentWhen implementing Shopify solutions, provide:
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, metafields, metaobjects, theme architecture, Shopify Plus features
Weekly Installs
1.3K
Repository
GitHub Stars
7.2K
First Seen
Jan 21, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
opencode1.1K
gemini-cli1.1K
codex1.1K
github-copilot1.1K
cursor1.0K
amp974
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
102,200 周安装
| Theme speed, asset optimization, caching |