# Step 2. Setup environment variables.

To streamline the setup process, we will first list all necessary environment variables required for configuration. Subsequently, we’ll provide detailed instructions on how to obtain each of these variables.

> **Note:** By default, your commerce application runs in **demo mode**. To access all features, ensure the following variables are set in your `.env.local` or `.env`

Below is the list of environment variables that you’ll need to configure in your `.env.local` file for the proper setup of your enterprise commerce system:

```bash

PRIVATE_STOREFRONT_API_TOKEN="your_private_storefront_api" # e.g. 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
PUBLIC_STOREFRONT_API_TOKEN="your_public_storefront_api"
PUBLIC_STORE_DOMAIN="your_store_domain" # e.g. hydrogen-preview.myshopify.com
PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID="your_customer_account_api_client_id" # e.g. shp_ad7f793c-461f-4cec-bf1b-cxcxcxcxcxcx
PUBLIC_CUSTOMER_ACCOUNT_API_URL="https://shopify.com/xxxxxxxxxx" # e.g. https://shopify.com/68849271039
SESSION_SECRET="foobar"
PUBLIC_STOREFRONT_ID="foobar"
PUBLIC_CHECKOUT_DOMAIN=checkout.hydrogen.shop
PUBLIC_STORE_CDN_STATIC_URL="your_public_store_cnd_static_url" # e.g. https://cdn.shopify.com/s/files/1/1234/1234/1234/files/
PUBLIC_IMAGE_FORMAT_FOR_PRODUCT_OPTION='png'  # png/jpg/jpeg/webp/svg...
# OKENDO API (Optional)
PUBLIC_OKENDO_SUBSCRIBER_ID = "your_okendo_subscriber_id" # e.g. '0ddd53c2-21a9-455d-bf58-cxcxcxcxcxc'

```

Replace all environment variables with the actual values that you will obtain through the setup process described below.

#### [​](https://docs.commerce.blazity.com/setup#1-shopify-store-domain)1. Shopify Store Domain <a href="#id-1-shopify-store-domain" id="id-1-shopify-store-domain"></a>

* **Variable Required:** `PUBLIC_STORE_DOMAIN`
* **How to Obtain:**
  * Your Shopify store domain is the URL of your Shopify store. You can obtain it in the Shopify dashboard, it should be without `https` and `/` at the end of the string. Example: `cool-socks.myshopify.com`

#### [​](https://docs.commerce.blazity.com/setup#2-headless-app)2. If you are using the `Hydrogen App` (skip step 3 below) <a href="#id-2-headless-app" id="id-2-headless-app"></a>

* **Variable Required:** `PRIVATE_STOREFRONT_API_TOKEN, PUBLIC_STOREFRONT_API_TOKEN, PUBLIC_STORE_DOMAIN, PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID, PUBLIC_CUSTOMER_ACCOUNT_API_URL, SESSION_SECRET` and `PUBLIC_STOREFRONT_ID`
* **Installation and Configuration:**
  1. Visit the Shopify Marketplace and search for the Hydrogen commerce application or navigate directly to <https://apps.shopify.com/hydrogen>
  2. Install the application, open it, and create a new Storefront within the app, and connect to your hydrogen GitHub repo. If you're testing in the development store, use the **Headless** app instead.
  3. Select Hydrogen storefront and then click the **Storefront settings** button. In Storefront settings, you can see environment variables `PRIVATE_STOREFRONT_API_TOKEN, PUBLIC_STOREFRONT_API_TOKEN, PUBLIC_STORE_DOMAIN, PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID, PUBLIC_CUSTOMER_ACCOUNT_API_URL, SESSION_SECRET` and `PUBLIC_STOREFRONT_ID` already set up. You just need to copy them and replace them in your .env.local file if you want to run the project on localhost.

#### [​](https://docs.commerce.blazity.com/setup#2-headless-app)3. If you are using the `Headless App` (skip step 2 above) <a href="#id-2-headless-app" id="id-2-headless-app"></a>

