Config

The config API stores the initial configuration information for your app and lets you synchronously retrieve it.

Anchor to configConfig

The config API is available on the shopify global. It stores the initial configuration information for your app and shop.

Anchor to apiKey apiKey string required: The client ID provided for your application in the Partner Dashboard.

This needs to be provided by the app developer.
Anchor to appOrigins appOrigins string[]: An allowlist of origins that your app can send authenticated fetch requests to.

This is useful if your app needs to make authenticated requests to a different domain that you control.
Anchor to debug debug: Configuration options for enabling debug features within the app. Includes options for monitoring performance metrics, such as web vitals.

Recommended for use during development and debugging to aid in identifying and resolving performance issues.

Generally not recommended for long-term use in production environments.
Anchor to disabledFeatures disabledFeatures string[]: The features to disable in your app.

This allows app developers to opt-out of features such as fetch.
Anchor to experimentalFeatures experimentalFeatures string[]: The experimental features to enable in your app.

This allows app developers to opt-in to experiement features.
Anchor to host host string: The base64-encoded host of the shop that's embedding your app.

This does not need to be provided by the app developer.
Anchor to locale locale string Default: 'en-US': The locale of the shop that's embedding your app.

This does not need to be provided by the app developer.
Anchor to shop shop string: The shop origin of the shop that's embedding your app.

This does not need to be provided by the app developer.

AppBridgeConfig

apiKey
The client ID provided for your application in the Partner Dashboard. This needs to be provided by the app developer.
```
string
```
appOrigins
An allowlist of origins that your app can send authenticated fetch requests to. This is useful if your app needs to make authenticated requests to a different domain that you control.
```
string[]
```
debug
Configuration options for enabling debug features within the app. Includes options for monitoring performance metrics, such as web vitals. Recommended for use during development and debugging to aid in identifying and resolving performance issues. Generally not recommended for long-term use in production environments.
```
DebugOptions
```
disabledFeatures
The features to disable in your app. This allows app developers to opt-out of features such as <code>fetch</code>.
```
string[]
```
experimentalFeatures
The experimental features to enable in your app. This allows app developers to opt-in to experiement features.
```
string[]
```
host
The base64-encoded host of the shop that's embedding your app. This does not need to be provided by the app developer.
```
string
```
locale
The locale of the shop that's embedding your app. This does not need to be provided by the app developer.
```
string
```
shop
The shop origin of the shop that's embedding your app. This does not need to be provided by the app developer.
```
string
```

export interface AppBridgeConfig {
  /**
   * The client ID provided for your application in the Partner Dashboard.
   *
   * This needs to be provided by the app developer.
   */
  apiKey: string;
  /**
   * An allowlist of origins that your app can send authenticated fetch requests to.
   *
   * This is useful if your app needs to make authenticated requests to a different domain that you control.
   */
  appOrigins?: string[];
  /**
   * Configuration options for enabling debug features within the app.
   * Includes options for monitoring performance metrics, such as web vitals.
   *
   * Recommended for use during development and debugging to aid in identifying and resolving performance issues.
   *
   * Generally not recommended for long-term use in production environments.
   *
   */
  debug?: DebugOptions;
  /**
   * The features to disable in your app.
   *
   * This allows app developers to opt-out of features such as <code>fetch</code>.
   */
  disabledFeatures?: string[];
  /**
   * The experimental features to enable in your app.
   *
   * This allows app developers to opt-in to experiement features.
   */
  experimentalFeatures?: string[];
  /**
   * The base64-encoded host of the shop that's embedding your app.
   *
   * This does not need to be provided by the app developer.
   */
  host?: string;
  /**
   * The locale of the shop that's embedding your app.
   *
   * This does not need to be provided by the app developer.
   * @defaultValue 'en-US'
   */
  locale?: string;
  /**
   * The shop origin of the shop that's embedding your app.
   *
   * This does not need to be provided by the app developer.
   */
  shop?: string;
}

DebugOptions

webVitals
Enables or disables the logging of web performance metrics (Web Vitals) in the browser's console. When set to `true`, the app will log Core Web Vitals (such as LCP, INP, and CLS) and other relevant performance metrics to help developers understand the real-world performance of their app. This can be useful for debugging performance issues during development or in a staging environment. This field is optional and defaults to `false`, meaning that web vitals logging is disabled by default to avoid performance overhead and unnecessary console output in production environments.
```
boolean
```

