{"id":"a94ae16f-5ce9-4ef1-b553-c3e4164c952f","shortId":"jTQz8v","kind":"skill","title":"shopify-development","tagline":"Build Shopify apps, extensions, themes using GraphQL Admin API, Shopify CLI, Polaris UI, and Liquid.","description":"# Shopify Development Skill\n\nUse this skill when the user asks about:\n\n- Building Shopify apps or extensions\n- Creating checkout/admin/POS 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/app-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/extensions.md`)\n\n**IF user wants to customize storefront design OR modify product/collection pages:**\n→ Build a **Theme** (see `references/themes.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/cli@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://shopify/Product/123\",\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/ui-extensions-react/checkout\";\n\nexport default reactExtension(\"purchase.checkout.block.render\", () => (\n  <GiftMessage />\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    <BlockStack spacing=\"loose\">\n      <Checkbox checked={isGift} onChange={setIsGift}>\n        This is a gift\n      </Checkbox>\n      {isGift && (\n        <TextField\n          label=\"Gift Message\"\n          value={message}\n          onChange={setMessage}\n          multiline={3}\n        />\n      )}\n    </BlockStack>\n  );\n}\n```\n\n---\n\n## Liquid Template Example\n\n```liquid\n{% comment %} Product Card Snippet {% endcomment %}\n<div class=\"product-card\">\n  <a href=\"{{ product.url }}\">\n    {% if product.featured_image %}\n      <img\n        src=\"{{ product.featured_image | img_url: 'medium' }}\"\n        alt=\"{{ product.title | escape }}\"\n        loading=\"lazy\"\n      >\n    {% endif %}\n    <h3>{{ product.title }}</h3>\n    <p class=\"price\">{{ product.price | money }}</p>\n    {% if product.compare_at_price > product.price %}\n      <p class=\"sale-badge\">Sale</p>\n    {% endif %}\n  </a>\n</div>\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/create\", \"orders/updated\"]\nuri = \"/webhooks/orders\"\n\n[[webhooks.subscriptions]]\ntopics = [\"products/update\"]\nuri = \"/webhooks/products\"\n\n# GDPR mandatory webhooks (required for app approval)\n[webhooks.privacy_compliance]\ncustomer_data_request_url = \"/webhooks/gdpr/data-request\"\ncustomer_deletion_url = \"/webhooks/gdpr/customer-deletion\"\nshop_deletion_url = \"/webhooks/gdpr/shop-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/app-development.md` - OAuth authentication flow, GraphQL mutations for products/orders/billing, webhook handlers, billing API integration\n- `references/extensions.md` - Checkout UI components, Admin UI extensions, POS extensions, Shopify Functions for discounts/payment/delivery\n- `references/themes.md` - Liquid syntax reference, theme directory structure, sections and snippets, common patterns\n\n---\n\n## Scripts\n\n- `scripts/shopify_init.py` - Interactive project scaffolding. Run: `python scripts/shopify_init.py`\n- `scripts/shopify_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://shopify.dev/docs\n- GraphQL Admin API Reference: https://shopify.dev/docs/api/admin-graphql\n- Shopify CLI Reference: https://shopify.dev/docs/api/shopify-cli\n- Polaris Design System: https://polaris.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.","tags":["shopify","development","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows"],"capabilities":["skill","source-sickn33","skill-shopify-development","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/shopify-development","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 37911 github stars · SKILL.md body (8,856 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T18:51:45.997Z","embedding":null,"createdAt":"2026-04-18T20:31:34.277Z","updatedAt":"2026-05-18T18:51:45.997Z","lastSeenAt":"2026-05-18T18:51:45.997Z","tsv":"'-01':306,493,855 '/docs':834 '/docs/api/admin-graphql':841 '/docs/api/shopify-cli':847 '/webhooks/gdpr/customer-deletion':522 '/webhooks/gdpr/data-request':518 '/webhooks/gdpr/shop-deletion':526 '/webhooks/orders':499 '/webhooks/products':504 '12':858 '2026':305,492,854 '250':560 '3':460 '5':329 '9292':232 'access':248,254,275,591,662,720,754 'action':98,193,874 'add':92 'admin':11,93,192,199,782,836 'alway':575 'amount':356 'api':12,50,304,490,529,570,601,653,776,837,852 'app':6,32,82,134,152,155,159,161,169,180,188,195,202,210,510,598,697,701 'appear':683 'applic':868 'applyattributechang':424,430 'approv':511 'ask':28,912 'authent':658,767 'backend':128 'backoff':567,638 'base':549 'bash':143,153,178,217 'best':527 'bill':54,775 'block':200 'blockstack':402 'boundari':920 'build':4,30,64,73,80,103,119,133,171 'bulk':554,643 'cach':600 'call':654 'card':467 'care':385,390 'catalog':274 'chang':607 'charg':77 'check':442,667,690,721,743 'checkbox':404,441 'checkout':90,184,396,779 'checkout/admin/pos':36 'clarif':914 'clear':887 'cli':14,139,142,843 'combin':137 'command':140 'comment':465 'common':267,801 'complet':677 'complianc':513 'compon':781 'configur':250,485 'confirm':699 'const':414,419,423 'correct':689 'cost':545,625 'creat':35,96,149,157,221 'createdat':352 'credenti':571 'criteria':923 'csrf':588 'currencycod':357 'cursor':548 'cursor-bas':547 'custom':38,89,112,266,283,285,286,383,514,519 'dashboard':731 'data':287,515,604 'dataset':647 'default':409 'delet':520,524 'deploy':170,698 'deprec':745,860 'describ':875,891 'design':114,849 'detail':759 'dev':162,164,226,246 'develop':3,20,39,216,243,537,830 'directori':796 'discount':101 'discounts/payment/delivery':790 'displayfinancialstatus':353 'doc':831 'document':827 'doesn':605 'edg':321,330,348 'embed':597 'endcom':469 'endcursor':337 'endif':473,483 'ensur':674 'environ':573,903 'environment-specif':902 'error':635,748 'event':713 'exampl':377,398,463 'execut':870 'expert':908 'explor':742 'exponenti':566,637 'export':408 'extens':7,34,105,136,177,182,186,190,197,204,208,212,397,613,680,686,692,784,786 'extern':70 'fail':659,735 'fals':418 'featur':79 'field':374,395,540,746 'file':757,764 'filter':621 'first':312,317,318,328,343,346,347 'flow':676,768 'frequent':608 'fulfil':295,297,299 'function':60,214,412,788 'g':146 'gdpr':505 'generat':176,181,189,196,203,211 'getord':342 'getproduct':311 'gift':434,449,453 'giftmessag':413 'grant':673 'graphiql':741 'graphql':10,47,300,309,340,360,532,623,733,769,812,823,835 'guid':761 'handl':325,388,562 'handler':774 'hasnextpag':336 'header':628,656 'hmac':578,722 'id':323,332,350,369 'imag':472,615 'img':619 'implement':51,100,546,636,760 'import':400,820,824 'init':156,220 'input':917 'instal':141,145,703 'instruct':386 'int':313,344 'integr':44,69,777 'interact':805 'inventori':289,291 'inventoryquant':334 'isgift':415,428,438,443,450 'item':561 'json':378 'key':371,384,433 'label':452 'larg':646 'latest':148 'lazi':610 'level':293 'limit':564,634,655,819,879 'line':393 'link':828 'liquid':18,42,461,464,792 'live':236,238 'load':611 'local':228 'localhost':231 'log':728 'logic':129,640,725 'manag':281 'mandatori':506 'match':888 'merchant':74 'messag':375,420,429,435,437,439,454,456,749 'metafield':57,359,363,366,367,368,379 'metafieldsset':365 'metafieldssetinput':364 'minim':590 'miss':925 'modifi':116 'money':476 'monitor':622,648 'month':859 'multilin':459 'mutat':361,770 'name':351 'namespac':370,382 'need':126,542 'new':158,222,536 'node':322,331,349 'npm':144 'oauth':583,675,766 'offici':826 'onchang':444,457 'oper':555,644 'optim':614 'order':262,264,277,279,280,298,339,345 'orders/create':496 'orders/updated':497 'output':897 'overview':878 'ownerid':380 'page':118 'pageinfo':335 'pageinfo.endcursor':552 'pagin':550,817 'paramet':585 'partner':730 'pattern':301,802 'perform':599 'permiss':918 'polari':15,848 'polaris.shopify.com':851 'pos':97,206,785 'practic':528 'prevent':587 'preview':229 'price':333,480 'process':557,581 'product':258,260,270,272,273,308,316,466 'product.compare':478 'product.featured':471 'product.price':475,481 'product.title':474 'product/collection':117 'products/orders/billing':772 'products/update':502 'project':806 'public':719 'publish':694 'pull':235,237 'purchase.checkout.block.render':411 'push':242,244 'python':809 'quarter':856 'queri':307,310,314,319,320,338,341,544,624,734,737,815 'rate':563,633,818 'reactextens':401,410 'read':257,261,265,269,276,282,288,294,762 'receiv':712 'reduc':543 'refer':756,794,838,844 'references/app-development.md':84,765 'references/extensions.md':107,778 'references/themes.md':123,791 'releas':857 'request':516,538,589 'requir':508,670,753,916 'respons':602,627 'rest':49,534 'retri':639 'return':440 'review':726,909 'rout':61 'rule':102 'run':151,808 'safeti':919 'sale':482 'scaffold':807 'schema':739 'scope':249,255,256,268,592,671,755,890 'script':803 'scripts/shopify_graphql.py':811 'scripts/shopify_init.py':804,810 'section':798 'secur':568 'see':83,106,122,632 'server':165 'servic':71 'session':594 'set':358 'setisgift':416,445 'setmessag':421,458 'setmetafield':362 'shop':523,652 'shopifi':2,5,13,19,31,46,59,138,154,160,168,175,179,187,194,201,209,218,224,233,240,651,696,787,822,829,842 'shopify-develop':1 'shopify.app.toml':252,487 'shopify.dev':833,840,846 'shopify.dev/docs':832 'shopify.dev/docs/api/admin-graphql':839 'shopify.dev/docs/api/shopify-cli':845 'shopify/cli':147 'shopify/product/123':381 'shopify/ui-extensions-react/checkout':407 'shopifygraphql':825 'shopmoney':355 'signatur':579,723 'singl':392 'skill':21,24,866,882 'skill-shopify-development' 'snippet':468,800 'source-sickn33' 'specif':904 'start':163,227 'state':584 'status':326 'still':665 'stock':292 'stop':910 'store':569,707 'storefront':113,131 'string':315 'structur':797 'substitut':900 'success':678,922 'switch':641 'syntax':793 'system':850 'target':687 'task':886 'templat':43,462,816 'test':706,906 'text':394 'textfield':403,451 'theme':8,40,121,135,215,219,223,225,234,239,241,247,617,795 'titl':324 'token':595,663 'toml':253,488 'tool':75 'topic':495,501 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'totalpriceset':354 'treat':895 'troubleshoot':629 'tsx':399 'tunnel':167 'type':183,191,198,205,213,391,431 'ui':16,37,94,132,185,207,780,783 'updateattribut':432 'upload':173 'uri':498,503 'url':517,521,525,620,717 'usag':530 'use':9,22,531,553,593,609,618,740,864,880 'useapplyattributechang':405,425 'useeffect':426 'user':27,66,86,109,125 'usererror':373 'usest':417,422 'util':813 'valid':302,582,666,724,736,905 'valu':372,387,436,455 'variabl':376,574 'variant':327 'verifi':576,660,684,714,750 'version':491,853 'via':626,695 'want':67,87,110 'webhook':52,484,489,507,577,709,716,727,773 'webhooks.privacy':512 'webhooks.subscriptions':494,500 'window':861 'work':55 'workflow':872 'write':259,263,271,278,284,290,296 'x':650 'x-shopify-shop-api-call-limit':649","prices":[{"id":"132d736b-0c23-416c-8630-7ed05c5c06da","listingId":"a94ae16f-5ce9-4ef1-b553-c3e4164c952f","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T20:31:34.277Z"}],"sources":[{"listingId":"a94ae16f-5ce9-4ef1-b553-c3e4164c952f","source":"github","sourceId":"sickn33/antigravity-awesome-skills/shopify-development","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/shopify-development","isPrimary":false,"firstSeenAt":"2026-04-18T21:44:52.082Z","lastSeenAt":"2026-05-18T18:51:45.997Z"},{"listingId":"a94ae16f-5ce9-4ef1-b553-c3e4164c952f","source":"skills_sh","sourceId":"sickn33/antigravity-awesome-skills/shopify-development","sourceUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/shopify-development","isPrimary":true,"firstSeenAt":"2026-04-18T20:31:34.277Z","lastSeenAt":"2026-05-07T22:40:33.116Z"}],"details":{"listingId":"a94ae16f-5ce9-4ef1-b553-c3e4164c952f","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"shopify-development","github":{"repo":"sickn33/antigravity-awesome-skills","stars":37911,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-05-18T08:24:49Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"c1e8c55237eff480c1a30adc07930063a404605f","skill_md_path":"skills/shopify-development/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/shopify-development"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"shopify-development","description":"Build Shopify apps, extensions, themes using GraphQL Admin API, Shopify CLI, Polaris UI, and Liquid."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/shopify-development"},"updatedAt":"2026-05-18T18:51:45.997Z"}}