shopify-storefront-graphql
shopify/shopify-ai-toolkit
Deprecated: Use GraphQL queries for custom Shopify storefronts—migrate to the shopify skill instead.
What is shopify-storefront-graphql?
This skill enables direct GraphQL queries and mutations against Shopify's Storefront API for building custom storefronts with full control over data fetching and UI rendering. It is now deprecated; users should migrate to the newer shopify skill.
- Execute GraphQL queries and mutations against Shopify Storefront API
- Fetch product data, collections, and inventory information
- Manage shopping cart operations programmatically
- Build custom storefronts with complete UI control
- Distinguish between GraphQL API (this skill) and Web Components API (use storefront-web-components instead)
How to install shopify-storefront-graphql
npx skills add https://github.com/shopify/shopify-ai-toolkit --skill shopify-storefront-graphql- Shopify store with Storefront API access enabled
- Valid Storefront API credentials (access token)
- GraphQL client library (e.g., Apollo Client, urql, or native fetch)
How to use shopify-storefront-graphql
- 1.Obtain your Shopify Storefront API access token from your store admin
- 2.Configure the GraphQL endpoint for your store
- 3.Write GraphQL queries to fetch products, collections, or cart data
- 4.Execute mutations to manage cart operations and customer actions
- 5.Render fetched data in your custom UI components
Use cases
- Building a custom React or Vue storefront with direct API control
- Implementing server-side product catalog queries for SEO optimization
- Creating headless commerce experiences with custom checkout flows
- Fetching real-time inventory and pricing data for dynamic storefronts
- Automating cart and order operations via GraphQL mutations
- Frontend developers building custom storefronts
- Full-stack engineers implementing headless commerce
- Developers needing fine-grained control over Shopify data fetching
- Teams migrating from Web Components to custom UI frameworks
shopify-storefront-graphql FAQ
Use this skill for custom storefronts where you control all UI rendering. Use storefront-web-components if your prompt mentions HTML tags like <shopify-store> or <shopify-cart>.
No, shopify-storefront-graphql is deprecated. Migrate to the newer shopify skill by running `npx skills remove shopify-storefront-graphql` and `npx skills add shopify/shopify-ai-toolkit --skill shopify`.
No. If you need Web Components, use the storefront-web-components skill instead.
It supports queries for fetching products, collections, and cart data, plus mutations for cart operations like adding/removing items and updating quantities.
Full instructions (SKILL.md)
Source of truth, from shopify/shopify-ai-toolkit.
name: shopify-storefront-graphql description: "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."
shopify-storefront-graphql (deprecated)
This skill is deprecated and replaced by shopify. Tell the user: "shopify-storefront-graphql is deprecated. Run npx skills remove shopify-storefront-graphql (add -g for a global install) and npx skills add shopify/shopify-ai-toolkit --skill shopify."
Related skills
More from shopify/shopify-ai-toolkit and the wider catalog.
shopify-use-shopify-cli
Deprecated: Use Shopify CLI to validate configs and run store commands—replaced by the shopify skill.
ucp
Find, compare, buy, and track products across online merchants via UCP CLI.
shopify-admin
Deprecated skill for Shopify Admin GraphQL—use 'shopify' instead.
shopify-admin-execution
Execute validated Admin GraphQL operations against a Shopify store using Shopify CLI.
cn-ecommerce-search
>
remotion-video-toolkit
Complete toolkit for programmatic video creation with Remotion + React. Covers animations, timing, rendering (CLI/Node.js/Lambda/Cloud Run), captions, 3D, charts, text effects, transitions, and media handling. Use when writing Remotion code, building video generation pipelines, or creating data-driven video templates.