How to use environment variables in Checkout UI Extension apps

Shopify Apps

Topic summary

Developers are struggling to use environment variables in Shopify Checkout UI Extensions, particularly for managing different API URLs across development, staging, and production environments.

Core Issue:

  • Environment variables documented in Shopify CLI (like SHOPIFY_FLAG_VERSION) don’t work as expected when added to .env files
  • Checkout UI Extensions run on Shopify’s infrastructure, not the app’s environment, preventing direct access to environment variables
  • Using process.env causes “process is undefined” errors in production

Workarounds Proposed:

  • Shop Metafields: Store environment-specific values in shop metafields (avoids merchant-facing settings)
  • Template File + envsubst: Generate a config TypeScript file at build time using envsubst to inject environment variables into committed template files
  • Multiple .env Files: Use separate .env files per configuration (e.g., .env.appname-staging) with shopify app env pull

Current Status:
No native Shopify solution exists. The discussion remains open with developers seeking a more official approach rather than relying on custom scripts or workarounds. The template file approach appears most reliable for production deployments.

Summarized with AI on October 25. AI used: claude-sonnet-4-5-20250929.
10

Yes, this should work in production. If you are using multiple configurations (e.g. for staging and production, etc), check that you have a respective .env file configured for each (after switching what config you are using the config commands) and that you have added your custom values to it. Once you add them to each, it should work.

For example, if you have a staging config like shopify.app.appname-staging then your env file name might look like .env.appname-staging after running the env pull command.

shopify app env pull

https://shopify.dev/docs/api/shopify-cli/app/app-config-use

https://shopify.dev/docs/api/shopify-cli/app/app-env-pull

Hope this helps anyone else who is seeing the process undefined errors in the browser console.

1 Like