Step 1. Getting started with Ciseco - Hydrogen and Oxygen

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.

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.

Requirements

• Node.js v16.20+ and npm v8.19+

• Hydrogen channel

Step 1: Install the required apps

Go to Shopify Marketplace and search for and install these apps

1. (Required) Hydrogen - https://apps.shopify.com/hydrogen

2. (Optional) Okendo: Product Reviews & UGC - https://apps.shopify.com/okendo-reviews

3. (Optional) Shopify Search & Discovery - https://apps.shopify.com/search-and-discovery

4. (Optional) Create a custom app Because the Ciseco theme uses 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.

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

Alternate package managers

Hydrogen and Oxygen use npm by default. Shopify can’t guarantee compatibility with other package managers

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:

   ?  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. You'll now see your storefront inventory in your browser:

👉 Instructional videos