[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-1f19f505-da13-43d4-af89-611070a1961f":3,"$fTojpC5kTxhdI2omfI2Ve6wIBlJB3qfIDDw7HonEjJFI":42},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":33},"1f19f505-da13-43d4-af89-611070a1961f","shopify-development","使用GraphQL Admin API、Shopify CLI、Polaris UI和Liquid构建Shopify应用、扩展和主题。","cat_coding_backend","mod_coding","sickn33,coding","---\nname: shopify-development\ndescription: Build Shopify apps, extensions, themes using GraphQL Admin API, Shopify CLI, Polaris UI, and Liquid.\nrisk: unknown\nsource: community\ndate_added: '2026-02-27'\n---\n\n# Shopify Development Skill\n\nUse this skill when the user asks about:\n\n- Building Shopify apps or extensions\n- Creating checkout\u002Fadmin\u002FPOS UI customizations\n- Developing themes with Liquid templating\n- Integrating with Shopify GraphQL or REST APIs\n- Implementing webhooks or billing\n- Working with metafields or Shopify Functions\n\n---\n\n## ROUTING: What to Build\n\n**IF user wants to integrate external services OR build merchant tools OR charge for features:**\n→ Build an **App** (see `references\u002Fapp-development.md`)\n\n**IF user wants to customize checkout OR add admin UI OR create POS actions OR implement discount rules:**\n→ Build an **Extension** (see `references\u002Fextensions.md`)\n\n**IF user wants to customize storefront design OR modify product\u002Fcollection pages:**\n→ Build a **Theme** (see `references\u002Fthemes.md`)\n\n**IF user needs both backend logic AND storefront UI:**\n→ Build **App + Theme Extension** combination\n\n---\n\n## Shopify CLI Commands\n\nInstall CLI:\n\n```bash\nnpm install -g @shopify\u002Fcli@latest\n```\n\nCreate and run app:\n\n```bash\nshopify app init          # Create new app\nshopify app dev           # Start dev server with tunnel\nshopify app deploy        # Build and upload to Shopify\n```\n\nGenerate extension:\n\n```bash\nshopify app generate extension --type checkout_ui_extension\nshopify app generate extension --type admin_action\nshopify app generate extension --type admin_block\nshopify app generate extension --type pos_ui_extension\nshopify app generate extension --type function\n```\n\nTheme development:\n\n```bash\nshopify theme init        # Create new theme\nshopify theme dev         # Start local preview at localhost:9292\nshopify theme pull --live # Pull live theme\nshopify theme push --development  # Push to dev theme\n```\n\n---\n\n## Access Scopes\n\nConfigure in `shopify.app.toml`:\n\n```toml\n[access_scopes]\nscopes = \"read_products,write_products,read_orders,write_orders,read_customers\"\n```\n\nCommon scopes:\n\n- `read_products`, `write_products` - Product catalog access\n- `read_orders`, `write_orders` - Order management\n- `read_customers`, `write_customers` - Customer data\n- `read_inventory`, `write_inventory` - Stock levels\n- `read_fulfillments`, `write_fulfillments` - Order fulfillment\n\n---\n\n## GraphQL Patterns (Validated against API 2026-01)\n\n### Query Products\n\n```graphql\nquery GetProducts($first: Int!, $query: String) {\n  products(first: $first, query: $query) {\n    edges {\n      node {\n        id\n        title\n        handle\n        status\n        variants(first: 5) {\n          edges {\n            node {\n              id\n              price\n              inventoryQuantity\n            }\n          }\n        }\n      }\n    }\n    pageInfo {\n      hasNextPage\n      endCursor\n    }\n  }\n}\n```\n\n### Query Orders\n\n```graphql\nquery GetOrders($first: Int!) {\n  orders(first: $first) {\n    edges {\n      node {\n        id\n        name\n        createdAt\n        displayFinancialStatus\n        totalPriceSet {\n          shopMoney {\n            amount\n            currencyCode\n          }\n        }\n      }\n    }\n  }\n}\n```\n\n### Set Metafields\n\n```graphql\nmutation SetMetafields($metafields: [MetafieldsSetInput!]!) {\n  metafieldsSet(metafields: $metafields) {\n    metafields {\n      id\n      namespace\n      key\n      value\n    }\n    userErrors {\n      field\n      message\n    }\n  }\n}\n```\n\nVariables example:\n\n```json\n{\n  \"metafields\": [\n    {\n      \"ownerId\": \"gid:\u002F\u002Fshopify\u002FProduct\u002F123\",\n      \"namespace\": \"custom\",\n      \"key\": \"care_instructions\",\n      \"value\": \"Handle with care\",\n      \"type\": \"single_line_text_field\"\n    }\n  ]\n}\n```\n\n---\n\n## Checkout Extension Example\n\n```tsx\nimport {\n  reactExtension,\n  BlockStack,\n  TextField,\n  Checkbox,\n  useApplyAttributeChange,\n} from \"@shopify\u002Fui-extensions-react\u002Fcheckout\";\n\nexport default reactExtension(\"purchase.checkout.block.render\", () => (\n  \u003CGiftMessage \u002F>\n));\n\nfunction GiftMessage() {\n  const [isGift, setIsGift] = useState(false);\n  const [message, setMessage] = useState(\"\");\n  const applyAttributeChange = useApplyAttributeChange();\n\n  useEffect(() => {\n    if (isGift && message) {\n      applyAttributeChange({\n        type: \"updateAttribute\",\n        key: \"gift_message\",\n        value: message,\n      });\n    }\n  }, [isGift, message]);\n\n  return (\n    \u003CBlockStack spacing=\"loose\">\n      \u003CCheckbox checked={isGift} onChange={setIsGift}>\n        This is a gift\n      \u003C\u002FCheckbox>\n      {isGift && (\n        \u003CTextField\n          label=\"Gift Message\"\n          value={message}\n          onChange={setMessage}\n          multiline={3}\n        \u002F>\n      )}\n    \u003C\u002FBlockStack>\n  );\n}\n```\n\n---\n\n## Liquid Template Example\n\n```liquid\n{% comment %} Product Card Snippet {% endcomment %}\n\u003Cdiv class=\"product-card\">\n  \u003Ca href=\"{{ product.url }}\">\n    {% if product.featured_image %}\n      \u003Cimg\n        src=\"{{ product.featured_image | img_url: 'medium' }}\"\n        alt=\"{{ product.title | escape }}\"\n        loading=\"lazy\"\n      >\n    {% endif %}\n    \u003Ch3>{{ product.title }}\u003C\u002Fh3>\n    \u003Cp class=\"price\">{{ product.price | money }}\u003C\u002Fp>\n    {% if product.compare_at_price > product.price %}\n      \u003Cp class=\"sale-badge\">Sale\u003C\u002Fp>\n    {% endif %}\n  \u003C\u002Fa>\n\u003C\u002Fdiv>\n```\n\n---\n\n## Webhook Configuration\n\nIn `shopify.app.toml`:\n\n```toml\n[webhooks]\napi_version = \"2026-01\"\n\n[[webhooks.subscriptions]]\ntopics = [\"orders\u002Fcreate\", \"orders\u002Fupdated\"]\nuri = \"\u002Fwebhooks\u002Forders\"\n\n[[webhooks.subscriptions]]\ntopics = [\"products\u002Fupdate\"]\nuri = \"\u002Fwebhooks\u002Fproducts\"\n\n# GDPR mandatory webhooks (required for app approval)\n[webhooks.privacy_compliance]\ncustomer_data_request_url = \"\u002Fwebhooks\u002Fgdpr\u002Fdata-request\"\ncustomer_deletion_url = \"\u002Fwebhooks\u002Fgdpr\u002Fcustomer-deletion\"\nshop_deletion_url = \"\u002Fwebhooks\u002Fgdpr\u002Fshop-deletion\"\n```\n\n---\n\n## Best Practices\n\n### API Usage\n\n- Use GraphQL over REST for new development\n- Request only fields you need (reduces query cost)\n- Implement cursor-based pagination with `pageInfo.endCursor`\n- Use bulk operations for processing more than 250 items\n- Handle rate limits with exponential backoff\n\n### Security\n\n- Store API credentials in environment variables\n- Always verify webhook HMAC signatures before processing\n- Validate OAuth state parameter to prevent CSRF\n- Request minimal access scopes\n- Use session tokens for embedded apps\n\n### Performance\n\n- Cache API responses when data doesn't change frequently\n- Use lazy loading in extensions\n- Optimize images in themes using `img_url` filter\n- Monitor GraphQL query costs via response headers\n\n---\n\n## Troubleshooting\n\n**IF you see rate limit errors:**\n→ Implement exponential backoff retry logic\n→ Switch to bulk operations for large datasets\n→ Monitor `X-Shopify-Shop-Api-Call-Limit` header\n\n**IF authentication fails:**\n→ Verify the access token is still valid\n→ Check that all required scopes were granted\n→ Ensure OAuth flow completed successfully\n\n**IF extension is not appearing:**\n→ Verify the extension target is correct\n→ Check that extension is published via `shopify app deploy`\n→ Confirm the app is installed on the test store\n\n**IF webhook is not receiving events:**\n→ Verify the webhook URL is publicly accessible\n→ Check HMAC signature validation logic\n→ Review webhook logs in Partner Dashboard\n\n**IF GraphQL query fails:**\n→ Validate query against schema (use GraphiQL explorer)\n→ Check for deprecated fields in error message\n→ Verify you have required access scopes\n\n---\n\n## Reference Files\n\nFor detailed implementation guides, read these files:\n\n- `references\u002Fapp-development.md` - OAuth authentication flow, GraphQL mutations for products\u002Forders\u002Fbilling, webhook handlers, billing API integration\n- `references\u002Fextensions.md` - Checkout UI components, Admin UI extensions, POS extensions, Shopify Functions for discounts\u002Fpayment\u002Fdelivery\n- `references\u002Fthemes.md` - Liquid syntax reference, theme directory structure, sections and snippets, common patterns\n\n---\n\n## Scripts\n\n- `scripts\u002Fshopify_init.py` - Interactive project scaffolding. Run: `python scripts\u002Fshopify_init.py`\n- `scripts\u002Fshopify_graphql.py` - GraphQL utilities with query templates, pagination, rate limiting. Import: `from shopify_graphql import ShopifyGraphQL`\n\n---\n\n## Official Documentation Links\n\n- Shopify Developer Docs: https:\u002F\u002Fshopify.dev\u002Fdocs\n- GraphQL Admin API Reference: https:\u002F\u002Fshopify.dev\u002Fdocs\u002Fapi\u002Fadmin-graphql\n- Shopify CLI Reference: https:\u002F\u002Fshopify.dev\u002Fdocs\u002Fapi\u002Fshopify-cli\n- Polaris Design System: https:\u002F\u002Fpolaris.shopify.com\n\nAPI Version: 2026-01 (quarterly releases, 12-month deprecation window)\n\n## When to Use\nThis skill is applicable to execute the workflow or actions described in the overview.\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,65,1659,"2026-05-16 13:40:24",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"编程开发","coding","mdi-code-braces","代码生成、调试、审查，提升开发效率",2,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":25,"skillCount":32,"createdAt":26},"后端开发","backend","mdi-server","API、数据库、服务端架构",296,[34],{"id":35,"skillId":4,"version":36,"fileName":37,"fileSize":38,"filePath":39,"fileHash":40,"manifest":41,"createdAt":19},"afee5d49-dfbe-4c9d-810a-38842ed13d7d","1.0.0","shopify-development.zip",26046,"uploads\u002Fskills\u002F1f19f505-da13-43d4-af89-611070a1961f\u002Fshopify-development.zip","b7d309fd49140f54c65d65717a508844dc1cb1a7c6551a76a72cc7a28946211a","[{\"path\":\"README.md\",\"isDirectory\":false,\"size\":1739},{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":9101},{\"path\":\"references\u002Fapp-development.md\",\"isDirectory\":false,\"size\":10566},{\"path\":\"references\u002Fextensions.md\",\"isDirectory\":false,\"size\":10680},{\"path\":\"references\u002Fthemes.md\",\"isDirectory\":false,\"size\":10324},{\"path\":\"scripts\u002F.gitignore\",\"isDirectory\":false,\"size\":375},{\"path\":\"scripts\u002Frequirements.txt\",\"isDirectory\":false,\"size\":452},{\"path\":\"scripts\u002Fshopify_graphql.py\",\"isDirectory\":false,\"size\":12650},{\"path\":\"scripts\u002Fshopify_init.py\",\"isDirectory\":false,\"size\":13187},{\"path\":\"scripts\u002Ftests\u002Ftest_shopify_init.py\",\"isDirectory\":false,\"size\":13245}]",{"code":43,"message":44,"data":45},200,"success",{"items":46,"stats":47,"page":50},[],{"averageRating":48,"totalRatings":48,"ratingCounts":49},0,[48,48,48,48,48],{"limit":51,"offset":48,"hasMore":52,"nextOffset":51,"ratedOnly":16},15,false]