Create and use environment variables
Environment variables are accessed through Oxygen environments, and are created or imported using the Hydrogen channel interface.
What you'll learn
Anchor link to section titled "What you'll learn"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.
Requirements
Anchor link to section titled "Requirements"- 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.
Step 1: Create an environment variable
Anchor link to section titled "Step 1: Create an environment variable"- From your Shopify admin, under Sales channels, click Hydrogen.
- From the Hydrogen storefront page, click the storefront that you want to change.
- Click Storefront settings > Environments and variables.
- Beside Variables, click Add variable.
- Under Key, type
MY_STORE_NAME
. - Under Value, type
My great shoe store
. - Under Environments, click Search for environments.
- Check Production.
- Click Save.
Step 2: Add your environment variable to your Hydrogen storefront code
Anchor link to section titled "Step 2: Add your environment variable to your Hydrogen storefront code"- In the default branch of Git repository that contains Hydrogen storefront code, open the
src/components/Welcome.server.jsx
file. - Find the line that contains
Hello, Hydrogen
. - Change
Hello, Hydrogen
toHello. Welcome to {Oxygen.env.MY_STORE_NAME}.
. - Save and exit the file.
- Run
git add .
. - Run
git commit -m "Added my environment variable"
. - 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.
Step 3: Preview your modified Hydrogen storefront
Anchor link to section titled "Step 3: Preview your modified Hydrogen storefront"- From your Shopify admin, under Sales channels, click Hydrogen.
- From the Hydrogen storefront page, click the storefront that you want to change.
- Under Production, click Added my environment variable.
- 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.