Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.

Choose a version:

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.

Anchor to Use casesUse 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

Anchor to PropertiesProperties

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

Anchor to 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.
```
string
```
myshopifyDomain
The shop's `myshopify.com` domain. This is a stable identifier that doesn't change when the merchant updates their custom domain.
```
string
```
name
The merchant's store name as configured in the Shopify admin.
```
string
```
storefrontUrl
The primary storefront URL for the shop. This reflects the merchant's custom domain if one is configured.
```
string
```

Examples

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 (

{shop.storefrontUrl && (

Visit storefront

</Link>

)}

</BlockStack>

);

}

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

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

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

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

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

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

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);
  },
);

Anchor to Best practicesBest 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.

Anchor to LimitationsLimitations

The Shop API provides only basic shop identification. For detailed shop settings such as currency, timezone, or plan information, use the GraphQL Admin API through a backend service.

Was this page helpful?