# Step 1. Getting started with Ciseco - Hydrogen and Oxygen
{% hint style="info" %}
This tutorial will walk you through the process of creating the Ciseco Hydrogen storefront, linking it to your Shopify store, and then deploying it to Oxygen.
{% endhint %}
### **Requirements**
* [Node.js v16.20+](https://nodejs.org/) and [npm v8.19+](https://www.npmjs.com/)
* [Hydrogen channel](https://apps.shopify.com/hydrogen)
### Step 1: Install the required apps
**Go to Shopify Marketplace and search for and install these apps**
1. (**Required**) **Hydrogen** -
2. (Optional) **Okendo: Product Reviews & UGC** -
3. (Optional) **Shopify Search & Discovery** -
4. (Optional) **Create a custom app** Because the Ciseco theme uses [**metaobjects**](https://help.shopify.com/en/manual/custom-data/metaobjects/using-metaobjects) to manage content for sections, it will be necessary to create metaobjects definitions and metaobjects entries. You can create them manually, but this is prone to errors and omissions. So the preferred way is to use Ciseco's built-in auto-generate definitions and demo entries, and then you're ready to go and enjoy them. You should check this more clearly on the import demo page. - [5. Import Definitions and demo entries.](https://nghiaxchis.gitbook.io/ciseco-hydrogen-shopifys-headless-theme/getting-started/5.-import-definitions-and-demo-entries.)
### Step 2: Install node\_module
After installation, open your new project and start the dev server.
1. Unzip the download package and point it to the **Cisec\_Hydrogen/Cisec\_Hydrogen\_Storefront** folder, note that this folder will contain the **package.json** file.
2. Open the **terminal** and then `cd` to the `Cisec_Hydrogen_Storefront` directory and run the command: `npm install`
3. If you get this error "`npm error command sh -c git config core.hooksPath hooks`", you need to initialize the Git repository by running the `"git init"` command before running the `"npm install"` command
{% hint style="info" %}
**Alternate package managers**
Hydrogen and Oxygen use npm by default. Shopify canβt guarantee compatibility with other package managers
{% endhint %}
### Step 3: Link Ciseco to Shopify and pull environment variables
To show your own products, link your local project to Shopify, create a new storefront, and sync your environment variables.
1. Link the Ciseco project to your Shopify:
```
npx shopify hydrogen link
```
2. Follow the prompts to log in to your Shopify account and create a new storefront:
```bash
? Select a shop to log in to:
β my-shopify-store
? Select a Hydrogen storefront to link:
β Create a new storefront
? New storefront name:
> hydrogen-quickstart
```
3. Update your project's **environment variables**:
```
npx shopify hydrogen env pull
```
\
If the `.env` file already exists in the Ciseco project, your terminal will show a diff like this:
```
- SESSION_SECRET="foobar"
- PUBLIC_STORE_DOMAIN="mock.shop"
+ PUBLIC_STOREFRONT_ID=[ID]
+ PUBLIC_STOREFRONT_API_TOKEN=[TOKEN]
+ PRIVATE_STOREFRONT_API_TOKEN=[TOKEN]
+ PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID=[ID]
+ PUBLIC_CUSTOMER_ACCOUNT_API_URL=https://shopify.com/[ID]
```
If the `.env` file does not exist in the Ciseco project, an `.env` file will automatically be created with the available environment variables.
To confirm that the link works, run `npm run dev` and open [http://localhost:3000](http://localhost:3000/). You'll now see your storefront inventory in your browser:
### π Instructional videos
{% embed url="" %}
---
# 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://nghiaxchis.gitbook.io/ciseco-hydrogen-shopifys-headless-theme/getting-started-1/step-1.-getting-started-with-ciseco-hydrogen-and-oxygen.md?ask=
```
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.