* **Variable Required:** `SHOPIFY_STOREFRONT_ACCESS_TOKEN, PRIVATE_STOREFRONT_API_TOKEN, PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID, PUBLIC_CUSTOMER_ACCOUNT_API_URL`
* You can only operate this application in development mode at **localhost** or when you want to host the Hydrogen application yourself without hosting it at Oxygen. In the context of the Ciseco project, I will support you best when you implement the project with Oxygen.
* **Installation and Configuration:**
  1. Visit the Shopify Marketplace and search for the Headless commerce application or navigate directly to <https://apps.shopify.com/headless>.
  2. Install the application, open it, and create a new Storefront within the app.
  3. In the “Manage API Access” section, click on the `Manage` button next to **Storefront API**.
  4. Make sure you have enabled `unauthenticated_read_product_inventory` , `unauthenticated_read_metaobjects`, and `unauthenticated_read_customer_tags` scopes
  5. Copy the **Public access token** and **Private access token** displayed and place them in your `.env` file under `PUBLIC_STOREFRONT_API_TOKEN` and `PRIVATE_STOREFRONT_API_TOKEN`.
  6. Go back and in the “Manage API Access” section, click on the `Manage` button next to **Customer Account API.**
  7. Copy the **Client ID** displayed and place them in your `.env` file under `PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID`\
     Scroll to the **Application endpoints** section, copy the **Authorization endpoint** as "*<https://shopify.com/1234567889/auth/oauth/authorize>"*, but remove the "*/auth/oauth/authorize*" path, and keep the API account URL *"<https://shopify.com/1234567889>"* and place it in your `.env` file under `PUBLIC_CUSTOMER_ACCOUNT_API_URL`

#### 4. Shopify Store CDN Static Url and Product options image format (Optional) [display-the-color-variant-options-as-image-swatch](https://nghiaxchis.gitbook.io/ciseco-hydrogen-shopifys-headless-theme/cisecos-features/display-the-color-variant-options-as-image-swatch "mention") <a href="#id-1-shopify-store-domain" id="id-1-shopify-store-domain"></a>

* **Variable Required:** `PUBLIC_STORE_CDN_STATIC_URL, PUBLIC_IMAGE_FORMAT_FOR_PRODUCT_OPTION`
* **How to Obtain:**
  * This is only useful if your products have **Color** variations, otherwise, you can skip this step and leave these 2 env variable values blank.
  * The Ciseco theme will display product color options with images. So, when your products have Color variations with values like: "Black", "Red", "Pink and White", etc. Then you will need to upload image files with the same name as those color values (replace spaces with underscores): *Red.png, Pink\_and\_White.png...*\
    However, you can use images in **png, jpg, jpeg, svg** or **webp**... as desired. You just need to replace the format for the variable `PUBLIC_IMAGE_FORMAT_FOR_PRODUCT_OPTION`
  * You can find this value by going to **Content** -> **Files**, then copying the link of any image, you will get a link like this: "*<https://cdn.shopify.com/s/> files/1/1234/1234/1234/files/image.jpg?v=123456789*", remove the name "*image.jpg?v=123456789*" and keep "*<https://cdn.shopify.com/s/> files/1/0586/7674/0198/files/*", then copy and place into variable `PUBLIC_STORE_CDN_STATIC_URL`\
    Please note, it should be with `https` and `/` at the end of the string.

#### 5. Okendo App Subscriber ID (Optional) <a href="#id-1-shopify-store-domain" id="id-1-shopify-store-domain"></a>

* **Variable Required:** `PUBLIC_OKENDO_SUBSCRIBER_ID`
* **How to Obtain:**
  * This is only useful if you want to use the product review feature of the Okendo app. Otherwise, you can skip this step and leave the variable value blank.
* **Installation and Configuration:**
  1. Visit the Shopify Marketplace and search for the **Okendo: Product Reviews & UGC** application or navigate directly to  <https://apps.shopify.com/okendo-reviews>
  2. Install the application, open it, and click the **Open Okendo Platform** button.
  3. On **Okendo App** > **Settings** > **Integrations > Credentials** > **Okendo** > Click edit button then copy the User ID and place it in your `.env` file under `PUBLIC_OKENDO_SUBSCRIBER_ID`
  4. **Expose Shopify Metafields:** Okendo Reviews uses Product and Shop [metafields](https://shopify.dev/api/examples/metafields). You will need to expose these metafields so that they can be retrieved by your Hydrogen app.

     At the moment, Shopify does not have a way of exposing Shop Metafields through their admin UI, so the preferred method is to [contact Okendo Support](mailto:support@okendo.io) and ask them to **Expose Shopify Metafields** for you, they will quickly and enthusiastically help you.