Environment variables in Theme App Extension

Retired Boards Appdev Store Design

Topic summary

Developers are seeking ways to use environment variables within Shopify Theme App Extensions, specifically in app-embed.liquid files where JavaScript needs different configurations for development and production environments.

Problem:

  • Need to access environment variables inside <script> tags within liquid files
  • Variables differ between development and production
  • No straightforward solution exists for traditional .env file usage in Theme App Extensions

Proposed Solutions:

Proxy-based approach (felixdb):

  • Set up App Proxy destinations per app in Partner Dashboard (App setup > App proxy)
  • Each app can have its own proxy destination with a shared request path
  • Works for request-related variables but not general environment variables
  • Reference: Shopify product-reviews-sample-app example

CI/CD pipeline approach (gidizim):

  • Add environment variables to CI/CD pipeline
  • Create bash script (e.g., create-url.sh) that accepts URL as parameter
  • Add script command to package.json (e.g., code:<environment>)
  • Script inserts correct URL into files before deployment
  • Call appropriate script via environment name in pipeline

Status: Multiple users are still seeking solutions, indicating this remains an ongoing challenge without a definitive best practice.

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
1

I’m implementing Theme App Extension with app embed block. I’m using tag inside app-embed.liquid to access the Shopfiy product or shop JSON. Inside this script, I need to use some environment variables that can be set at .env file because the variables are different in development and production. How can I access the env variables in script tag in a liquid file? Or there is a way to switch between development and production environments? Please let me know. Thank you.

app-embed.liquid:

10 Likes
2

Did you find a good solution for this?

1 Like
3

yo anyone solved this?

1 Like
4

This solution would not work for any environment variable (I couldn’t find a solution for that) but will work for anything related to a request, which is what you need in the provided example. You can see in the Shopify example app that they are making the request to a proxy URL (“/apps/prapp/reviews”). You can set the proxy destination in your Partners dashboard on a per app basis, in App setup > App proxy. Every app can have their own proxy destination, but keep a shared request path that will be in your JS file. Hope this helps!

2 Likes
5

Anyone found a good solution to this topic?

6

The solution is that you can not simply specify url per envrionment.

  1. Add the environment variable to your CI/CD pipeline

  2. Create a bash script called XXX.sh that takes a url as a paramater. For example you can run something like create-url.sh

  3. Add the command to call the script to your package .json like this. code: when called via npm or yarn should run the bash script. You can hard code the url.

  4. In your CI/CD pipeline, call the correct script via env name. ie. in Staging pipeine, run yarn code:staging which will call the bash script and insert the correct url in the file for use prior to deploying the extension.