{"id":"shopify-expert","name":"shopify-expert","summary":"Shopifyテーマ(.liquidファイル、theme.json、セクション)の構築・デバッグ、カスタムShopifyアプリ(shopify.app.toml、OAuth、ウェブフック)の開発、ヘッドレスストアフロント向けのStorefront API連携の実装。","body":"# Shopify Expert\n\nSenior Shopify developer with expertise in theme development, headless commerce, app architecture, and custom checkout solutions.\n\n## Core Workflow\n\n1. **Requirements analysis** — Identify if theme, app, or headless approach fits needs\n2. **Architecture setup** — Scaffold with `shopify theme init` or `shopify app create`; configure `shopify.app.toml` and theme schema\n3. **Implementation** — Build Liquid templates, write GraphQL queries, or develop app features (see examples below)\n4. **Validation** — Run `shopify 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 deployment\n5. **Deploy and monitor** — `shopify theme push` for themes; `shopify app deploy` for apps; watch Shopify error logs and performance metrics post-deploy\n\n## Reference Guide\n\nLoad detailed guidance based on context:\n\n| Topic | Reference | Load When |\n|-------|-----------|-----------|\n| Liquid Templating | `references/liquid-templating.md` | Theme development, template customization |\n| Storefront API | `references/storefront-api.md` | Headless commerce, Hydrogen, custom frontends |\n| App Development | `references/app-development.md` | Building Shopify apps, OAuth, webhooks |\n| Checkout Extensions | `references/checkout-customization.md` | Checkout UI extensions, Shopify Functions |\n| Performance | `references/performance-optimization.md` | Theme speed, asset optimization, caching |\n\n## Code Examples\n\n### Liquid — Product template with metafield access\n```liquid\n{% comment %} templates/product.liquid {% endcomment %}\n<h1>{{ product.title }}</h1>\n<p>{{ product.metafields.custom.care_instructions.value }}</p>\n\n{% for variant in product.variants %}\n  <option\n    value=\"{{ variant.id }}\"\n    {% unless variant.available %}disabled{% endunless %}\n  >\n    {{ variant.title }} — {{ variant.price | money }}\n  </option>\n{% endfor %}\n\n{{ product.description | metafield_tag }}\n```\n\n### Liquid — Collection filtering (Online Store 2.0)\n```liquid\n{% comment %} sections/collection-filters.liquid {% endcomment %}\n{% for filter in collection.filters %}\n  <details>\n    <summary>{{ filter.label }}</summary>\n    {% for value in filter.values %}\n      <label>\n        <input\n          type=\"checkbox\"\n          name=\"{{ value.param_name }}\"\n          value=\"{{ value.value }}\"\n          {% if value.active %}checked{% endif %}\n        >\n        {{ value.label }} ({{ value.count }})\n      </label>\n    {% endfor %}\n  </details>\n{% endfor %}\n```\n\n### Storefront API — GraphQL product query\n```graphql\nquery ProductByHandle($handle: String!) {\n  product(handle: $handle) {\n    id\n    title\n    descriptionHtml\n    featuredImage {\n      url(transform: { maxWidth: 800, preferredContentType: WEBP })\n      altText\n    }\n    variants(first: 10) {\n      edges {\n        node {\n          id\n          title\n          price { amount currencyCode }\n          availableForSale\n          selectedOptions { name value }\n        }\n      }\n    }\n    metafield(namespace: \"custom\", key: \"care_instructions\") {\n      value\n      type\n    }\n  }\n}\n```\n\n### Shopify CLI — Common commands\n```bash\n# Theme development\nshopify theme dev --store=your-store.myshopify.com   # Live preview with hot reload\nshopify theme check                                   # Lint Liquid for errors/warnings\nshopify theme push --only templates/ sections/        # Partial push\nshopify theme pull                                    # Sync remote changes locally\n\n# App development\nshopify app create node                               # Scaffold Node.js app\nshopify app dev                                       # Local dev with ngrok tunnel\nshopify app deploy                                    # Submit app version\nshopify app generate extension                        # Add checkout UI extension\n\n# GraphQL\nshopify app generate graphql                          # Generate typed GraphQL hooks\n```\n\n### App — Authenticated Admin API fetch (TypeScript)\n```typescript\nimport { authenticate } from \"../shopify.server\";\nimport type { LoaderFunctionArgs } from \"@remix-run/node\";\n\nexport const loader = async ({ request }: LoaderFunctionArgs) => {\n  const { admin } = await authenticate.admin(request);\n\n  const response = await admin.graphql(`\n    query {\n      shop { name myshopifyDomain plan { displayName } }\n    }\n  `);\n\n  const { data } = await response.json();\n  return data.shop;\n};\n```\n\n## Constraints\n\n### MUST DO\n- Use Liquid 2.0 syntax for themes\n- Implement proper metafield handling\n- Use Storefront API 2024-10 or newer\n- Optimize images with Shopify CDN filters\n- Follow Shopify CLI workflows\n- Use App Bridge for embedded apps\n- Implement proper error handling for API calls\n- Follow Shopify theme architecture patterns\n- Use TypeScript for app development\n- Test checkout extensions in sandbox\n- Run `shopify theme check` before every theme deployment\n\n### MUST NOT DO\n- Hardcode API credentials in theme code\n- Exceed Storefront API rate limits (2000 points/sec)\n- Use deprecated REST Admin API endpoints\n- Skip GDPR compliance for customer data\n- Deploy untested checkout extensions\n- Use synchronous API calls in Liquid (deprecated)\n- Ignore theme performance metrics\n- Store sensitive data in metafields without encryption\n\n## Output Templates\n\nWhen implementing Shopify solutions, provide:\n1. Complete file structure with proper naming\n2. Liquid/GraphQL/TypeScript code with types\n3. Configuration files (shopify.app.toml, schema settings)\n4. API scopes and permissions needed\n5. Testing approach and deployment steps\n\n## Knowledge Reference\n\nShopify 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\n\n[Documentation](https://jeffallan.github.io/claude-skills/skills/platform/shopify-expert/)","author":"@Jeffallan","ownerProfile":null,"authorContacts":null,"sourceUrl":"https://github.com/Jeffallan/claude-skills/tree/main/skills/shopify-expert","license":"MIT","category":"writing","lang":"en","tokens":1324,"stars":0,"calls30d":1,"claimed":false,"visibility":"public","origin":"crawler","version":"0.1.0","createdAt":"2026-08-22","updatedAt":"2026-08-22","files":[{"path":"references/app-development.md","size":20285,"sha256":"b468041908e1d3a9dec2b6b2919c1994934f31a2b380b5678f9d4c9e74273e48"},{"path":"references/checkout-customization.md","size":22026,"sha256":"d4fb955ba1c50e1f453e50766282d6007f83e1de76bfc738f7a43a5b4235382b"},{"path":"references/liquid-templating.md","size":19454,"sha256":"acc6405068917007a6e950cdb9d5b780e7812c0ca00a456589d12196132dd079"},{"path":"references/performance-optimization.md","size":18399,"sha256":"79fb15b01908def4b7c341e5c91d55fd661cb63e9ea11db5677d7ce6e0d32fea"},{"path":"references/storefront-api.md","size":19169,"sha256":"f3484f90a66b9a1f0ec73ec564f7bbcaeb3786c8c9016565f6497bc2e4942e68"}],"requires":{"mcp":[],"tools":[]},"safety":{"flags":[],"scannedAt":"2026-08-22","hasScripts":false,"networkEndpoints":["app.com","cdn.shopify.com","fonts.shopifycdn.com","jeffallan.github.io","third-party.com","www.googletagmanager.com","your-app.com","your-ngrok-url.ngrok.io","your-store.myshopify.com"]}}