contentstack · sankartn · Apr 3, 2026 · Apr 3, 2026 · Apr 3, 2026
@@ -20,7 +20,7 @@ export type LayoutProps = {
   footer: Promise<FooterQuery>;
   header: HeaderQuery;
   isLoggedIn: boolean;
-  fetchData?: unknown;
+  fetchData: any;
   footerMetaObject: any;
 };
 

@@ -1,6 +1,6 @@
 import type {EntryContext} from '@shopify/remix-oxygen';
 import {RemixServer} from '@remix-run/react';
-import {isbot} from 'isbot';
+import isbot from 'isbot';
 import {renderToReadableStream} from 'react-dom/server';
 import {createContentSecurityPolicy} from '@shopify/hydrogen';
 

@@ -9,6 +9,7 @@ import {
   Meta,
   Outlet,
   Scripts,
+  LiveReload,
   useMatches,
   useRouteError,
   useLoaderData,
@@ -18,8 +19,8 @@ import {
 } from '@remix-run/react';
 import type {CustomerAccessToken} from '@shopify/hydrogen/storefront-api-types';
 import favicon from '../public/favicon.svg';
-import resetStyles from './styles/reset.css?url';
-import appStyles from './styles/app.css?url';
+import resetStyles from './styles/reset.css';
+import appStyles from './styles/app.css';
 import {Layout} from '~/components/Layout';
 
 /**
@@ -45,6 +46,7 @@ export const shouldRevalidate: ShouldRevalidateFunction = ({
 
 export function links() {
   return [
+    ...(cssBundleHref ? [{rel: 'stylesheet', href: cssBundleHref}] : []),
     {rel: 'stylesheet', href: resetStyles},
     {rel: 'stylesheet', href: appStyles},
     {
@@ -120,11 +122,12 @@ export default function App() {
         <Links />
       </head>
       <body>
-        <Layout {...data}>
+        <Layout footerMetaObject={data?.footerMetaObject} {...data}>
           <Outlet />
         </Layout>
         <ScrollRestoration nonce={nonce} />
         <Scripts nonce={nonce} />
+        <LiveReload nonce={nonce} />
       </body>
     </html>
   );
@@ -166,6 +169,7 @@ export function ErrorBoundary() {
         </Layout>
         <ScrollRestoration nonce={nonce} />
         <Scripts nonce={nonce} />
+        <LiveReload nonce={nonce} />
       </body>
     </html>
   );
@@ -278,7 +282,7 @@ const FOOTER_QUERY = `#graphql
 ` as const;
 
 const FOOTER_META_OBJECT_QUERY = `#graphql
-query RootFooterMetaObject($country: CountryCode, $language: LanguageCode)
+query MetaObject($country: CountryCode, $language: LanguageCode)
 @inContext(country: $country, language: $language) {
   metaobjects(first: 100, type: "footer") {
     nodes {

@@ -9,11 +9,11 @@ import {
   Money,
   MediaFile,
 } from '@shopify/hydrogen';
-import type {LocaleIndexStoreCollectionsQuery} from 'storefrontapi.generated';
-
-type StoreCollectionNode =
-  LocaleIndexStoreCollectionsQuery['collections']['nodes'][number];
-import '../styles/pages.css?url';
+import type {
+  CollectionFragment,
+  RecommendedProductsQuery,
+} from 'storefrontapi.generated';
+import '../styles/pages.css';
 
 export const meta: MetaFunction = () => {
   return [{title: 'Hydrogen | Home'}];
@@ -77,7 +77,7 @@ function CollectionItem({
   index,
   className,
 }: {
-  collection: StoreCollectionNode;
+  collection: CollectionFragment;
   index: number;
   className: string;
 }) {
@@ -133,7 +133,7 @@ function RecommendedProducts({
   metaObject,
 }: {
   readonly products: any;
-  readonly collections: readonly StoreCollectionNode[];
+  readonly collections: readonly CollectionFragment[];
   readonly newarrivalproducts: any;
   readonly bestSeller: any;
   readonly topCategory: any;
@@ -1030,7 +1030,7 @@ const RECOMMENDED_PRODUCTS_QUERY = `#graphql
       }
     }
   }
-  query LocaleIndexRecommendedProducts ($country: CountryCode, $language: LanguageCode)
+  query RecommendedProducts ($country: CountryCode, $language: LanguageCode)
     @inContext(country: $country, language: $language) {
     products(first: 3, sortKey: CREATED_AT, reverse: true) {
       nodes {
@@ -1055,7 +1055,7 @@ const COLLECTIONS_QUERY = `#graphql
       height
     }
   }
-  query LocaleIndexStoreCollections(
+  query StoreCollections(
     $country: CountryCode
     $endCursor: String
     # $first: Int
@@ -1092,7 +1092,7 @@ const COLLECTIONS_QUERY = `#graphql
 ` as const;
 
 const NEW_ARRIVALS_QUERY = `#graphql
-query LocaleIndexNewArrivalsCollection($country: CountryCode, $language: LanguageCode)
+query FeaturedCollection($country: CountryCode, $language: LanguageCode)
 @inContext(country: $country, language: $language) {
   collection(handle: "new-arrivals") {
     handle
@@ -1116,7 +1116,7 @@ query LocaleIndexNewArrivalsCollection($country: CountryCode, $language: Languag
 }` as const;
 
 const TOP_CATEGORIES_QUERY = `#graphql
-  query LocaleIndexTopCategoriesCollection($country: CountryCode, $language: LanguageCode)
+  query FeaturedCollection($country: CountryCode, $language: LanguageCode)
     @inContext(country: $country, language: $language) {
       collections(first:8, reverse:true) {
         edges {
@@ -1148,7 +1148,7 @@ const TOP_CATEGORIES_QUERY = `#graphql
 ` as const;
 
 const BEST_SELLER_QUERY = `#graphql
-query LocaleIndexBestSellerCollection($country: CountryCode, $language: LanguageCode)
+query FeaturedCollection($country: CountryCode, $language: LanguageCode)
 @inContext(country: $country, language: $language) {
   collection(handle: "womens-fashion") {
     handle
@@ -1172,7 +1172,7 @@ query LocaleIndexBestSellerCollection($country: CountryCode, $language: Language
 }` as const;
 
 const META_OBJECT_QUERY = `#graphql
-query LocaleIndexHomeMetaObject($country: CountryCode, $language: LanguageCode)
+query MetaObject($country: CountryCode, $language: LanguageCode)
 @inContext(country: $country, language: $language) {
   metaobjects(first: 100, type: "home") {
     nodes {

@@ -1,7 +1,7 @@
 import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import parse from 'html-react-parser';
 import {useLoaderData, type MetaFunction} from '@remix-run/react';
-import '../styles/pages.css?url';
+import '../styles/pages.css';
 
 export const meta: MetaFunction = () => {
   return [{title: 'Hydrogen | About Us'}];
@@ -58,7 +58,7 @@ function RecommendedProducts({metaObject}: {metaObject: any}) {
 }
 
 const META_OBJECT_QUERY = `#graphql
-query AboutPageMetaObject($country: CountryCode, $language: LanguageCode)
+query MetaObject($country: CountryCode, $language: LanguageCode)
 @inContext(country: $country, language: $language) {
   metaobjects(first: 100, type: "about_us") {
     nodes {

@@ -5,7 +5,7 @@ import type {
   CustomerOrdersFragment,
   OrderItemFragment,
 } from 'storefrontapi.generated';
-import '../styles/pages.css?url';
+import '../styles/pages.css';
 
 export const meta: MetaFunction = () => {
   return [{title: 'Orders'}];

@@ -13,7 +13,7 @@ import {
   useOutletContext,
   type MetaFunction,
 } from '@remix-run/react';
-import '../styles/pages.css?url';
+import '../styles/pages.css';
 
 export type ActionResponse = {
   error: string | null;

@@ -1,7 +1,7 @@
 import {Form, NavLink, Outlet, useLoaderData} from '@remix-run/react';
 import {json, redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import type {CustomerFragment} from 'storefrontapi.generated';
-import '../styles/pages.css?url';
+import '../styles/pages.css';
 
 export function shouldRevalidate() {
   return true;

@@ -5,7 +5,7 @@ import {
   type LoaderFunctionArgs,
 } from '@shopify/remix-oxygen';
 import {Form, Link, useActionData, type MetaFunction} from '@remix-run/react';
-import '../styles/pages.css?url';
+import '../styles/pages.css';
 
 type ActionResponse = {
   error: string | null;

@@ -1,5 +1,6 @@
 import {Await, type MetaFunction} from '@remix-run/react';
 import {Suspense} from 'react';
+import type {CartQueryData} from '@shopify/hydrogen';
 import {CartForm} from '@shopify/hydrogen';
 import {json, type ActionFunctionArgs} from '@shopify/remix-oxygen';
 import {CartMain} from '~/components/Cart';
@@ -24,7 +25,7 @@ export async function action({request, context}: ActionFunctionArgs) {
   }
 
   let status = 200;
-  let result: Awaited<ReturnType<(typeof cart)['addLines']>>;
+  let result: CartQueryData;
 
   switch (action) {
     case CartForm.ACTIONS.LinesAdd:

@@ -8,7 +8,7 @@ import {
 } from '@shopify/hydrogen';
 import type {ProductItemFragment} from 'storefrontapi.generated';
 import {useVariantUrl} from '~/utils';
-import '../styles/pages.css?url';
+import '../styles/pages.css';
 
 export const meta: MetaFunction<typeof loader> = ({data}) => {
   return [{title: `Hydrogen | ${data?.collection.title ?? ''} Collection`}];

@@ -3,7 +3,7 @@ import {useLoaderData, Link} from '@remix-run/react';
 import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {Pagination, getPaginationVariables, Image} from '@shopify/hydrogen';
 import type {CollectionFragment} from 'storefrontapi.generated';
-import '../styles/pages.css?url';
+import '../styles/pages.css';
 
 export const meta: MetaFunction = () => {
   return [{title: 'Hydrogen | Collections'}];
@@ -114,7 +114,7 @@ const COLLECTIONS_QUERY = `#graphql
       height
     }
   }
-  query CollectionsListingStoreCollections(
+  query StoreCollections(
     $country: CountryCode
     $endCursor: String
     $first: Int
@@ -142,7 +142,7 @@ const COLLECTIONS_QUERY = `#graphql
 ` as const;
 
 const HEADING_QUERY = `#graphql
-query CollectionsListingMetaObject($country: CountryCode, $language: LanguageCode)
+query MetaObject($country: CountryCode, $language: LanguageCode)
 @inContext(country: $country, language: $language) {
   metaobjects(first: 100, type: "product_page_contents") {
     nodes {

@@ -8,7 +8,7 @@ import {
   Money,
   Pagination,
 } from '@shopify/hydrogen';
-import '../styles/pages.css?url';
+import '../styles/pages.css';
 import NoImg from '../../public/NoImg.svg';
 
 export const meta: MetaFunction = () => {
@@ -183,7 +183,7 @@ function RecommendedProducts({
 }
 
 const RECOMMENDED_PRODUCTS_QUERY = `#graphql
-  fragment CollectionAllProduct on Product {
+  fragment Product on Product {
     id
     title
     handle
@@ -214,7 +214,7 @@ const RECOMMENDED_PRODUCTS_QUERY = `#graphql
       }
     }
   }
-  query CollectionsAllPagedRecommendedProducts ( $country: CountryCode
+  query RecommendedProducts ( $country: CountryCode
     $endCursor: String
     $first: Int
     $language: LanguageCode
@@ -229,7 +229,7 @@ const RECOMMENDED_PRODUCTS_QUERY = `#graphql
         reverse: true
         ) {
         nodes {
-            ...CollectionAllProduct
+            ...Product
         }
         pageInfo {
             hasNextPage
@@ -242,7 +242,7 @@ const RECOMMENDED_PRODUCTS_QUERY = `#graphql
 ` as const;
 
 const HEADING_QUERY = `#graphql
-query CollectionsAllProductPageMetaObject($country: CountryCode, $language: LanguageCode)
+query MetaObject($country: CountryCode, $language: LanguageCode)
 @inContext(country: $country, language: $language) {
   metaobjects(first: 100, type: "product_page_contents") {
     nodes {

@@ -104,7 +104,7 @@ export async function loader({params, request, context}: LoaderFunctionArgs) {
 
   // await the query for the critical product data
   const {product} = await storefront.query(PRODUCT_QUERY, {
-    variables: {handle, key: key ?? '', selectedOptions},
+    variables: {handle, key, selectedOptions},
   });
   if (!product?.id) {
     throw new Response(null, {status: 404});
@@ -467,7 +467,7 @@ function ProductMain({
               <strong>Reviews</strong>
             </p>
             <br />
-            <div>{parse(String(valueMap.get('product_review') ?? ''))}</div>
+            <div>{parse(valueMap.get('product_review') || '')}</div>
             <br />
           </>
         )}
@@ -478,7 +478,7 @@ function ProductMain({
               <strong>Shipping and Return</strong>
             </p>
             <br />
-            <div>{parse(String(valueMap.get('shipping_return_policy') ?? ''))}</div>
+            <div>{parse(valueMap.get('shipping_return_policy') || '')}</div>
             <br />
           </>
         )}
@@ -681,14 +681,14 @@ function ProductForm({
       <AddToCartButton
         disabled={!selectedVariant || !selectedVariant?.availableForSale}
         lines={
-          (selectedVariant
+          selectedVariant
             ? [
                 {
-                  merchandiseId: selectedVariant.id,
+                  merchandiseId: selectedVariant?.id,
                   quantity: 1,
                 },
               ]
-            : []) as any
+            : []
         }
         cart={cart}
       />
@@ -825,8 +825,7 @@ function AddToCartButton({
             <span className="totalquantiy">{quantity}</span>
             <CartForm
               route="/cart"
-              // Cart line shapes from the Storefront API differ slightly from CartForm’s strict union after Hydrogen 2025.
-              inputs={{lines: cart === null ? lines : updatedLines} as any}
+              inputs={{lines: cart === null ? lines : updatedLines}}
               action={
                 cart === null
                   ? CartForm.ACTIONS.LinesAdd
@@ -1049,7 +1048,7 @@ const RELATED_PRODUCT_QUERY = `#graphql
   ` as const;
 
 const META_OBJECT_QUERY = `#graphql
-query ProductDetailPagedMetaObject($country: CountryCode, $language: LanguageCode, $first: Int, $after: String)
+query MetaObject($country: CountryCode, $language: LanguageCode, $first: Int, $after: String)
 @inContext(country: $country, language: $language) {
   metaobjects(first: $first, after: $after, type: "product_detail_page") {
       edges {
@@ -1076,7 +1075,7 @@ query ProductDetailPagedMetaObject($country: CountryCode, $language: LanguageCod
 }` as const;
 
 const HEADING_QUERY = `#graphql
-query ProductHandleProductPageMetaObject($country: CountryCode, $language: LanguageCode)
+query MetaObject($country: CountryCode, $language: LanguageCode)
 @inContext(country: $country, language: $language) {
   metaobjects(first: 100, type: "product_page_contents") {
     nodes {