interface DebugOptions {
  /**
   * Enables or disables the logging of web performance metrics (Web Vitals) in the browser's console.
   *
   * When set to `true`, the app will log Core Web Vitals (such as LCP, INP, and CLS) and other relevant performance metrics to help developers understand the real-world performance of their app. This can be useful for debugging performance issues during development or in a staging environment.
   *
   * This field is optional and defaults to `false`, meaning that web vitals logging is disabled by default to avoid performance overhead and unnecessary console output in production environments.
   * @defaultValue false
   */
  webVitals?: boolean;
}

Was this section helpful?

Shop

shopify.config.shop;

// => 'your-shop-name.myshopify.com'

Anchor to examplesExamples

Retrieving config values

Anchor to example-retrieving-config-valuesRetrieving config values

Anchor to example-shopShop

Retrieving the shop origin

Anchor to example-hostHost

Retrieving the host

Anchor to example-localeLocale

Retrieving the locale

Anchor to example-apikeyApiKey

Retrieving the apiKey

Anchor to example-disabledfeaturesDisabledFeatures

Retrieving the disabledFeatures

Anchor to example-apporiginsAppOrigins

Retrieving the appOrigins

Anchor to example-debugDebug

Configuration for debugging apps.

Was this section helpful?

Shop

shopify.config.shop;

// => 'your-shop-name.myshopify.com'

examples

shop

description

Retrieving the shop origin

shopify.config.shop;
// => 'your-shop-name.myshopify.com'

host
description
Retrieving the host
```
shopify.config.host;
```
locale
description
Retrieving the locale
```
shopify.config.locale;
```
apiKey
description
Retrieving the apiKey
```
shopify.config.apiKey;
```
disabledFeatures
description
Retrieving the disabledFeatures
```
shopify.config.disabledFeatures;
```
appOrigins
description
Retrieving the appOrigins
```
shopify.config.appOrigins;
```

debug

description

Configuration for debugging apps.

shopify.config.debug;
// => { webVitals: false }

Anchor to example-setting-config-valuesSetting config values

Anchor to example-apikeyApiKey

Setting the apiKey

Anchor to example-disabledfeaturesDisabledFeatures

Setting the disabledFeatures

Anchor to example-apporiginsAppOrigins

Setting the appOrigins

Anchor to example-debugDebug

Enabling Debug Features for Performance Monitoring

Was this section helpful?

ApiKey

meta tag

<head>

</head>

examples

apiKey

description

Setting the apiKey

meta tag

<head>
  <meta name="shopify-api-key" content="%SHOPIFY_API_KEY%" />

  <script src="https://cdn.shopify.com/shopifycloud/app-bridge.js" />
</head>

disabledFeatures

description

Setting the disabledFeatures

single feature

<head>
  <meta name="shopify-disabled-features" content="fetch" />

  <meta name="shopify-api-key" content="%SHOPIFY_API_KEY%" />
  <script src="https://cdn.shopify.com/shopifycloud/app-bridge.js" />
</head>

multiple features

<head>
  <meta name="shopify-disabled-features" content="fetch, auto-redirect" />

  <meta name="shopify-api-key" content="%SHOPIFY_API_KEY%" />
  <script src="https://cdn.shopify.com/shopifycloud/app-bridge.js" />
</head>

appOrigins

description

Setting the appOrigins

single origin

<head>
  <meta name="shopify-app-origins" content="https://example.com" />

  <meta name="shopify-api-key" content="%SHOPIFY_API_KEY%" />
  <script src="https://cdn.shopify.com/shopifycloud/app-bridge.js" />
</head>

multiple origins

<head>
  <meta
    name="shopify-app-origins"
    content="https://example.com,https://example.net"
  />

  <meta name="shopify-api-key" content="%SHOPIFY_API_KEY%" />
  <script src="https://cdn.shopify.com/shopifycloud/app-bridge.js" />
</head>

debug

description

Enabling Debug Features for Performance Monitoring

Web Vitals

<head>
  <meta name="shopify-debug" content="web-vitals" />

  <meta name="shopify-api-key" content="%SHOPIFY_API_KEY%" />
  <script src="https://cdn.shopify.com/shopifycloud/app-bridge.js" />
</head>