---
title: Shop API
description: >-
  The Shop API provides information about the store where the order was placed,
  including its name, ID, storefront URL, and myshopify.com domain. Use it to
  display shop details or build links back to the storefront from the Order
  status page.
api_version: 2025-07
api_name: customer-account-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/target-apis/order-apis/shop-api
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/target-apis/order-apis/shop-api.md
---

Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use [web components](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components), native UI elements with built-in accessibility, better performance, and consistent styling with [Shopify's design system](https://shopify.dev/docs/apps/design). Check out the [migration guide](https://shopify.dev/docs/apps/build/customer-accounts/migrate-to-web-components) to upgrade your extension.

# Shop API

The Shop API provides information about the store where the order was placed, including its name, ID, storefront URL, and `myshopify.com` domain. Use it to display shop details or build links back to the storefront from the Order status page.

### Use cases

* **Link to the storefront**: Create links back to the merchant's online store from your extension.
* **Identify the shop**: Use the shop's permanent domain as a stable identifier when communicating with your backend service.
* **Display the shop name**: Show the shop name in your extension's UI for context.

### Support Targets (10)

### Supported targets

* [customer-account.​order-status.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-announcement-)
* [customer-account.​order-status.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-block-)
* [customer-account.​order-status.​cart-line-item.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#cart-line-item-render-after-)
* [customer-account.​order-status.​cart-line-list.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#cart-line-list-render-after-)
* [customer-account.​order-status.​customer-information.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#customer-information-render-after-)
* [customer-account.​order-status.​fulfillment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/fulfillment-status#fulfillment-status-targets)
* [customer-account.​order-status.​payment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/payments-and-returns#payments-and-returns-targets)
* [customer-account.​order-status.​return-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/payments-and-returns#return-details-render-after-)
* [customer-account.​order-status.​unfulfilled-items.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/fulfillment-status#unfulfilled-items-render-after-)
* [customer-account.​order.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#order-specific-full-page-)

### Properties

The Shop API object provides information about the shop. Access the following properties on the API object to read shop data.

* **shop**

  **Shop**

  **required**

  The shop where the order was placed, including its name, ID, storefront URL, and `myshopify.com` domain.

### Shop

* id

  A globally-unique identifier for the shop.

  ```ts
  string
  ```

* myshopifyDomain

  The shop's \`myshopify.com\` domain. This is a stable identifier that doesn't change when the merchant updates their custom domain.

  ```ts
  string
  ```

* name

  The merchant's store name as configured in the Shopify admin.

  ```ts
  string
  ```

* storefrontUrl

  The primary storefront URL for the shop. This reflects the merchant's custom domain if one is configured.

  ```ts
  string
  ```

Examples

### Examples

* ####

  ##### Description

  Read the shop's name and storefront URL and display them. This example uses the \`useShop\` hook to access the \`name\` and \`storefrontUrl\` properties.

  ##### React

  ```tsx
  import {
    reactExtension,
    useShop,
  } from '@shopify/ui-extensions-react/customer-account';
  import {
    BlockStack,
    Text,
    Link,
  } from '@shopify/ui-extensions/customer-account';

  export default reactExtension(
    'customer-account.order-status.block.render',
    () => <Extension />,
  );

  function Extension() {
    const shop = useShop();

    return (
      <BlockStack>
        <Text emphasis="bold">{shop.name}</Text>
        {shop.storefrontUrl && (
          <Link to={shop.storefrontUrl}>
            Visit storefront
          </Link>
        )}
      </BlockStack>
    );
  }
  ```

  ##### TS

  ```ts
  import {
    extension,
    BlockStack,
    Text,
    Link,
  } from '@shopify/ui-extensions/customer-account';

  export default extension(
    'customer-account.order-status.block.render',
    (root, api) => {
      const shop = api.shop;

      const stack = root.createComponent(BlockStack, {});
      stack.appendChild(
        root.createComponent(Text, {emphasis: 'bold'}, shop.name),
      );
      if (shop.storefrontUrl) {
        stack.appendChild(
          root.createComponent(
            Link,
            {to: shop.storefrontUrl},
            'Visit storefront',
          ),
        );
      }
      root.appendChild(stack);
    },
  );
  ```

* ####

  ##### Description

  Read the shop's \`myshopify.com\` domain and display it as an identifier. This example uses \`useShop\` to access the stable \`myshopifyDomain\` property.

  ##### React

  ```tsx
  import React, {useState} from 'react';
  import {
    reactExtension,
    useShop,
  } from '@shopify/ui-extensions-react/customer-account';
  import {
    Banner,
    Button,
    Text,
  } from '@shopify/ui-extensions/customer-account';

  export default reactExtension(
    'customer-account.order-status.block.render',
    () => <Extension />,
  );

  function Extension() {
    const shop = useShop();
    const [synced, setSynced] = useState(false);

    async function syncWithBackend() {
      await fetch('https://my-app.example.com/api/sync', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
          shopId: shop.id,
          domain: shop.myshopifyDomain,
        }),
      });
      setSynced(true);
    }

    if (synced) {
      return (
        <Banner status="success">
          <Text>Synced with {shop.myshopifyDomain}</Text>
        </Banner>
      );
    }

    return (
      <Button onPress={syncWithBackend}>
        Sync shop data
      </Button>
    );
  }
  ```

  ##### TS

  ```ts
  import {
    extension,
    Banner,
    Button,
    Text,
  } from '@shopify/ui-extensions/customer-account';

  export default extension(
    'customer-account.order-status.block.render',
    (root, api) => {
      const shop = api.shop;

      const button = root.createComponent(
        Button,
        {
          onPress: async () => {
            await fetch('https://my-app.example.com/api/sync', {
              method: 'POST',
              headers: {'Content-Type': 'application/json'},
              body: JSON.stringify({
                shopId: shop.id,
                domain: shop.myshopifyDomain,
              }),
            });

            root.removeChild(button);
            const banner = root.createComponent(Banner, {status: 'success'});
            banner.appendChild(
              root.createComponent(
                Text,
                {},
                `Synced with ${shop.myshopifyDomain}`,
              ),
            );
            root.appendChild(banner);
          },
        },
        'Sync shop data',
      );
      root.appendChild(button);
    },
  );
  ```

* ####

  ##### Description

  Use the storefront URL to build a link back to the shop. This example uses \`useShop\` and falls back to \`myshopifyDomain\` when \`storefrontUrl\` is \`undefined\`.

  ##### React

  ```tsx
  import {
    reactExtension,
    useShop,
  } from '@shopify/ui-extensions-react/customer-account';
  import {
    Link,
    Text,
    BlockStack,
  } from '@shopify/ui-extensions/customer-account';

  export default reactExtension(
    'customer-account.order-status.block.render',
    () => <Extension />,
  );

  function Extension() {
    const shop = useShop();

    if (!shop.storefrontUrl) {
      return null;
    }

    return (
      <BlockStack>
        <Text>Continue shopping at {shop.name}:</Text>
        <Link to={`${shop.storefrontUrl}/collections`}>
          Browse collections
        </Link>
      </BlockStack>
    );
  }
  ```

  ##### TS

  ```ts
  import {
    extension,
    Link,
    Text,
    BlockStack,
  } from '@shopify/ui-extensions/customer-account';

  export default extension(
    'customer-account.order-status.block.render',
    (root, api) => {
      const shop = api.shop;

      if (!shop.storefrontUrl) return;

      const stack = root.createComponent(BlockStack, {});
      stack.appendChild(
        root.createComponent(
          Text,
          {},
          `Continue shopping at ${shop.name}:`,
        ),
      );
      stack.appendChild(
        root.createComponent(
          Link,
          {to: `${shop.storefrontUrl}/collections`},
          'Browse collections',
        ),
      );
      root.appendChild(stack);
    },
  );
  ```

***

## Best practices

* **Use `myshopifyDomain` for stable identification**: The `myshopifyDomain` doesn't change when the merchant updates their custom domain. Use it for API calls or stable references.
* **Check for `storefrontUrl`**: The `storefrontUrl` is optional and reflects the merchant's custom domain. Fall back to `myshopifyDomain` when building links if it's `undefined`.

***

## Limitations

* The Shop API provides only basic shop identification. For detailed shop settings such as currency, timezone, or plan information, use the [GraphQL Admin API](https://shopify.dev/docs/api/admin-graphql) through a backend service.

***