diff --git a/.changeset/nervous-poets-fly.md b/.changeset/nervous-poets-fly.md
new file mode 100644
index 0000000000..036d21e16f
--- /dev/null
+++ b/.changeset/nervous-poets-fly.md
@@ -0,0 +1,5 @@
+---
+'skeleton': patch
+---
+
+Fix cart route so that it works with no-js
diff --git a/docs/shopify-dev/analytics-setup/js/app/routes/cart.jsx b/docs/shopify-dev/analytics-setup/js/app/routes/cart.jsx
index 4ba492c211..c7381487d6 100644
--- a/docs/shopify-dev/analytics-setup/js/app/routes/cart.jsx
+++ b/docs/shopify-dev/analytics-setup/js/app/routes/cart.jsx
@@ -1,5 +1,4 @@
-import {Await, useRouteLoaderData} from '@remix-run/react';
-import {Suspense} from 'react';
+import {useLoaderData} from '@remix-run/react';
 import {CartForm, Analytics} from '@shopify/hydrogen';
 import {json} from '@shopify/remix-oxygen';
 import {CartMain} from '~/components/CartMain';
@@ -95,33 +94,31 @@ export async function action({request, context}) {
   );
 }
 
+/**
+ * @param {LoaderFunctionArgs} args
+ */
+export async function loader({context}) {
+  const {cart} = context;
+  return json(await cart.get());
+}
+
 export default function Cart() {
-  /** @type {RootLoader} */
-  const rootData = useRouteLoaderData('root');
-  if (!rootData) return null;
+  /** @type {LoaderFunctionArgs} */
+  const cart = useLoaderData();
 
   return (
     <div className="cart">
       <h1>Cart</h1>
-      <Suspense fallback={<p>Loading cart ...</p>}>
-        <Await
-          resolve={rootData.cart}
-          errorElement={<div>An error occurred</div>}
-        >
-          {(cart) => {
-            return <CartMain layout="page" cart={cart} />;
-          }}
-        </Await>
-      </Suspense>
-      {/* [START cart] */}
-      <Analytics.CartView />
-      {/* [END cart] */}
+        <CartMain layout="page" cart={cart} />
+        {/* [START cart] */}
+        <Analytics.CartView />
+        {/* [END cart] */}
     </div>
   );
 }
 
 /** @template T @typedef {import('@remix-run/react').MetaFunction<T>} MetaFunction */
 /** @typedef {import('@shopify/hydrogen').CartQueryDataReturn} CartQueryDataReturn */
-/** @typedef {import('@shopify/remix-oxygen').ActionFunctionArgs} ActionFunctionArgs */
-/** @typedef {import('~/root').RootLoader} RootLoader */
+/** @typedef {import('@shopify/remix-oxygen').LoaderFunctionArgs} LoaderFunctionArgs */
 /** @typedef {import('@shopify/remix-oxygen').SerializeFrom<typeof action>} ActionReturnData */
+/** @typedef {import('@shopify/remix-oxygen').SerializeFrom<typeof loader>} LoaderReturnData */
diff --git a/docs/shopify-dev/analytics-setup/ts/app/routes/cart.tsx b/docs/shopify-dev/analytics-setup/ts/app/routes/cart.tsx
index bde1a17649..0789789ad6 100644
--- a/docs/shopify-dev/analytics-setup/ts/app/routes/cart.tsx
+++ b/docs/shopify-dev/analytics-setup/ts/app/routes/cart.tsx
@@ -1,10 +1,8 @@
-import {Await, type MetaFunction, useRouteLoaderData} from '@remix-run/react';
-import {Suspense} from 'react';
+import {type MetaFunction, useLoaderData} from '@remix-run/react';
 import type {CartQueryDataReturn} from '@shopify/hydrogen';
 import {CartForm, Analytics} from '@shopify/hydrogen';
-import {json, type ActionFunctionArgs} from '@shopify/remix-oxygen';
+import {json, type LoaderFunctionArgs, type ActionFunctionArgs} from '@shopify/remix-oxygen';
 import {CartMain} from '~/components/CartMain';
-import type {RootLoader} from '~/root';
 
 export const meta: MetaFunction = () => {
   return [{title: `Hydrogen | Cart`}];
@@ -95,23 +93,18 @@ export async function action({request, context}: ActionFunctionArgs) {
   );
 }
 
