# Installation

1\. **Download latest theme file**

After you complete the purchase, you would see the download package displayed in the ***My Account / Downloads*** section.

<https://store.truestorefront.com/my-account/downloads/>

***\*Note**: If you do not see this download package displayed in the My Account / Downloads section, please* [*contact us*](https://truestorefront.com/contact) *for further checking.*

Please extract the download package which you just downloaded from ***store.*****truestorefront.com**:

<figure><img src="/files/IlV6xTZbnOsfvNhJJfQl" alt=""><figcaption></figcaption></figure>

### 2. **Setup Sanity Studio for CMS**

\*Note: Before continue, please make sure that you have installed [Sanity CLI](https://www.npmjs.com/package/@sanity/cli) in your system.

Please extract **owen-sanity-studio.zip**

<figure><img src="/files/o5Sne8uLhxd1vjVCktPy" alt=""><figcaption></figcaption></figure>

Update environment variables in **sanity.config.ts** and **sanity.cli.ts**

<figure><img src="/files/FlytwHo4hbn8xvShfrHp" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/q8mjRMKD7EZnTvkZlVRd" alt=""><figcaption></figcaption></figure>

**Setup your language:**

Edit ***./languages.js*** file from root folder of your Sanity Studio then add your default languages and list of other languages you want to use for your store.

For example: Our store uses English as default language. So, the **./languages.js** file look like this:

<figure><img src="/files/RpiSI49g8l1wSNTdbEG2" alt=""><figcaption></figcaption></figure>

Open your command line then navigate to owen-sanity-studio directory:

`cd owen-sanity-studio`

Run this command within the owen-sanity-studio folder:

`npm install`

After that, run the command below to deploy to your Sanity Project:

`npm run deploy`

You have installed your Sanity Studio!

<figure><img src="/files/CSrHZT1tnC8m4bGLbGtF" alt=""><figcaption></figcaption></figure>

This video guides you on how to create a Sanity project and deploy Owen Sanity Studio:

{% embed url="<https://www.youtube.com/watch?v=T83deYTxcXQ>" %}

*Learn more:* [*https://www.sanity.io/docs/create-a-sanity-project*](https://www.sanity.io/docs/create-a-sanity-project)

You can install the Sanity app to synchronize products and collections to your Sanity project.

*Learn more:* [*https://www.sanity.io/docs/sanity-connect-for-shopify*](https://www.sanity.io/docs/sanity-connect-for-shopify)<br>

### 3. **Setup Supabase**

Create your Supabase account then add new project:

<https://supabase.com/dashboard/sign-up>

<figure><img src="/files/WOyFf69uMjohqb2VaiTJ" alt=""><figcaption></figcaption></figure>

Create Supabase database table to store product review data with this format:

<figure><img src="/files/p3LCaMEIiHyTecZ7pMiV" alt=""><figcaption></figcaption></figure>

Create two Supabase bucket folders "**image-review**" and "**returns**" to storing product review and order return images:

<figure><img src="/files/7rlr1xlLVPfaUNAGtFFU" alt=""><figcaption></figcaption></figure>

### 4. **Install the Owen theme**

**Step 1**: Change environment variables in **.env** file

You can store these variables in a **.env** file in the root of your project (for local development). The following is an example:

<figure><img src="/files/ZdV82kKPhu3A9A0JDjcX" alt=""><figcaption></figcaption></figure>

For production, please modify all Environments variables from your hosting provide.

Example for Oxygen environments variables config:

<figure><img src="/files/dJk8qzJaBq3nBS99NFli" alt=""><figcaption></figcaption></figure>

Example Vercel config:

<figure><img src="/files/lVok0mYxMtuROxyrqEJJ" alt=""><figcaption></figcaption></figure>

Environment variables enable you to load different values in your app depending on the environment it runs in. This guide describes the environment variables used in the Shopify storefront.

When you create a new Hydrogen app using the Owen templates, you should provide the following environment variables to your app:

* **PUBLIC\_STORE\_DOMAIN**: The domain of the store used to communicate with the Storefront API.
* **PUBLIC\_STOREFRONT\_API\_TOKEN**: The public access token for the Storefront API.
* **SESSION\_SECRET**: A secret used to sign session cookies. Refer to the Remix documentation on [using sessions](https://remix.run/docs/en/v1/utils/sessions) for more information.
* **PUBLIC\_CUSTOMER\_ACCOUNT\_API\_CLIENT\_ID**: Customer Account API credentials. Learn how to setup and get customer account API: <https://shopify.dev/docs/custom-storefronts/building-with-the-customer-account-api/getting-started>
* **PUBLIC\_CUSTOMER\_ACCOUNT\_API\_URL**: Customer Authorization endpoint. Learn more how to setup customer account API here: <https://bavaan.gitbook.io/owen-hydrogen-shopify-theme/setup-customer-account-api>
* **PRIVATE\_ADMIN\_API\_TOKEN**: Add your Shopify Admin API to use advanced Shopify features in Hydrogen (product review, return, order tracking...).
* **PRIVATE\_ADMIN\_API\_VERSION**: The Admin API version. It will using for Shopify Admin API query.
* **SANITY\_PROJECT\_ID**: Your Sanity Project ID that you have created on the above.
* **SANITY\_DATASET**: Your Sanity dataset.
* **SANITY\_API\_VERSION**: Your Sanity API version. Ex: 2023-03-30
* **SENDGRID\_API\_KEY**: Your SendGrid API key. We using [SendGrid](https://sendgrid.com/) service for contact form.
* **SUPABASE\_URL**: Your Supabase Project URL. You can find it from your Suppabase dashbroad > Project Settings > Configuration > API > Project URL.
* **SUPABASE\_PREFIX\_BUCKET**: Your Supbase bucket prefix. Ex: */storage/v1/object/public/*
* **SUPABASE\_API\_KEY**: Your Suppabase API key. You can find it from your Suppabase dashbroad > Project Settings > Configuration > API > Project API keys.
* **SUPABASE\_BUCKET\_IMAGE\_REVIEW**: Your Supabase bucket folder name is used for storing product review images. Ex: *image-review*
* **SUPABASE\_BUCKET\_RETURNS**: Your Supabase bucket folder name is used for storing order return images. Ex: *returns*

*Learn how to create Shopify Admin/Storefront API token in this article:*

{% embed url="<https://truestorefront.com/blog/how-to-create-shopify-admin-and-storefront-token-2023>" %}

**Step 2**: Change other variables in **theme.config.ts** file:

<figure><img src="/files/gpcBWI8zKV1yMlJIghPS" alt=""><figcaption></figcaption></figure>

* **storeDomain**: The domain of the store used to communicate with the Storefront API.
* **storeName**: Your store name. It will using for SEO page title. Ex: "Owen Store"
* **blogHandle**: Blog handle of your Shopify Store. It will using to fetch blog data.
* **sendGridEndpoint**: SendGrid api endpoint.
* **sendFromEmail**: The email address will be used to send an email after the customer submits a contact form.
* **sendToEmail**: The email address will be used to receive customer info sent from the contact form.
* **enableThankYou**: true/false to enable/disable thank you email when a customer submitted a contact form.
* **tawkPropertyId**: We are using [tawk.to](https://www.tawk.to/) for chat service. You can find property ID after creating a tawk.to account. Learn more the guide here: <https://help.tawk.to/article/where-can-i-find-the-property-and-widget-id>
* **tawkWidgetId**: Your tawk.to widget ID.

Open your command line then run command line below within **shopify-owen-hydrogen2-theme** directory:

`npm install`

Start the development server:

`npm run dev`

\
You have installed the Owen Hydrogen theme on the development server!


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://truestorefront.gitbook.io/owen-hydrogen-shopify-theme/installation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.