diff --git a/README.md b/README.md
index 69a1a3c..9f2a055 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,122 @@
-# hydrogen-contentstack-demo
\ No newline at end of file
+# Hydrogen Contentstack Demo - An example storefront powered by Contentstack + Hydrogen
+
+This demo is compatible with `@shopify/hydrogen >= 2024.01` built on Remix.
+
+> For a more complex reference example, please see our [demo-ecommerce repo](https://github.com/contentstack/shopify-contentstack-app) which features a monorepo with an embedded Contentstack.
+
+[Demo][hydrogen-contentstack-demo] | [Contentstack Connect for Shopify][[contentstack-connect]]
+
+# About
+
+Hydrogen Contentstack Demo is our customized [Hydrogen][hydrogen-github] starter that presents a real-world example of how Contentstack and Structured Content can elevate your custom Shopify storefronts.
+
+It's designed to be used, which syncs products and collections from your Shopify storefront to your Stack in Contentstack.
+
+This starter showcases a few patterns you can adopt when creating your own custom storefronts. Use Contentstack and Hydrogen to delight customers with rich, shoppable editorial experiences that best tell your story.
+
+# Features
+
+**[View the feature gallery][about]**
+
+This TypeScript demo adopts many of Hydrogen's [framework conventions and third-party libraries][hydrogen-framework]. If you've used Hydrogen then you should hopefully feel at home here.
+
+# Fetching Contentstack data
+
+This demo comes preconfigured Contentstack, which adds a Contentstack client to the Remix context. This enables you to fetch content from Contentstack in Remix loaders and actions.
+```tsx
+// /app/routes/($locale).products.$handle.tsx
+import {getEntryByUid} from '~/components/contentstack-sdk';
+
+const fetchData = async () => {
+ try {
+ const result = await getEntryByUid({
+ contentTypeUid: 'shopify_home',
+ entryUid: 'your entry uid',
+ envConfig,
+ });
+ return result;
+ } catch (error) {
+ console.error('ERROR', error);
+ }
+ };
+```
+This uses our official [`contentstack-sdk`][contentstack-sdk] library, so it supports all the methods you would expect to interact with Contentstack API's
+You can also use the [`defer` and `Await` utilities](https://remix.run/docs/en/1.15.0/guides/streaming#using-defer) from Remix to prioritize critical data:
+
+# Viewpoint
+
+We've taken the following viewpoint on how we've approached this demo.
+
+
+Shopify is the source of truth for non-editorial content
+
+- For products, this includes titles, handles, product options and metaFields.
+- For collections, this includes titles, products associated to it and collection images.
+
+
+
+
+Shopify data stored in our Contentstack is used to improve the editor experience
+
+- This allows us to display things like product status, prices and even inventory levels.
+- Our application always fetches from Shopify's Storefront API at runtime to ensure we have the freshest data possible, especially important when dealing with fast-moving inventory.
+
+
+
+
+Collections are also managed by Shopify and Contentstack
+
+- Shopify is used to handle collection rules and sort orders.
+- In Contentstack also, you can create Collection entries and which will get created inside Shopify using webhooks.
+
+
+
+
+Product options are customized in Contenstack
+
+- Data added to specific product options is done in Contentstack entries.
+- For the extra fields inside Contentstack gets updated in Shopify in MetaField.
+
+
+
+
+Non-product pages i.e About are managed entirely by Contentstack
+
+- Shopify pages and blog posts (associated with the Online Store) channel aren't used in this demo. A dedicated `page` content type in Contentstack has been created for this purpose.
+
+
+
+# Getting started
+Contentstack for Shopify is a Shopify Plus-certified app.
+
+## Requirements:
+
+- Node.js version 18.05.0 or higher
+- `npm` (or your package manager of choice, such as `yarn` or `pnpm`)
+
+## Getting Started
+
+1. Create a `.env` file, based on the `.env.template` file.
+
+2. Install dependencies and start the development server
+
+ ```bash
+ npm i
+ npm run dev
+ ```
+
+3. Visit the development environment running at http://localhost:3000.
+
+For information on running production builds and deployment, see the [Hydrogen documentation][hydrogen-framework].
+
+# License
+
+This repository is published under the [MIT][license] license.
+
+[about]: https://01hq4sm3tp6r1g3yas5q5h3qq1-6f2958b70f5894a4ad6d.myshopify.dev/about
+[hydrogen-contentstack-demo]: https://01hq4sm3tp6r1g3yas5q5h3qq1-6f2958b70f5894a4ad6d.myshopify.dev/
+[hydrogen-github]: https://github.com/contentstack/hydrogen-contentstack-demo
+[hydrogen-framework]: https://shopify.dev/docs/custom-storefronts/hydrogen
+[license]: https://github.com/sanity-io/sanity/blob/next/LICENSE
+[contentstack-connect]: https://www.contentstack.com/docs
+[contentstack-sdk]: https://www.contentstack.com/docs/developers/sdks/content-delivery-sdk/javascript-browser/reference
diff --git a/app/components/Aside.tsx b/app/components/Aside.tsx
index f486f19..fe252ee 100644
--- a/app/components/Aside.tsx
+++ b/app/components/Aside.tsx
@@ -26,7 +26,7 @@ export function Aside({
window.location.hash = '';
}}
/>
-