+export async function loader({context}: LoaderFunctionArgs) {
+  const {cart} = context;
+  return json(await cart.get());
+}
+
 export default function Cart() {
-  const rootData = useRouteLoaderData<RootLoader>('root');
-  if (!rootData) return null;
+  const cart = useLoaderData<typeof loader>();
 
   return (
     <div className="cart">
       <h1>Cart</h1>
-      <Suspense fallback={<p>Loading cart ...</p>}>
-        <Await
-          resolve={rootData.cart}
-          errorElement={<div>An error occurred</div>}
-        >
-          {(cart) => {
-            return <CartMain layout="page" cart={cart} />;
-          }}
-        </Await>
-      </Suspense>
+      <CartMain layout="page" cart={cart} />
       {/* [START cart] */}
       <Analytics.CartView />
       {/* [END cart] */}
diff --git a/examples/custom-cart-method/app/routes/cart.tsx b/examples/custom-cart-method/app/routes/cart.tsx
index 70399a4f83..ed003875bb 100644
--- a/examples/custom-cart-method/app/routes/cart.tsx
+++ b/examples/custom-cart-method/app/routes/cart.tsx
@@ -1,8 +1,7 @@
-import {Await, type MetaFunction, useRouteLoaderData} from '@remix-run/react';
-import {Suspense} from 'react';
+import {type MetaFunction, useLoaderData} from '@remix-run/react';
 import type {CartQueryDataReturn} from '@shopify/hydrogen';
 import {CartForm} from '@shopify/hydrogen';
-import {json, type ActionFunctionArgs} from '@shopify/remix-oxygen';
+import {json, type LoaderFunctionArgs, type ActionFunctionArgs} from '@shopify/remix-oxygen';
 import type {
   SelectedOptionInput,
   CartLineUpdateInput,
@@ -116,23 +115,18 @@ export async function action({request, context}: ActionFunctionArgs) {
   );
 }
 
+export async function loader({context}: LoaderFunctionArgs) {
+  const {cart} = context;
+  return json(await cart.get());
+}
+
 export default function Cart() {
-  const rootData = useRouteLoaderData<RootLoader>('root');
-  if (!rootData) return null;
+  const cart = useLoaderData<typeof loader>();
 
   return (
     <div className="cart">
       <h1>Cart</h1>
-      <Suspense fallback={<p>Loading cart ...</p>}>
-        <Await
-          resolve={rootData.cart}
-          errorElement={<div>An error occurred</div>}
-        >
-          {(cart) => {
-            return <CartMain layout="page" cart={cart} />;
-          }}
-        </Await>
-      </Suspense>
+      <CartMain layout="page" cart={cart} />
     </div>
   );
 }
diff --git a/examples/legacy-customer-account-flow/app/routes/cart.tsx b/examples/legacy-customer-account-flow/app/routes/cart.tsx
index 875827f6cb..afc7cc057f 100644
--- a/examples/legacy-customer-account-flow/app/routes/cart.tsx
+++ b/examples/legacy-customer-account-flow/app/routes/cart.tsx
@@ -1,8 +1,7 @@
-import {Await, type MetaFunction, useRouteLoaderData} from '@remix-run/react';
-import {Suspense} from 'react';
+import {type MetaFunction, useLoaderData} from '@remix-run/react';
 import type {CartQueryDataReturn} from '@shopify/hydrogen';
 import {CartForm} from '@shopify/hydrogen';
-import {json, type ActionFunctionArgs} from '@shopify/remix-oxygen';
+import {json, type LoaderFunctionArgs, type ActionFunctionArgs} from '@shopify/remix-oxygen';
 import {CartMain} from '~/components/CartMain';
 import type {RootLoader} from '~/root';
 
@@ -106,23 +105,18 @@ export async function action({request, context}: ActionFunctionArgs) {
   );
 }
 
+export async function loader({context}: LoaderFunctionArgs) {
+  const {cart} = context;
+  return json(await cart.get());
+}
+
 export default function Cart() {
-  const rootData = useRouteLoaderData<RootLoader>('root');
-  if (!rootData) return null;
+  const cart = useLoaderData<typeof loader>();
 
   return (
     <div className="cart">
       <h1>Cart</h1>
-      <Suspense fallback={<p>Loading cart ...</p>}>
-        <Await
-          resolve={rootData.cart}
-          errorElement={<div>An error occurred</div>}
-        >
-          {(cart) => {
-            return <CartMain layout="page" cart={cart} />;
-          }}
-        </Await>
-      </Suspense>
+      <CartMain layout="page" cart={cart} />
     </div>
   );
 }
diff --git a/examples/multipass/app/routes/cart.tsx b/examples/multipass/app/routes/cart.tsx
index aa1ddcda80..ecbc71dcfc 100644
--- a/examples/multipass/app/routes/cart.tsx
+++ b/examples/multipass/app/routes/cart.tsx
@@ -1,10 +1,8 @@
-import {Await, type MetaFunction, useRouteLoaderData} from '@remix-run/react';
-import {Suspense} from 'react';
+import {type MetaFunction, useLoaderData} from '@remix-run/react';
 import type {CartQueryDataReturn} from '@shopify/hydrogen';
 import {CartForm} from '@shopify/hydrogen';
-import {json, type ActionFunctionArgs} from '@shopify/remix-oxygen';
+import {json, type LoaderFunctionArgs, type ActionFunctionArgs} from '@shopify/remix-oxygen';
 import {CartMain} from '~/components/Cart';
-import type {RootLoader} from '~/root';
 
 export const meta: MetaFunction = () => {
   return [{title: `Hydrogen | Cart`}];
@@ -106,23 +104,18 @@ export async function action({request, context}: ActionFunctionArgs) {
   );
 }
 
+export async function loader({context}: LoaderFunctionArgs) {
+  const {cart} = context;
+  return json(await cart.get());
+}
+
 export default function Cart() {
-  const rootData = useRouteLoaderData<RootLoader>('root');
-  if (!rootData) return null;
+  const cart = useLoaderData<typeof loader>();
 
   return (
     <div className="cart">
       <h1>Cart</h1>
-      <Suspense fallback={<p>Loading cart ...</p>}>
-        <Await
-          resolve={rootData.cart}
-          errorElement={<div>An error occurred</div>}
-        >
-          {(cart) => {
-            return <CartMain layout="page" cart={cart} />;
-          }}
-        </Await>
-      </Suspense>
+      <CartMain layout="page" cart={cart} />
     </div>
   );
 }
diff --git a/templates/skeleton/app/routes/cart.tsx b/templates/skeleton/app/routes/cart.tsx
index 61d0a0ea00..f477802224 100644
--- a/templates/skeleton/app/routes/cart.tsx
+++ b/templates/skeleton/app/routes/cart.tsx
@@ -1,10 +1,8 @@
-import {Await, type MetaFunction, useRouteLoaderData} from '@remix-run/react';
-import {Suspense} from 'react';
+import {type MetaFunction, useLoaderData} from '@remix-run/react';
 import type {CartQueryDataReturn} from '@shopify/hydrogen';
 import {CartForm} from '@shopify/hydrogen';
-import {json, type ActionFunctionArgs} from '@shopify/remix-oxygen';
+import {json, type LoaderFunctionArgs, type ActionFunctionArgs} from '@shopify/remix-oxygen';
 import {CartMain} from '~/components/CartMain';
-import type {RootLoader} from '~/root';
 
 export const meta: MetaFunction = () => {
   return [{title: `Hydrogen | Cart`}];
@@ -95,23 +93,18 @@ export async function action({request, context}: ActionFunctionArgs) {
   );
 }
 
+export async function loader({context}: LoaderFunctionArgs) {
+  const {cart} = context;
+  return json(await cart.get());
+}
+
 export default function Cart() {
-  const rootData = useRouteLoaderData<RootLoader>('root');
-  if (!rootData) return null;
+  const cart = useLoaderData<typeof loader>();
 
   return (
     <div className="cart">
       <h1>Cart</h1>
-      <Suspense fallback={<p>Loading cart ...</p>}>
-        <Await
-          resolve={rootData.cart}
-          errorElement={<div>An error occurred</div>}
-        >
-          {(cart) => {
-            return <CartMain layout="page" cart={cart} />;
-          }}
-        </Await>
-      </Suspense>
+      <CartMain layout="page" cart={cart} />
     </div>
   );
 }