Shopify Development Hacks : Environment Variable in Checkout UI Extension

Feb 17, 2024
Aisya AzizFounding Engineer

Checkout UI Extension does not support environment variables since the extension runs in a sandbox on the browser. This becomes super frustrating as there are so many cases where we would need to modify the variables based on the environment. Here's a way to do it Shopify-style!



Shopify Development Hacks with Aisya Aziz

It has been a super frustrating couple of weeks figuring out how to include some sort of "env variables" in the Checkout UI Extension.

Luckily for you, I've gone through several blogs and posts and have finally figured out the best way to do it! The Checkout UI extension is a little different from the normal Shopify app. It runs in a sandbox on the browser and thus doesn't have access to the environment variables in the app. If you use Remix to build your extension, you could see that your codes will be compiled into one js file which would then be placed at the placeholder on the Checkout page.

So what's the hack?

I started off using settings. (Read more here: ). The thing about settings is that it's user-defined (i.e. merchant will need to set the value at the checkout editor). So if you're trying to set something like the App URL, it works, but it will be prone to issues like wrongly set URL, etc.

What works for me, is the Metafields.

So what is a Metafield? (Read more here:

While a Metafield is usually used to add additional property to products, customers, companies, etc, there is also an option to add a Metafield to the shop. However, this would require the Admin GraphQL API.

  1. From your app (not your Checkout UI Extension), you could set the Metafield, here's a snapshot of the GraphQL mutation:

await graphql(

 ` mutation metafieldsSet($metafields: [MetafieldsSetInput!]!) {

    metafieldsSet(metafields: $metafields) {

      metafields {







      userErrors {







    variables: {

      metafields: \[


          key: "your-key",

          namespace: "your-namespace",


          type: "url",

          value: "your-value",






You could call this during installation, or any point you find appropriate!

(Side note: you can use the same mutation to set the metafield for product, etc. Just make sure you supply the respective id to "ownerId" property)

  1. Once this is set, in your .toml file, you would need to add the metafield. Here's an example of how it looks like. Remember to position it under [[extensions.targeting]] block:


module = "./src/your-file.jsx"

target = "purchase.checkout.reductions.render-after"


namespace = "your-namespace"

key = "your-key"

Once this is done, you are super close to getting the value!

  1. In your Checkout UI Extension file, remember to:

a) Import useAppMetafields

import { useAppMetafields, } from "@shopify/ui-extensions-react/checkout";

b) Get the value:

const metaFields = useAppMetafields();

const metaField = metaFields.find((x) => x.metafield.namespace == "your-namespace" && x.metafield.key == "your-key")?.metafield;

const metaFieldValue = metaField.value;

That's it! Super easy and quick.

Let me know if this approach works for you (or doesn't)!

If you are a retailer in need of a return management solution, check us out at

Till the next hack!


Related Posts

< Prev

Explore LiquiDonate with a Personalized Demo

See how Magic Matches and the Self Serve tool can easily transform your excess inventory into social impact.