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:

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.

​1. Shopify Store Domain

• 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

​2. If you are using the Hydrogen App (skip step 3 below)

• 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.

​3. If you are using the Headless App (skip step 2 above)

• 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

• 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)

• 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. 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 and ask them to Expose Shopify Metafields for you, they will quickly and enthusiastically help you.