How do you use the Storefront API from a checkout UI extension?

Retired Boards Appdev Custom Storefronts

Topic summary

A developer is struggling to understand how to properly call the Storefront API from within a checkout UI extension.

Main Issue:
The developer enabled network_access for their extension and attempted to fetch from the Storefront API endpoint directly, but receives a 403 error. They’ve found conflicting information in documentation and community threads.

Key Questions:

  1. How can one call the Storefront API from a checkout UI extension?
  2. Is converting the app into a Sales Channel necessary?

Concerns:
Many apps have legitimate Storefront API use cases but get rejected when applying for Sales Channel status because they don’t meet the criteria. This creates a significant blocker for developers.

Potential Solution:
Another user pointed to official documentation suggesting there may be a supported method: Checkout UI Extensions Storefront API docs.

Status: The discussion remains open with no definitive resolution yet on the correct implementation approach or whether Sales Channel conversion is required.

Summarized with AI on November 15. AI used: claude-sonnet-4-5-20250929.
1

The documentation surround use of the Storefront API is confusing to me and I’m not sure how/if I can use it within a checkout UI extension.

On one hand, I’ve seen a couple examples of apps calling the Storefront API while also using checkout UI extensions, and some hints that this may be possible in threads like this:

https://community.shopify.com/c/shopify-apis-and-sdks/how-do-i-fetch-product-details-from-a-checkout-ui-extension/m-p/1671855#M81787

On the other hand, I’m reading that the app must be turned into a sales channel (for public apps) in threads like this:

https://community.shopify.com/c/shopify-apis-and-sdks/storefront-api-app-must-have-a-channel-record/td-p/872704

I enabled network_access for my extension and gave tried to call the Storefront API:

useEffect(() => {
    if (!isInitialized) {
      const testCall = async () => {
        const response = await fetch(
          `https://<myshopifyDomain>.myshopify.com/api/2022-07/graphql.json`,
          {
            method: 'POST',
            body: `
            query {
              products (first: 3) {
                edges {
                  node {
                    id
                    title
                  }
                }
              }
            }
            `,
          },
        );
        const data = await response.json();
        console.log('data', data);
      };
      testCall();
    }
  }, []);

but it returns a 403 error.

I guess the points I’m trying to clear up are:

  1. How can one call the Storefront API from a checkout UI extension?

  2. Is converting the app into a Sales Channel necessary? It feels like quite a blocker if it is as I’ve read many apps having legitimate use-cases for the Storefront API but having their app rejected to become a Sales Channel because it doesn’t fit the criteria for a Sales Channel.

1 Like
2

I was just looking through the documentation and there appears to be a way to do this see https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/apis/storefront-api

import {useEffect, useState} from 'react';
import {
  useApi,
  reactExtension,
  List,
  ListItem,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
  'purchase.checkout.block.render',
  () =>