Imported from jeremylongshore/tons-of-skills-marketplace (plugins/saas-packs/shopify-pack/skills/shopify-storefront-headless/SKILL.md). Install upstream with npx skills add jeremylongshore/tons-of-skills-marketplace --skill shopify-storefront-headless. Copyright stays with the author (MIT).

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: "customer@example.com", countryCode: "US" },
    },
  },
});
// Redirect to data.cartCreate.cart.checkoutUrl to complete purchase

Full cart mutations (cartLinesAdd, cartLinesUpdate, cartLinesRemove, cartDiscountCodesUpdate) in cart-api.md.

Step 3: Query Products (Storefront Schema)

// Storefront API schema differs from Admin API — field names are NOT the same
const { data } = await client.request(`
  query { products(first: 10) { edges { node {
    id title handle availableForSale
    priceRange { minVariantPrice { amount currencyCode } }
    variants(first: 5) { edges { node {
      id title availableForSale
      price { amount currencyCode }  // MoneyV2 object, not a string
      selectedOptions { name value }
    }}}
  }}}}
`);

Step 4: Storefront vs Admin API Decision Guide

Detailed comparison in storefront-vs-admin.md. Hydrogen framework setup in hydrogen-patterns.md.

Output

• Storefront API client configured with public access token
• Cart created with line items and checkout URL
• Product catalog queryable from client-side code
• Clear separation of Storefront (public) vs Admin (privileged) API usage

Error Handling

Examples

Building a Custom Cart Experience

Create a cart, add line items, apply discount codes, and redirect to Shopify's hosted checkout using the Storefront Cart API.

See Cart API for the complete cart lifecycle mutations and response shapes.

Scaffolding a Hydrogen Storefront

Set up a new Hydrogen project with Remix loaders, Storefront client configuration, and server-side product queries.

See Hydrogen Patterns for the framework setup and loader patterns.

Choosing Between Storefront and Admin APIs

Decide which API to use based on token type, rate limiting model, available mutations, and data access scope.

See Storefront vs Admin for the detailed comparison.

Resources

• Storefront API Reference
• Cart API Guide
• Hydrogen Framework
• Storefront API Authentication