Skip to main content

About mobile storefronts

Build product browsing, search, and cart management into your iOS, Android, or React Native app with the Storefront API. The Storefront API provides the product data and cart operations, and Checkout Kit handles checkout.

Anchor to How it worksHow it works

A mobile storefront has three layers:

  1. Storefront API: Display products, search your catalog, build and manage a cart, and get a checkoutUrl.
  2. App UI: Your native iOS, Android, or React Native code that renders products, handles search, and presents the cart experience.
  3. Checkout Kit: Takes the checkoutUrl from the cart and presents Shopify checkout. Shopify processes the payment, creates the order, and your app receives a callback when checkout completes.
Tip

If your app already has a checkoutUrl from another source (your backend, a web store, or a cart permalink), then you don't need the Storefront API. Skip straight to Checkout Kit.

Anchor to RequirementsRequirements

Anchor to Connect to the Storefront APIConnect to the Storefront API

Authenticate with a public access token from the Headless channel. Send queries to https://{shop}.myshopify.com/api/{api-version}/graphql.json with the token in the X-Shopify-Storefront-Access-Token header.

Apollo gives you typed queries, caching, and support for the @defer directive:

The Checkout Kit sample apps for Swift, Android, and React Native already use Apollo. Use them as a reference for setting up your GraphQL client.

Here's a minimal product query:

{
products(first: 5) {
edges {
node {
id
title
variants(first: 1) {
edges {
node {
id
price {
amount
currencyCode
}
}
}
}
}
}
}
}

Anchor to Storefront API operationsStorefront API operations

OperationWhat it does
Products queryFetch products with titles, images, prices, and variant IDs.
cartCreate mutationCreate a cart with line items and get a checkoutUrl.
cartLinesUpdate mutationUpdate item quantities in a cart.
cartBuyerIdentityUpdate mutationLink buyer details to a cart so Shopify personalizes checkout for that buyer.

To manage metafields, buyer identity, and authenticated checkouts, see Create and update a cart with the Storefront API.

Anchor to Next stepsNext steps

Build a mobile storefront

Fetch products, create a cart, and present checkout.

Embed Checkout Kit

Present Shopify checkout inside your app with a single checkoutUrl.

Storefront API reference

API reference for products, collections, carts, and customers.

Was this page helpful?