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 apiKeyapiKeyapiKeystringstringrequiredrequired
The client ID provided for your application in the Partner Dashboard.
This needs to be provided by the app developer.
- Anchor to appOriginsappOriginsappOriginsstring[]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 debugdebugdebugDebugOptionsDebugOptions
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 disabledFeaturesdisabledFeaturesdisabledFeaturesstring[]string[]
The features to disable in your app.
This allows app developers to opt-out of features such as
fetch.- Anchor to experimentalFeaturesexperimentalFeaturesexperimentalFeaturesstring[]string[]
The experimental features to enable in your app.
This allows app developers to opt-in to experiement features.
- Anchor to hosthosthoststringstring
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 localelocalelocalestringstringDefault: 'en-US'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 shopshopshopstringstring
The shop origin of the shop that's embedding your app.
This does not need to be provided by the app developer.
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
Examples
Shop
Default
shopify.config.shop; // => 'your-shop-name.myshopify.com'shop
Description
Retrieving the shop origin
Default
shopify.config.shop; // => 'your-shop-name.myshopify.com'host
Description
Retrieving the host
Default
shopify.config.host;locale
Description
Retrieving the locale
Default
shopify.config.locale;apiKey
Description
Retrieving the apiKey
Default
shopify.config.apiKey;disabledFeatures
Description
Retrieving the disabledFeatures
Default
shopify.config.disabledFeatures;appOrigins
Description
Retrieving the appOrigins
Default
shopify.config.appOrigins;debug
Description
Configuration for debugging apps.
Default
shopify.config.debug; // => { webVitals: false }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>