| name | shopify-storefront-headless |
| description | Build headless storefronts with Shopify's Storefront API and Cart API.
Use when building custom frontends, setting up Hydrogen, querying products
for customer-facing apps, or managing cart operations programmatically.
Trigger with phrases like "shopify headless", "shopify storefront api",
"shopify hydrogen", "shopify cart api", "headless commerce shopify".
|
| allowed-tools | Read, Write, Edit, Bash(npm:*), Grep |
| version | 2.7.0 |
| license | MIT |
| author | Jeremy Longshore <jeremy@intentsolutions.io> |
| tags | ["saas","ecommerce","shopify"] |
| compatibility | Designed for Claude Code |
Shopify Storefront & Headless Commerce
Overview
The Storefront API is Shopify's public-facing GraphQL API for customer experiences. Unlike the Admin API (server-side, privileged), it uses a public access token safe for client-side code. Paired with the Cart API, it powers headless storefronts, mobile apps, and custom buying experiences.
Prerequisites
- Shopify store with a Storefront API access token (Headless channel or custom app)
- For Hydrogen: Node.js 18+ and Shopify CLI 3.x+
- Storefront API scopes:
unauthenticated_read_products, unauthenticated_read_collections
Instructions
Step 1: Storefront API Client Setup
import { createStorefrontApiClient } from "@shopify/storefront-api-client";
const client = createStorefrontApiClient({
storeDomain: "my-store.myshopify.com",
apiVersion: LATEST_API_VERSION,
publicAccessToken: "your-storefront-public-token",
});
Step 2: Cart Operations
const { data } = await client.request(CART_CREATE, {
variables: {
input: {
lines: [{ merchandiseId: "gid://shopify/ProductVariant/123", quantity: 2 }],
buyerIdentity: { email: "customer@example.com", countryCode: "US" },
},
},
});
Full cart mutations (cartLinesAdd, cartLinesUpdate, cartLinesRemove, ) in .
