Create and use environment variables

In this tutorial, you'll learn how to do the following tasks:

• Create a new environment variable.
• Toggle the secrecy of the environment variable.
• Use an environment variable in Hydrogen storefront code.
• Deploy and preview your Hydrogen storefront that's been populated with your environment variable.

• You have access to the Shopify admin of the store that you're working with.
• You've connected a storefront through the Hydrogen channel.
• You're familiar with the concept of environment variables.

1. From your Shopify admin, under Sales channels, click Hydrogen.
2. From the Hydrogen storefront page, click the storefront that you want to change.
3. Click Storefront settings.
4. In the Environments and variables section, beside Variables, click Add variable.
5. Under Key, type MY_STORE_NAME.
6. Under Value, type My great shoe store.
7. Under Environments, click Search for environments.
8. Check Production.
9. Click Save.

1. In the default branch of Git repository that contains Hydrogen storefront code, open the src/components/Welcome.server.jsx file.
2. Find the line that contains Hello, Hydrogen.
3. Change Hello, Hydrogen to Hello. Welcome to {Oxygen.env.MY_STORE_NAME}..
4. Save and exit the file.
5. Run git add ..
6. Run git commit -m "Added my environment variable".
7. Run git push.

After pushing your changes to your Git repository, you'll have to wait until the deploy completes before you can preview your modified Hydrogen storefront. When your changes are ready to be previewed, you can find your Git commit message under Production.

1. From your Shopify admin, under Sales channels, click Hydrogen.
2. From the Hydrogen storefront page, click the storefront that you want to change.
3. Under Production, click Added my environment variable.
4. Under Deployment URL, click the URL.

You can now find your welcome message on the deployment URL page, reading "Hello. Welcome to My great shoe store".

• Learn how to create custom environments and use them to preview changes without affecting other environments.
• Learn how to roll back to a previous deployment when a bug or error exists on the most recent deployment while you work on a fix.
• Learn how to toggle the privacy of your preview URLs.