---
title: About mobile storefronts
description: >-
  Build product browsing, search, and cart in your mobile app with the
  Storefront API. Learn when to use it, how it connects to Checkout Kit, and
  which operations you'll need.
source_url:
  html: 'https://shopify.dev/docs/storefronts/mobile/about-mobile-storefronts'
  md: 'https://shopify.dev/docs/storefronts/mobile/about-mobile-storefronts.md'
---

# About mobile storefronts

Build product browsing, search, and cart management into your iOS, Android, or React Native app with the [Storefront API](https://shopify.dev/docs/api/storefront). The Storefront API provides the product data and cart operations, and [Checkout Kit](https://shopify.dev/docs/storefronts/mobile/checkout-kit) handles checkout.

***

## How it works

A mobile storefront has three layers:

1. **[Storefront API](https://shopify.dev/docs/api/storefront)**: 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](https://shopify.dev/docs/storefronts/mobile/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](https://shopify.dev/docs/apps/build/checkout/create-cart-permalinks)), then you don't need the Storefront API. Skip straight to [Checkout Kit](https://shopify.dev/docs/storefronts/mobile/checkout-kit).

***

## Requirements

* A [development store](https://shopify.dev/docs/apps/build/dev-dashboard/stores/development-stores) with [generated test data](https://shopify.dev/docs/api/development-stores/generated-test-data).
* A Storefront API access token from the [Headless channel](https://shopify.dev/docs/storefronts/headless/building-with-the-storefront-api/getting-started#step-1-enable-storefront-api-access) in the Shopify admin.
* A GraphQL client (we recommend [Apollo](https://www.apollographql.com/)).

***

## Connect 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:

* **iOS**: [Apollo iOS](https://www.apollographql.com/docs/ios/).
* **Android**: [Apollo Kotlin](https://www.apollographql.com/docs/kotlin/).
* **React Native**: [Apollo Client](https://www.apollographql.com/docs/react/).

The Checkout Kit sample apps for [Swift](https://github.com/Shopify/checkout-sheet-kit-swift/tree/main/Samples), [Android](https://github.com/Shopify/checkout-sheet-kit-android/tree/main/samples), and [React Native](https://github.com/Shopify/checkout-sheet-kit-react-native/tree/main/sample) already use Apollo. Use them as a reference for setting up your GraphQL client.

Here's a minimal product query:

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

***

## Storefront API operations

| Operation | What it does |
| - | - |
| [Products query](https://shopify.dev/docs/api/storefront/latest/queries/products) | Fetch products with titles, images, prices, and variant IDs. |
| [`cartCreate` mutation](https://shopify.dev/docs/api/storefront/latest/mutations/cartCreate) | Create a cart with line items and get a `checkoutUrl`. |
| [`cartLinesUpdate` mutation](https://shopify.dev/docs/api/storefront/latest/mutations/cartLinesUpdate) | Update item quantities in a cart. |
| [`cartBuyerIdentityUpdate` mutation](https://shopify.dev/docs/api/storefront/latest/mutations/cartBuyerIdentityUpdate) | Link 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](https://shopify.dev/docs/storefronts/headless/building-with-the-storefront-api/cart/manage).

***

## Next steps

[Build a mobile storefront\
\
](https://shopify.dev/docs/storefronts/mobile/build-mobile-storefront)

[Fetch products, create a cart, and present checkout.](https://shopify.dev/docs/storefronts/mobile/build-mobile-storefront)

[Embed Checkout Kit\
\
](https://shopify.dev/docs/storefronts/mobile/checkout-kit)

[Present Shopify checkout inside your app with a single `checkoutUrl`.](https://shopify.dev/docs/storefronts/mobile/checkout-kit)

[Storefront API reference\
\
](https://shopify.dev/docs/api/storefront)

[API reference for products, collections, carts, and customers.](https://shopify.dev/docs/api/storefront)

***