Installation Steps:

Step1> 

# Using `yarn`

yarn create @shopify/hydrogen

OR

# Using `npx`

npx @shopify/create-hydrogen

 

Step2>yarn install

 

Step3>yarn dev

 

Step4> On the main folder find (hydrogen.config.js)

 

Find following code :

shopify: {

    storeDomain: 'Store-name.myshopify.com',

    storefrontToken: 'Add your Private app Storefront access token ',

    storefrontApiVersion: '2022-07',

  },

To create Storefront access token follow the steps:

Step 1: On the main sidebar on the left side of the main admin page, click Apps. 

 

Step 2: On the Apps page, scroll down to the end of the page. Notice the following line:

Working with a developer on your shop? Manage private apps

Click the Manage private apps link. 

Step 3: The Private apps pages will be loaded. A button labeled Create new private app is present on the upper-right corner of the page. Click the button. 

Step 4: Once you are done, click Save. A pop-up box will appear that will remind you of the importance of keeping your private API safe.

Step 5: On the Create private app page, fill in the following details:

 

Step 6: Once you are done, click Save. A pop-up box will appear that will remind you of the importance of keeping your private API safe.

A reminder by Shopify to keep your API key safe. Click Create app button once you are done reading it. 

Once you have read the reminder, click Create app.

Step 7: Go back to the Private apps page by clicking the back arrow on the upper-left portion of the page (not the back button of the browser!). The new private app will be listed on the table in the Private apps page. 

A table listing the private app with the corresponding API key. The details shaded for obvious reasons.

‍

Click the listed private app name to access the API key.

A new table will appear on the page, which contains the API key and the password. A sample URL is also included so you don’t have to parse the API key and the password when using your external app. 

‍

And, voila! you have accessed an API key to your Shopify store. Don’t forget Shopify’s reminder:

Section and File Name

 

1>Header section:

1>Header.client.jsx

i>CartToggle.client

ii>CartUIProvider.client

iii>CountrySelector.client

iv>Navigation.client ( Auto fetch dynamic store all collections name as navigation or we can add custom page link)

v>MobileNavigation.client

2> Image with text overlay

1>Component file name (ImageTextOverlay.jsx) 

Description

i>( All image use as shopify cdn link or we can add image in the folder and added image path on it)

ii>all content are static we can use any collection/product link as button link 

 

3> CUSTOM COLLECTION LIST

1>GridBanner.jsx

This is an also custom section all content, image, and link added by using custom code

 

4> Featured Collection 

1>index.server.jsx (We can change collection from the component

 code  (const featuredProductsCollection = collections[0];) here [0] means first collection of the shopify store. If we update by 1 then the collection also updates the second collection of the shopify store.)

i> Component name (FeaturedProductsBox)

 

5> Image with text 

1>FeaturedCollection.jsx

2>index.server.jsx (We can change collection from the component

 code  (collections && collections.length > 1 ? collections[1] : collections[0];) here [1] means Second collection of the shopify store. If we update by 0 and 2 then the collection will also update the first and third collection of the shopify store.)

This is and dynamic section for the collection change

6> FeaturedProductsBox

1>index.server.jsx (We can change collection from the component

 code  (const featuredProductsCollection = collections[0];) here [0] means first collection of the shopify store. If we update by 1 then the collection also updates the second collection of the shopify store.)

i> Component name (FeaturedProductsBoxT)

7> Footer Section

1> Footer.server.jsx ( collection and product link come from the graphql query remaining link are put custom as per storefront url rule.

 

All pages are fetch using gql query

Example code:

 

const QUERY = gql`

query PageDetails($language: LanguageCode, $handle: String!)   @inContext(language: $language) {

     pageByHandle(handle: $handle) {

       Title

       Body

       Title

       seo {

         Description

         Title

       }

     }

   }