How can I insert dynamic values in Javascript with App Embed Blocks?

Technical Q&A
,

Topic summary

Migrating from Script Tags/Assets to App Embed Blocks raised a blocker: injecting per-store dynamic values into JavaScript.

Resolution shared: use App Data Metafields (app-scoped custom data). Set the metafields during app installation, then reference them in the theme app extension via app.metafields in Liquid to pass store-specific values into your JS.

Alternative patterns suggested:

  • Define a namespaced global on window in the Liquid block and read it in JS assets (avoids collisions, simple for a few values).
  • Encode values as HTML attributes in the Liquid block and read them from the DOM in JS (useful for targeting specific elements/instances). A Shopify sample app demonstrates this approach.

Outcome: Practical approaches identified; the original poster resumed migration using App Data Metafields. No unresolved disagreements; thread effectively resolved with multiple implementation options.

Summarized with AI on December 20. AI used: gpt-5.
1

Hello,

We are currently in the process of moving our app installation from using Script Tags/Assets to App Embed Blocks. Our app primarily just inserts Javascript into the head of the theme. The problem I am running into is that our Javascript requires dynamic values that are unique for each store. With Assets it was trivial to make those values dynamic, but I don’t see any way to do this with App Embed Blocks/Theme Extensions. Our Javascript will not function without these values. It seems like other users have run into this issue without much luck (https://community.shopify.com/post/1386619 https://community.shopify.com/post/1331371).

Hoping someone can advise us here.

Thanks!

2

Hello @Britainjs ,

I’m facing the same your issue. Did you have any solution? Please help me

Best Regards

3

any luck with this?

4

We put the migration on hold for a while, but we were able to eventually find a solution in App Data Metafields (https://shopify.dev/docs/apps/custom-data/metafields/app-data). We set the metafields during the app installation process and are then able to reference them using the app.metafields liquid variables. For example:

{{ app.metafields.
1 Like
5

The easiest way seems to be defining a global variable on window in your liquid file and reading it in JS assets. You could also have a top-level unique name to avoid collisions and wrap a bunch of variables. Your liquid block:

Alternately, a Shopify demo uses html attributes and reads them from the DOM (liquid block and js asset). This seems useful to find specific pieces of data in the DOM structure (e.g. loop over all products).