--- title: Config API description: >- The config API provides synchronous access to configuration values for your app and for the shop it's embedded in. Some values, such as shop, host, and locale, are automatically set by the host environment. api_version: v1.0 source_url: html: >- https://shopify.dev/docs/api/app-home/latest/apis/authentication-and-data/config-api md: >- https://shopify.dev/docs/api/app-home/latest/apis/authentication-and-data/config-api.md api_name: app-home --- # Config API **Info:** App Bridge isn't versioned with Polaris. App Bridge APIs and web components are identical in every App Home reference version. The `config` API provides synchronous access to configuration values for your app and for the shop it's embedded in. Some values, such as `shop`, `host`, and `locale`, are automatically set by the host environment. For other values, such as `apiKey`, `disabledFeatures`, and `appOrigins`, you configure them using `` tags. ### Use cases * **Shop identification:** Retrieve the current shop's myshopify.com domain for API calls or display purposes. * **App context:** Access app configuration like API key and locale settings synchronously. * **Initialization:** Read initial configuration values during app startup without awaiting async calls. * **Feature detection:** Check disabled features to adapt app behavior based on configuration. ### Properties The `config` API is available on the `shopify` global. All properties are synchronous and available immediately without awaiting a Promise. * **api​Key** **string** **required** The client ID (also known as the API key) for your application, found in the Shopify Partner Dashboard under your app's settings. You must provide this value using a `` tag. * **app​Origins** **string\[]** An allowlist of origins that your app can send authenticated fetch requests to. Set this property if your app needs to make authenticated requests to a domain other than your app's origin. Requests to your app's own domain (and its subdomains) are automatically allowed. Each value must be an origin in the format `scheme://hostname` or `scheme://hostname:port` (for example, `'https://example.com'` or `'https://example.com:8443'`). * **debug** **DebugOptions** Configuration for enabling Web Vitals performance logging. Use this property during development for identifying performance issues. * **disabled​Features** **string\[]** An array of App Bridge feature names to disable in your app. Supported values: * `'fetch'` — Disables App Bridge's automatic fetch interceptor, which adds authentication headers to requests to the Shopify Admin API. * `'auto-redirect'` — Disables automatic redirection when the app is loaded outside of the Shopify Admin. * **host** **string** The base64-encoded host of the shop that's embedding your app. When decoded, the value has the format `admin.shopify.com/store/{shop-name}`. This property is automatically set by the host environment. * **locale** **string** **Default: 'en-US'** The locale of the admin user viewing your app, as an IETF BCP 47 language tag (for example, `'en-US'`, `'fr-FR'`, `'ja-JP'`). This reflects the language the merchant has chosen for the Shopify admin, not the shop's customer-facing locale. This property is automatically set by the host environment. * **shop** **string** The permanent `.myshopify.com` domain of the shop that's embedding your app (for example, `'my-store.myshopify.com'`). This is always the Shopify-assigned domain, not a custom domain. This property is automatically set by the host environment. ### 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. ```ts boolean ``` Examples ### Examples * #### ##### Description Access configuration values. This example reads all available config properties from the \`shopify\` global, including the current shop domain, locale, API key, disabled features, allowed origins, and debug settings. Use this to inspect the current environment your app is running in. ##### js ```js shopify.config.shop; // => 'my-store.myshopify.com' shopify.config.locale; // => 'en-US' shopify.config.apiKey; // => 'your-client-id' shopify.config.disabledFeatures; // => ['fetch'] shopify.config.appOrigins; // => ['https://example.com'] shopify.config.debug; // => { webVitals: false } ``` * #### ##### Description Provide your app's client ID using a meta tag so that App Bridge can identify your app and authenticate requests on your behalf. You can find this value in the Shopify Partner Dashboard under your app's settings. ##### html ```html ``` * #### ##### Description Opt out of App Bridge's automatic authentication of fetch requests. This is useful if your app handles authentication manually or uses a custom fetch implementation. ##### html ```html ``` * #### ##### Description Disable more than one App Bridge feature by providing a comma-separated list in the meta tag content attribute. ##### html ```html ``` * #### ##### Description Add a domain to the allowlist so that App Bridge includes authentication headers when your app makes fetch requests to it. This is required for authenticated requests to any domain other than your app's own origin. ##### html ```html ``` * #### ##### Description Add multiple domains to the allowlist by providing a comma-separated list in the meta tag content attribute. ##### html ```html ``` * #### ##### Description Turn on Core Web Vitals logging in the browser console to help identify performance issues during development. This logs metrics such as LCP, INP, and CLS. Not recommended for production use. ##### html ```html ``` ***