Choose a version:

Shop API

The Shop API provides read-only access to the merchant's shop identity, including the shop ID, display name, primary storefront URL, and permanent myshopify.com domain. Use this API to link back to the storefront, identify the shop in backend requests, or display the shop name alongside order information.

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 shopify global object provides information about the shop where the order was placed. Access the following properties on shopify to read the shop's identity, name, storefront URL, and myshopify.com domain.

Anchor to shop shop required: The shop where the order was placed. Includes the shop ID, name, primary storefront URL, and myshopify.com domain.

Shop

Metadata about the merchant's store, including its name, storefront URL, `.myshopify.com` subdomain, and a globally-unique ID.

id
A globally-unique identifier for the shop in the format `gid://shopify/Shop/<id>`.
```
string
```
myshopifyDomain
The shop's unique `.myshopify.com` subdomain, such as `'example.myshopify.com'`. This domain is permanent and doesn't change even if the merchant adds a custom domain.
```
string
```
name
The display name of the shop as configured by the merchant in Shopify admin.
```
string
```
storefrontUrl
The primary storefront URL for the shop, such as `'https://example.myshopify.com'`. Use this to build links back to the merchant's online store.
```
string
```

Examples

jsx

import '@shopify/ui-extensions/preact';

import {render} from 'preact';

export default async () => {

render(<Extension />, document.body);

};

function Extension() {

const shop = shopify.shop;

return (

<s-box padding="base" border="base" borderRadius="base">

<s-stack direction="block" gap="small-200">

<s-text type="strong">Continue Shopping</s-text>

<s-text color="subdued">

Browse more products from {shop.name}.

</s-text>

<s-button href={shop.storefrontUrl}>Visit {shop.name}</s-button>

</s-stack>

</s-box>

);

}

Examples

Description

Create a link back to the merchant's online store from your extension. This example reads `shopify.shop.storefrontUrl` and renders a "Continue Shopping" button that navigates to the storefront.

jsx

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default async () => {
  render(<Extension />, document.body);
};

function Extension() {
  const shop = shopify.shop;

  return (
    <s-box padding="base" border="base" borderRadius="base">
      <s-stack direction="block" gap="small-200">
        <s-text type="strong">Continue Shopping</s-text>
        <s-text color="subdued">
          Browse more products from {shop.name}.
        </s-text>
        <s-button href={shop.storefrontUrl}>Visit {shop.name}</s-button>
      </s-stack>
    </s-box>
  );
}

Description

Use the shop's permanent domain as a stable identifier when communicating with a backend service. This example reads `shopify.shop.myshopifyDomain` and includes it in a POST request to an external API.

jsx

import '@shopify/ui-extensions/preact';
import {render} from 'preact';
import {useState} from 'preact/hooks';

export default async () => {
  render(<Extension />, document.body);
};

function Extension() {
  const shop = shopify.shop;
  const [status, setStatus] = useState('idle');

  async function syncWithBackend() {
    setStatus('syncing');
    try {
      await fetch('https://my-app.example.com/api/sync', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({shop: shop.myshopifyDomain}),
      });
      setStatus('synced');
    } catch {
      setStatus('error');
    }
  }

  return (
    <s-box padding="base">
      <s-stack direction="block" gap="small-200">
        <s-text type="strong">Loyalty Program</s-text>
        <s-text color="subdued">
          Store: {shop.myshopifyDomain}
        </s-text>
        <s-button
          disabled={status === 'syncing'}
          onClick={syncWithBackend}
        >
          {status === 'syncing'
            ? 'Syncing…'
            : status === 'synced'
              ? 'Synced ✓'
              : 'Sync Account'}
        </s-button>
        {status === 'error' && (
          <s-banner tone="critical">
            Sync failed. Please try again.
          </s-banner>
        )}
      </s-stack>
    </s-box>
  );
}

Description

Show the shop name in your extension's UI for context. This example reads `shopify.shop.name` and renders a welcome message.

jsx

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default async () => {
  render(<Extension />, document.body);
};

function Extension() {
  const shop = shopify.shop;

  return (
    <s-box padding="base">
      <s-stack direction="block" gap="small-200">
        <s-text type="strong">
          Welcome to {shop.name}
        </s-text>
        <s-text color="subdued">
          Thank you for shopping with us. We appreciate your business!
        </s-text>
      </s-stack>
    </s-box>
  );
}

Anchor to Best practicesBest practices

Use myshopifyDomain for reliable identification: The myshopifyDomain is a stable identifier for the shop, while the storefrontUrl can change if the merchant updates their custom domain.
Use storefrontUrl for customer-facing links: When linking to the storefront from your extension, use the storefrontUrl property to ensure links point to the merchant's primary domain.

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?