Use for custom storefronts requiring direct GraphQL queries/mutations for data fetching and cart operations. Choose this when you need full control over data fetching and rendering your own UI. NOT for Web Components - if the prompt mentions HTML tags like <shopify-store>, <shopify-cart>, use storefront-web-components instead.
Install
npx skills add Shopify/Shopify-AI-Toolkit --skill shopify-storefront-graphqlnpx skills add Shopify/Shopify-AI-Toolkit --skill shopify-storefront-graphql -a claude-code -gnpx skills add Shopify/Shopify-AI-Toolkit --skill shopify-storefront-graphql -a codex -ggemini skills install https://github.com/Shopify/Shopify-AI-Toolkit.git --path deprecated/shopify-storefront-graphqlgh skill install Shopify/Shopify-AI-Toolkit shopify-storefront-graphqlgit clone --depth 1 https://github.com/Shopify/Shopify-AI-Toolkit /tmp/Shopify__Shopify-AI-Toolkit
mkdir -p ~/.claude/skills ~/.agents/skills
cp -R /tmp/Shopify__Shopify-AI-Toolkit/deprecated/shopify-storefront-graphql ~/.claude/skills/shopify-storefront-graphql # Claude Code
cp -R /tmp/Shopify__Shopify-AI-Toolkit/deprecated/shopify-storefront-graphql ~/.agents/skills/shopify-storefront-graphql # Codex, Cursor, Gemini CLI, Copilot, OpenCode