Choose a version:

Shop API

The Shop API provides read-only access to the current store's metadata during checkout. Use this API to display the shop name, retrieve the store's myshopifyDomain or storefrontUrl, and reference the store's ID for backend lookups.

The Shop API is read-only. There are no methods to modify store metadata from within a checkout extension.

The API exposes only myshopifyDomain and an optional storefrontUrl. Custom or secondary domains aren't available.

Anchor to Use casesUse cases

Display store branding: Show the shop name, myshopifyDomain, or storefrontUrl in your extension to reinforce trust and brand consistency.
Route backend requests: Use shopify.shop.id to associate checkout events with the correct store in your app's backend.
Adapt content by store: Read shop metadata to customize your extension's behavior for merchants running multiple stores.

Support

Targets (33)

Supported targets

Anchor to PropertiesProperties

The shopify global object provides shop metadata for the current checkout. Access the following properties on shopify to read the store's name, ID, myshopify.com domain, and storefront URL. Available to purchase extension targets.

Anchor to shop shop required: The store where the checkout is taking place, including the shop name, storefront URL, .myshopify.com subdomain, and a globally-unique ID.

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 function extension() {

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.

</s-text>

</s-stack>

</s-box>

);

}

Examples

Description

Show the store name to reinforce brand trust during checkout. This example reads `shopify.shop` and renders a welcome message with the shop's name.

jsx

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

export default function extension() {
  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.
        </s-text>
      </s-stack>
    </s-box>
  );
}

Description

Send the shop ID to your application server to associate checkout activity with the correct store. This example reads `shopify.shop.id` and posts it to a backend endpoint.

jsx

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

export default function extension() {
  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({
            shopId: shop.id,
          }),
        },
      );
      setStatus('synced');
    } catch {
      setStatus('error');
    }
  }

  if (status === 'error') {
    return (
      <s-banner tone="critical">
        Sync failed. Please try again.
      </s-banner>
    );
  }

  return (
    <s-button
      disabled={status === 'syncing'}
      onClick={syncWithBackend}
    >
      {status === 'synced'
        ? 'Synced'
        : 'Sync account'}
    </s-button>
  );
}

Anchor to Best practicesBest practices

Cache shop data for the session: The shop's name, domain, and ID don't change during a checkout session. Read them once and avoid redundant reactive subscriptions.
Don't expose the internal shop ID to buyers: shopify.shop.id is a Shopify Global ID intended for backend use. Display the shop name or domain instead of the ID when building buyer-facing UI.

Was this page helpful?