diff --git a/.changeset/cart-warnings-feedback.md b/.changeset/cart-warnings-feedback.md
new file mode 100644
index 0000000000..3e9f90054d
--- /dev/null
+++ b/.changeset/cart-warnings-feedback.md
@@ -0,0 +1,6 @@
+---
+'@shopify/cli-hydrogen': patch
+'skeleton': patch
+---
+
+Add cart warnings component to display feedback to users when there are issues with their cart. Includes new `InlineFeedback` component and a `CartWarnings` component for collecting and displaying cart errors and warnings in an accessible way.
diff --git a/e2e/specs/smoke/cart.spec.ts b/e2e/specs/smoke/cart.spec.ts
index 467c2e0d50..3760b7a323 100644
--- a/e2e/specs/smoke/cart.spec.ts
+++ b/e2e/specs/smoke/cart.spec.ts
@@ -1,4 +1,4 @@
-import {setTestStore, test, expect} from '../../fixtures';
+import {setTestStore, test, expect, Page} from '../../fixtures';
 
 setTestStore('mockShop');
 
diff --git a/templates/skeleton/app/components/CartLineItem.tsx b/templates/skeleton/app/components/CartLineItem.tsx
index fb2a8ecf7b..1b8aaf9abb 100644
--- a/templates/skeleton/app/components/CartLineItem.tsx
+++ b/templates/skeleton/app/components/CartLineItem.tsx
@@ -2,13 +2,10 @@ import type {CartLineUpdateInput} from '@shopify/hydrogen/storefront-api-types';
 import type {CartLayout, LineItemChildrenMap} from '~/components/CartMain';
 import {CartForm, Image, type OptimisticCartLine} from '@shopify/hydrogen';
 import {useVariantUrl} from '~/lib/variants';
-import {Link} from 'react-router';
+import {href, Link, useFetcher, type FetcherWithComponents} from 'react-router';
 import {ProductPrice} from './ProductPrice';
 import {useAside} from './Aside';
-import type {
-  CartApiQueryFragment,
-  CartLineFragment,
-} from 'storefrontapi.generated';
+import type {CartApiQueryFragment} from 'storefrontapi.generated';
 
 export type CartLine = OptimisticCartLine<CartApiQueryFragment>;
 
