shopify-storefront-api

Shopify Storefront API

Overview

The Shopify Storefront API is a public-facing GraphQL API that provides read and write access to a store's products, collections, cart, and checkout from any frontend. It uses a Storefront Access Token (distinct from Admin API tokens) and is safe to expose in client-side JavaScript. Use it to build headless storefronts with Next.js, Remix/Hydrogen, or any JS framework.

When to Use This Skill

• When building a headless Shopify storefront with a custom frontend framework
• When creating a React Native or Flutter mobile app that needs product and cart data
• When embedding a Shopify buy button or product widget in a non-Shopify site
• When using Shopify Hydrogen (Remix-based) for a fully custom storefront experience
• When needing real-time product availability or pricing without the Admin API overhead
• When implementing cart persistence across sessions with Shopify's hosted cart

Core Instructions

1. Create a Storefront Access Token

   In Shopify Admin → Apps → Develop apps → Your App → API credentials → Storefront API access token. Or via the Admin API:

   // Via Admin API (one-time setup)
   const token = await admin.graphql(`
     mutation {
       storefrontAccessTokenCreate(input: { title: "Headless Frontend" }) {
         storefrontAccessToken {
           accessToken
           title
         }
         userErrors { field message }
       }
     }
   `);
   

   Storefront Access Tokens do not use the shpat_ prefix (that prefix is for Admin API tokens). Storefront tokens are opaque strings safe to use in browser code — they only allow storefront-scoped operations.

2. Set up the Storefront API client

   Using the official @shopify/storefront-api-client:

   npm install @shopify/storefront-api-client
   

   // lib/shopify.ts
   import { createStorefrontApiClient } from "@shopify/storefront-api-client";
   
   export const storefront = createStorefrontApiClient({
     storeDomain: process.env.NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN!, // e.g. "mystore.myshopify.com"
     apiVersion: "2025-01",
     publicAccessToken: process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_TOKEN!,
   });