What Is the Shopify Storefront API?
The Shopify Storefront API is a GraphQL API that lets developers read a store's catalog and build carts to power custom and headless storefronts. It exposes products, collections, content, and cart operations to any front end, whether a React app, a Hydrogen storefront, a mobile app, or a game, while Shopify still handles the catalog and checkout. Access uses a Storefront access token, and it is read-and-cart focused rather than administrative. It is the connective layer that makes headless Shopify and custom shopping experiences possible.
- What it is
- A GraphQL API for building custom storefront experiences on Shopify (Shopify.dev)
- Exposes
- Products, collections, content, and cart creation and updates for the storefront
- Auth
- Uses a Storefront access token, scoped for public or private storefront use (Shopify.dev)
- Powers
- Hydrogen, headless storefronts, mobile apps, and other custom front ends
- Not for admin
- Order management and store administration use the separate Admin API
- Checkout
- Carts built via the API hand off to Shopify's hosted checkout
What the Storefront API is #
The Shopify Storefront API is a GraphQL API designed for building customer-facing shopping experiences on top of Shopify's commerce back end. Where a Liquid theme accesses store data internally, the Storefront API exposes that same data, products, variants, collections, content, and cart operations, to external applications over the network. This lets developers build a front end in any technology, a React or Next.js site, a Shopify Hydrogen storefront, a native mobile app, or even an in-game store, and have it pull live data from Shopify. Because it is GraphQL, the front end requests exactly the fields it needs in a single query, which is efficient and flexible. Crucially, it is focused on the storefront use case: reading catalog data and building carts, not administering the store. It is the technical foundation of headless Shopify. We use it as the data layer in custom builds under /services/web-app-development, connecting bespoke front ends to Shopify's reliable catalog, inventory, and checkout.
GraphQL and why it fits storefronts #
The Storefront API uses GraphQL rather than REST, which suits storefront development well. With GraphQL, the client sends a single query specifying precisely the data it wants, and receives exactly that, no more, no less, in one response. For a product page, you might request a product's title, description, images, price range, and available variants in one call, avoiding the multiple round trips and over-fetching common with REST. This efficiency matters for performance, especially on mobile where every request costs time. GraphQL's typed schema also makes development safer and better tooled, since editors can autocomplete fields and validate queries against the schema. For storefronts, where page speed directly affects conversion and SEO, fetching minimal, targeted data is a real advantage. Developers can also compose complex queries that gather everything a page needs in one request. We lean on these strengths when building fast custom front ends, aligning the data-fetching strategy with /services/speed-optimization so pages load quickly and the storefront hits strong Core Web Vitals from launch.
What you can do with it #
The Storefront API centers on two things: reading storefront data and managing carts. On the read side, you can fetch products and their variants, prices, images, and metafields; browse collections and their products; retrieve pages, blogs, and other content; access shop details like currencies and localization; and query available selling options. On the cart side, you can create a cart, add and update line items, apply discount codes, and prepare the cart for checkout. When the shopper is ready, the cart hands off to Shopify's hosted checkout to complete payment securely. This scope, read plus cart, is exactly what a storefront needs, which is why the API is designed this way. It deliberately excludes administrative actions like editing products or fulfilling orders, which belong to a different API. Understanding this boundary is key to architecting a headless store correctly. When a project also needs backend data movement, we combine the Storefront API with server-side integrations through /services/api-crm-integrations so each system does what it is built for.
Example: a Storefront API query #
The Storefront API accepts GraphQL queries sent to the store's storefront endpoint with a Storefront access token. The example requests a collection and its first products, showing the single-query pattern that fetches exactly what a page needs.
{
"query": "query CollectionProducts($handle: String!) { collectionByHandle(handle: $handle) { title products(first: 8) { nodes { id title handle featuredImage { url } priceRange { minVariantPrice { amount currencyCode } } } } } }",
"variables": { "handle": "summer-sale" }
}Access tokens and authentication #
Access to the Storefront API is controlled with a Storefront access token, which is different from the credentials used for Shopify's Admin API. Because the storefront is customer-facing, the API is designed so a public access token can safely expose only the data a storefront should show, products, collections, content, and cart operations, without granting administrative power. This means you can ship the token in client-side code for a public storefront without exposing sensitive store controls. For server-side or more sensitive scenarios, private access tokens with defined scopes are used. Setting the correct scopes and choosing public versus private tokens appropriately is an important security decision when building a headless store, ensuring the front end can do exactly what it needs and nothing more. Mismanaging tokens or scopes can either break functionality or overexpose data. We handle token strategy as part of a secure headless architecture, and we treat storefront security seriously alongside broader protections covered under /services/website-security so the custom front end is both functional and safe.
Storefront API vs Admin API #
Shopify offers two main APIs that people often confuse, and knowing the difference is fundamental. The Storefront API is for building customer-facing experiences: it reads catalog and content and manages carts, using storefront access tokens, and it is safe to use from client-side code. The Admin API is for managing the store behind the scenes: creating and editing products, processing and fulfilling orders, managing inventory, customers, and settings, and it uses privileged credentials that must stay server-side and never be exposed to shoppers. A headless store typically uses the Storefront API for everything the shopper touches, and the Admin API on the server for operational tasks and syncing with external systems. Using the wrong API for a task creates either security holes or missing capabilities. Architecting a build means deciding clearly which responsibilities each API handles. We map this separation carefully in every custom project, using the Storefront API for the shopping experience and the Admin API, via secure server code, for back-office integration through /services/api-crm-integrations.
Where the Storefront API is used #
The Storefront API powers a wide range of custom commerce experiences beyond traditional websites. It is the backbone of headless storefronts built with Shopify Hydrogen or frameworks like Next.js, feeding them live product and cart data. It enables native mobile shopping apps that use Shopify as the commerce engine while presenting an app-native interface. It supports embedding shopping into unconventional surfaces, such as interactive content, kiosks, digital displays, or games, anywhere you want to sell using Shopify's back end but control the presentation completely. It also lets brands merge Shopify commerce data with content from a separate CMS in a single custom front end, a common pattern for content-rich stores. In every case, Shopify remains the source of truth for catalog, inventory, and checkout, while the API delivers that data wherever it is needed. This versatility is why the Storefront API is central to modern, flexible commerce. We build these varied experiences under /services/web-app-development, matching the front end to each brand's channel strategy.
Rate limits and performance considerations #
Building on the Storefront API means designing for its rate limits and for performance, both of which shape a fast, reliable storefront. The Storefront API meters usage, so a busy custom front end must query efficiently, requesting only the fields each page needs and avoiding wasteful repeated calls. Caching is central: because catalog data changes relatively infrequently, storefronts cache API responses so most page views serve from cache rather than hitting Shopify on every request, which improves speed and stays comfortably within limits. Frameworks like Hydrogen build in caching conventions for exactly this reason. Fetching data on the server, close to render time, also reduces client-side round trips and improves Core Web Vitals. Poorly designed data fetching can make a headless storefront slower than a good theme, so getting this right is essential rather than optional. We plan query design, caching, and server rendering together on custom builds, aligning the work with /services/speed-optimization so the storefront is genuinely fast, not just flexible.
Should your project use it? #
The Storefront API is the right tool whenever you need a custom or headless front end rather than a standard Shopify theme, or when you want to embed Shopify commerce into an app or another surface. If your store runs well on a theme, you likely never touch the Storefront API directly, because Liquid handles data access for you, and that is the simpler, cheaper path for most merchants. The API becomes relevant once you commit to a custom presentation layer, at which point it is essential and unavoidable. Because using it means taking on a software project, the decision is really the broader headless-versus-theme choice, and it should weigh design ambition, budget, and technical resources honestly. We help merchants make that call rather than defaulting to custom, and when a bespoke build is justified, the Storefront API anchors the architecture. To discuss whether a custom, API-driven storefront fits your goals, reach us at /contact or start with a review at /free-website-audit.
FAQ
What is the Shopify Storefront API used for?
The Storefront API is used to build custom and headless storefronts by reading a store's products, collections, and content and managing carts through GraphQL. It powers React sites, Shopify Hydrogen storefronts, mobile apps, and other custom front ends, while Shopify continues to manage the catalog, inventory, and secure hosted checkout behind the scenes.
Is the Storefront API the same as the Admin API?
No. The Storefront API is for customer-facing experiences, reading catalog and content and managing carts, and is safe for client-side use with a storefront access token. The Admin API manages the store behind the scenes, creating products and processing orders, using privileged credentials that must stay server-side. Headless stores typically use both for different tasks.
Does the Storefront API handle checkout?
The Storefront API builds and updates carts, then hands them off to Shopify's hosted, PCI-compliant checkout to complete payment. It does not replace checkout; it prepares the cart for it. This keeps payment processing secure and lets you keep features like Shop Pay while still controlling the browsing and cart experience in your custom front end.
Why does the Storefront API use GraphQL?
GraphQL lets the front end request exactly the fields it needs in a single query and receive precisely that data, avoiding the over-fetching and multiple round trips common with REST. For storefronts, this efficiency improves performance, especially on mobile, and the typed schema gives developers better tooling and safer queries when building fast custom pages.
How do you authenticate with the Storefront API?
You use a Storefront access token, which differs from Admin API credentials. Public tokens safely expose only storefront-appropriate data, products, collections, content, and cart operations, so they can be used in client-side code. Private tokens with defined scopes suit server-side or more sensitive cases. Choosing the right token and scopes is an important security decision.
Do I need the Storefront API for a normal Shopify store?
No. A standard Shopify theme accesses store data internally through Liquid, so you never touch the Storefront API directly. It becomes relevant only when you build a custom or headless front end, or embed Shopify commerce into an app or other surface. For most merchants, a theme is the simpler, cheaper path.
How Local Web Advisor checks this for you
Is your own website getting e-commerce right?
Our free AI audit scans your site and tells you — in plain English — exactly what to fix for e-commerce and seven other areas, with the business impact and the fix for each. No login needed to start.
Run my free website audit →Was this helpful?