@@ -98,13 +95,13 @@ export function CartLineItem({
  */
 function CartLineQuantity({line}: {line: CartLine}) {
   if (!line || typeof line?.quantity === 'undefined') return null;
+
   const {id: lineId, quantity, isOptimistic} = line;
   const prevQuantity = Number(Math.max(0, quantity - 1).toFixed(0));
   const nextQuantity = Number((quantity + 1).toFixed(0));
-
   return (
     <div className="cart-line-quantity">
-      <small>Quantity: {quantity} &nbsp;&nbsp;</small>
+      <span>Quantity: &nbsp;&nbsp;</span>
       <CartLineUpdateButton lines={[{id: lineId, quantity: prevQuantity}]}>
         <button
           aria-label="Decrease quantity"
@@ -116,6 +113,8 @@ function CartLineQuantity({line}: {line: CartLine}) {
         </button>
       </CartLineUpdateButton>
       &nbsp;
+      <CartLineQuantityInput disabled={!!isOptimistic} line={line} />
+      &nbsp;
       <CartLineUpdateButton lines={[{id: lineId, quantity: nextQuantity}]}>
         <button
           aria-label="Increase quantity"
@@ -158,6 +157,68 @@ function CartLineRemoveButton({
   );
 }
 
+function isKeyboardEvent(
+  e: React.ChangeEvent<HTMLInputElement>,
+): e is typeof e & {nativeEvent: InputEvent} {
+  if (e.nativeEvent instanceof InputEvent) {
+    if (
+      e.nativeEvent.inputType === 'insertText' ||
+      e.nativeEvent.inputType === 'deleteContentBackward' ||
+      e.nativeEvent.inputType === 'deleteContentForward'
+    ) {
+      return true;
+    }
+  }
+  return false;
+}
+
+async function submitQuantity(
+  e: React.ChangeEvent<HTMLInputElement>,
+  fetcher: FetcherWithComponents<any>,
+  line: CartLine,
+) {
+  const value = e.target.valueAsNumber;
+  if (Number.isNaN(value) || value < 1) return;
+  const formData = new FormData();
+  formData.set(
+    CartForm.INPUT_NAME,
+    JSON.stringify({
+      action: CartForm.ACTIONS.LinesUpdate,
+      inputs: {lines: [{id: line.id, quantity: value}]},
+    }),
+  );
+  await fetcher.submit(formData, {method: 'post', action: href('/cart')});
+}
+
+function CartLineQuantityInput({
+  line,
+  disabled,
+}: {
+  line: CartLine;
+  disabled: boolean;
+}) {
+  const fetcher = useFetcher({key: getUpdateKey([line.id])});
+
+  return (
+    <input
+      aria-label="Quantity"
+      min={1}
+      className="cart-line-quantity-input"
+      disabled={disabled}
+      key={line.quantity}
+      type="number"
+      defaultValue={line.quantity}
+      onChange={(e) => {
+        if (isKeyboardEvent(e)) return;
+        void submitQuantity(e, fetcher, line);
+      }}
+      onBlur={(e) => {
+        void submitQuantity(e, fetcher, line);
+      }}
+    />
+  );
+}
+
 function CartLineUpdateButton({
   children,
   lines,
diff --git a/templates/skeleton/app/components/CartMain.tsx b/templates/skeleton/app/components/CartMain.tsx
index d7c3b4a52d..59a9fbec50 100644
--- a/templates/skeleton/app/components/CartMain.tsx
+++ b/templates/skeleton/app/components/CartMain.tsx
@@ -4,6 +4,7 @@ import type {CartApiQueryFragment} from 'storefrontapi.generated';
 import {useAside} from '~/components/Aside';
 import {CartLineItem, type CartLine} from '~/components/CartLineItem';
 import {CartSummary} from './CartSummary';
+import {CartWarnings} from './CartWarnings';
 
 export type CartLayout = 'page' | 'aside';
 
@@ -52,6 +53,7 @@ export function CartMain({layout, cart: originalCart}: CartMainProps) {
   return (
     <div className={className}>
       <CartEmpty hidden={linesCount} layout={layout} />
+      <CartWarnings />
       <div className="cart-details">
         <div aria-labelledby="cart-lines">
           <ul>
diff --git a/templates/skeleton/app/components/CartWarnings.tsx b/templates/skeleton/app/components/CartWarnings.tsx
new file mode 100644
index 0000000000..d1194ddd50
--- /dev/null
+++ b/templates/skeleton/app/components/CartWarnings.tsx
@@ -0,0 +1,104 @@
+import {InlineFeedback} from './InlineFeedback';
+import {href, useActionData, useFetchers, type Fetcher} from 'react-router';
+import type {action as cartAction} from '~/routes/cart';
+import {useEffect, useState} from 'react';
+
+function isCartFetcher(
+  fetcher: Fetcher,
+): fetcher is Fetcher<CartActionData> & {key: string} {
+  return fetcher.formAction === href('/cart') && fetcher.formMethod === 'POST';
+}
+
+type CartActionData = NonNullable<
+  ReturnType<typeof useActionData<typeof cartAction>>
+>;
+/** Returns the errors and warnings from the cart fetchers
+ *  Normalizes the errors to provide better UX.
+ *
+ *  Errors are normalized by path, warnings are normalized by code.
+ */
+export function useCartFeedback() {
+  const [fetcherDataMap, setFetcherDataMap] = useState<
+    Map<string, CartActionData>
+  >(new Map());
+  const fetchers = useFetchers();
+
+  useEffect(() => {
+    let changed = false;
+    let newFetcherDataMap = new Map(fetcherDataMap);
+
+    for (const fetcher of fetchers) {
+      if (!isCartFetcher(fetcher)) continue;
+
+      switch (fetcher.state) {
+        case 'submitting':
+          newFetcherDataMap = new Map();
+          changed = true;
+          break;
+        case 'loading':
+          if (
+            fetcher.data &&
+            fetcher.data !== newFetcherDataMap.get(fetcher.key)
+          ) {
+            changed = true;
+            newFetcherDataMap.set(fetcher.key, fetcher.data);
+          }
+          break;
+        default:
+          break;
+      }
+    }
+
+    if (changed) {
+      setFetcherDataMap(newFetcherDataMap);
+    }
+  }, [fetchers, fetcherDataMap]);
+
+  const feedback: {
+    warnings: Map<string, NonNullable<CartActionData['warnings']>[number]>;
+    userErrors: Map<string, NonNullable<CartActionData['userErrors']>[number]>;
+  } = {warnings: new Map(), userErrors: new Map()};
+  for (const fetcherData of fetcherDataMap.values()) {
+    if (fetcherData.warnings) {
+      for (const warning of fetcherData.warnings) {
+        feedback.warnings.set(warning.code, warning);
+      }
+    }
+    if (fetcherData.userErrors) {
+      for (const userError of fetcherData.userErrors) {
+        feedback.userErrors.set(userError.code ?? '_root', userError);
+      }
+    }
+  }
+  return {
+    warnings: Array.from(feedback.warnings.values()),
+    userErrors: Array.from(feedback.userErrors.values()),
+  };
+}
+
+/** Renders a list of warnings from the cart if there are any */
+export function CartWarnings() {
+  const feedback = useCartFeedback();
+  if (feedback.warnings.length === 0 && feedback.userErrors.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="cart-warnings">
+      {feedback.warnings.map((warning) => (
+        <InlineFeedback
+          key={warning.code}
+          type="warning"
+          title={warning.message}
+        />
+      ))}
+      {feedback.userErrors.map((userError) => (
+        <InlineFeedback
+          key={userError.code}
+          type="error"
+          title={userError.message}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/templates/skeleton/app/components/InlineFeedback.tsx b/templates/skeleton/app/components/InlineFeedback.tsx
new file mode 100644
index 0000000000..e058665143
--- /dev/null
+++ b/templates/skeleton/app/components/InlineFeedback.tsx
@@ -0,0 +1,45 @@
+interface InlineFeedbackProps {
+  type?: 'warning' | 'error';
+  title: string;
+  description?: string;
+}
+
+const FEEDBACK_PROPS: Record<
+  NonNullable<InlineFeedbackProps['type']>,
+  {icon: string; role: string}
+> = {
+  warning: {
+    icon: '⚠',
+    role: 'status',
+  },
+  error: {
+    icon: '✕',
+    role: 'alert',
+  },
+};
+
+/**
+ * An accessible inline feedback component for warnings and errors.
+ * Uses role="status" for warnings and role="alert" for errors.
+ */
+export function InlineFeedback({
+  type = 'warning',
+  title,
+  description,
+}: InlineFeedbackProps) {
+  const {icon, role} = FEEDBACK_PROPS[type];
+
+  return (
+    <div className={`inline-feedback inline-feedback--${type}`} role={role}>
+      <span className="inline-feedback-icon" aria-hidden="true">
+        {icon}
+      </span>
+      <div className="inline-feedback-content">
+        <p className="inline-feedback-title">{title}</p>
+        {description ? (
+          <p className="inline-feedback-description">{description}</p>
+        ) : null}
+      </div>
+    </div>
+  );
+}
diff --git a/templates/skeleton/app/components/PageLayout.tsx b/templates/skeleton/app/components/PageLayout.tsx
index ed7843be81..216021c780 100644
--- a/templates/skeleton/app/components/PageLayout.tsx
+++ b/templates/skeleton/app/components/PageLayout.tsx
@@ -8,12 +8,12 @@ import type {
 import {Aside} from '~/components/Aside';
 import {Footer} from '~/components/Footer';
 import {Header, HeaderMenu} from '~/components/Header';
-import {CartMain} from '~/components/CartMain';
 import {
   SEARCH_ENDPOINT,
   SearchFormPredictive,
 } from '~/components/SearchFormPredictive';
 import {SearchResultsPredictive} from '~/components/SearchResultsPredictive';
+import {CartMain} from './CartMain';
 
 interface PageLayoutProps {
   cart: Promise<CartApiQueryFragment | null>;
@@ -60,9 +60,7 @@ function CartAside({cart}: {cart: PageLayoutProps['cart']}) {
     <Aside type="cart" heading="CART">
       <Suspense fallback={<p>Loading cart ...</p>}>
         <Await resolve={cart}>
-          {(cart) => {
-            return <CartMain cart={cart} layout="aside" />;
-          }}
+          {(cart) => <CartMain cart={cart} layout="aside" />}
         </Await>
       </Suspense>
     </Aside>
diff --git a/templates/skeleton/app/routes/cart.tsx b/templates/skeleton/app/routes/cart.tsx
index bb143b40d9..99012fbc28 100644
--- a/templates/skeleton/app/routes/cart.tsx
+++ b/templates/skeleton/app/routes/cart.tsx
@@ -1,8 +1,4 @@
-import {
-  useLoaderData,
-  data,
-  type HeadersFunction,
-} from 'react-router';
+import {useLoaderData, data, type HeadersFunction} from 'react-router';
 import type {Route} from './+types/cart';
 import type {CartQueryDataReturn} from '@shopify/hydrogen';
 import {CartForm} from '@shopify/hydrogen';
@@ -79,7 +75,7 @@ export async function action({request, context}: Route.ActionArgs) {
 
   const cartId = result?.cart?.id;
   const headers = cartId ? cart.setCartId(result.cart.id) : new Headers();
-  const {cart: cartResult, errors, warnings} = result;
+  const {cart: cartResult, errors, warnings, userErrors} = result;
 
   const redirectTo = formData.get('redirectTo') ?? null;
   if (typeof redirectTo === 'string') {
@@ -91,6 +87,7 @@ export async function action({request, context}: Route.ActionArgs) {
     {
       cart: cartResult,
       errors,
+      userErrors,
       warnings,
       analytics: {
         cartId,
diff --git a/templates/skeleton/app/styles/app.css b/templates/skeleton/app/styles/app.css
index c8340e1fe9..e3c977e6e1 100644
--- a/templates/skeleton/app/styles/app.css
+++ b/templates/skeleton/app/styles/app.css
@@ -278,6 +278,12 @@ button.reset:hover:not(:has(> *)) {
 
 .cart-line-quantity {
   display: flex;
+  align-items: center;
+}
+
+.cart-line-quantity-input {
+  width: 40px;
+  height: 1rem;
 }
 
 /* Child line components (warranties, gift wrapping, etc.) */
@@ -295,6 +301,59 @@ button.reset:hover:not(:has(> *)) {
   align-items: center;
   display: flex;
 }
+
+.cart-warnings {
+  margin-bottom: 1rem;
+}
+
+/*
+* --------------------------------------------------
+* components/InlineFeedback
+* --------------------------------------------------
+*/
+.inline-feedback {
+  align-items: flex-start;
+  border-radius: 4px;
+  display: flex;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+  padding: 0.75rem 1rem;
+}
+
+.inline-feedback--warning {
+  background-color: #fef3cd;
+  border: 1px solid #ffc107;
+  color: #856404;
+}
+
+.inline-feedback--error {
+  background-color: #f8d7da;
+  border: 1px solid #f5c2c7;
+  color: #842029;
+}
+
+.inline-feedback-icon {
+  flex-shrink: 0;
+  font-size: 1.25rem;
+  line-height: 1;
+}
+
+.inline-feedback-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.inline-feedback-title {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0;
+}
+
+.inline-feedback-description {
+  font-size: 0.875rem;
+  margin: 0.25rem 0 0;
+  opacity: 0.9;
+}
 /*
 * --------------------------------------------------
 * components/Search