shopify-storefront-headless

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 <[e-mail]>
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", // Safe in browser
});

Step 2: Cart Operations

const { data } = await client.request(CART_CREATE, {
  variables: {
    input: {
      lines: [{ merchandiseId: "gid://shopify/ProductVariant/123", quantity: 2 }],
      buyerIdentity: { email: "[e-mail]", countryCode: "US" },
    },
  },
});
// Redirect to data.cartCreate.cart.checkoutUrl to complete purchase

Full cart mutations (cartLinesAdd, cartLinesUpdate, cartLinesRemove, ) in .