Display warnings and errors in the cart by fredericoo · Pull Request #3400 · Shopify/hydrogen

fredericoo · 2026-01-22T19:58:39Z

Closes #969

WHY are these changes introduced?

This PR adds the ability to display warnings to users in the cart, improving the user experience by providing clear feedback when there are issues with their cart.

WHAT is this pull request doing?

Adds a new InlineWarning component for displaying warning messages in an accessible way
Implements useCartFeedback hook to collect and normalize errors and warnings from cart fetchers
Adds CartWarnings component to display warnings in the cart interface
Updates the cart styling to properly display warning messages
Integrates the warning system with the existing cart functionality

HOW to test your changes?

Add items to cart
Trigger a cart warning (e.g., by attempting to add more items than available in inventory)
Verify that warnings appear properly in the cart interface
Check that warnings are properly styled and accessible

Checklist

I've read the Contributing Guidelines
I've considered possible cross-platform impacts (Mac, Linux, Windows)
I've added a changeset if this PR contains user-facing or noteworthy changes
I've added tests to cover my changes
I've added or updated the documentation

fredericoo · 2026-01-22T19:59:07Z

Display warnings and errors in the cart #3400 👈 (View in Graphite)
feat: update SFAPI and CAAPI to 2025-10 #3352 : 6 other dependent PRs (#3284 , #3393 , #3398 and 3 others)
main

This stack of pull requests is managed by Graphite. Learn more about stacking.

shopify · 2026-01-22T20:01:07Z

Oxygen deployed a preview of your Add_MERCHANDISE_SELLING_PLAN_NOT_APPLICABLE_ON_COMPANY_LOCATION_warning_support branch. Details:

Storefront	Status	Preview link	Deployment details	Last update (UTC)
Skeleton (skeleton.hydrogen.shop)	✅ Successful (Logs)	Preview deployment	Inspect deployment	February 16, 2026 1:02 PM
metaobjects	✅ Successful (Logs)	Preview deployment	Inspect deployment	January 23, 2026 4:06 PM
custom-cart-method	✅ Successful (Logs)	Preview deployment	Inspect deployment	January 23, 2026 4:06 PM
third-party-queries-caching	✅ Successful (Logs)	Preview deployment	Inspect deployment	January 23, 2026 4:06 PM
sitemap	✅ Successful (Logs)	Preview deployment	Inspect deployment	January 23, 2026 4:06 PM

Learn more about Hydrogen's GitHub integration.

templates/skeleton/app/components/CartWarnings.tsx

templates/skeleton/app/components/InlineWarning.tsx

templates/skeleton/app/components/CartWarnings.tsx

templates/skeleton/app/components/CartLineItem.tsx

kdaviduik · 2026-01-27T03:13:33Z

Please re-request my review when you want me to take a look again :) I saw you made some changes but this comment still applies so I'm assuming it's not yet ready for re-review

templates/skeleton/app/components/CartWarnings.tsx

templates/skeleton/app/components/InlineFeedback.tsx

templates/skeleton/app/components/CartLineItem.tsx

itsjustriley

Just some questions/small change suggests. Will work on tophatting.

templates/skeleton/app/components/CartLineItem.tsx

templates/skeleton/app/components/CartWarnings.tsx

e2e/specs/smoke/cart.spec.ts

templates/skeleton/app/components/CartWarnings.tsx

kdaviduik · 2026-02-05T17:02:07Z

templates/skeleton/app/components/CartLineItem.tsx

 import {CartForm, Image, type OptimisticCartLine} from '@shopify/hydrogen';
 import {useVariantUrl} from '~/lib/variants';
-import {Link} from 'react-router';
+import {


(threading)

Overall this is looking pretty good, though it feels unexpected that pressing the enter key doesn't submit the cart form (only on blur or arrow keys submits it).

good shout! its a one liner why not

also fixed an issue where if you type invalid values and then blur it would keep them in the input, now it reverts to the server value so it is truthful to the selection

🐛 bug: when submitting with enter, blurring will remove the warning. the warning should stay onblur after submitting with enter

that fetcher data workaround is biting us on the back omg

this is because blurring submits anyway

will have another stab at it in a bit!

kdaviduik · 2026-02-05T17:05:05Z

templates/skeleton/app/components/InlineFeedback.tsx

+  const {icon, role} = FEEDBACK_PROPS[type];
+
+  return (
+    <div className={`inline-feedback inline-feedback--${type}`} role={role}>


(threading)

I was testing this with VoiceOver and the cart warning never got announced. I imagine because it's trying to set this as role=warning which doesn't exist

I imagine this is the kind of thing that would get caught with an accessibility linter / automated accessibility tests, which we are planning to add

no, role will be either "alert" or "status" but only errors will use alert (see lines 7-19)

have you tried triggering an error?

but we can revert to using role alert on both, as it was!

Ah yes you're right, that's so weird why it's not announcing it. I was only testing with warnings, not errors. maybe try role=alert with voiceover to see if that one works?

templates/skeleton/app/components/CartWarnings.tsx

kdaviduik · 2026-02-10T04:12:21Z

@fredericoo let me know (or request my re-review) when this one is ready :)

This was referenced Jan 22, 2026

[2025-10] Add cartGiftCardCodesAdd mutation and remove Update filtering #3284

Closed

BREAKING CHANGE: document updated cartDeliveryAddressesUpdate empty array behavior #3393

Merged

fredericoo mentioned this pull request Jan 22, 2026

feat: add support for nested cart lines #3398

Merged

5 tasks

fredericoo changed the title ~~fix: adjust state~~ Add MERCHANDISE_SELLING_PLAN_NOT_APPLICABLE_ON_COMPANY_LOCATION warning support Jan 22, 2026

fredericoo force-pushed the Add_MERCHANDISE_SELLING_PLAN_NOT_APPLICABLE_ON_COMPANY_LOCATION_warning_support branch from 3ecb1f8 to 9a80d6f Compare January 22, 2026 20:09

fredericoo marked this pull request as ready for review January 22, 2026 20:11

fredericoo requested a review from a team as a code owner January 22, 2026 20:11

fredericoo commented Jan 22, 2026

View reviewed changes

templates/skeleton/app/components/CartWarnings.tsx Show resolved Hide resolved

brookslybrand reviewed Jan 22, 2026

View reviewed changes

templates/skeleton/app/components/CartWarnings.tsx Show resolved Hide resolved

kdaviduik changed the base branch from 2025-10-sfapi-caapi-update to graphite-base/3400 January 23, 2026 03:59

kdaviduik reviewed Jan 23, 2026

View reviewed changes

templates/skeleton/app/components/CartWarnings.tsx Outdated Show resolved Hide resolved

fredericoo force-pushed the Add_MERCHANDISE_SELLING_PLAN_NOT_APPLICABLE_ON_COMPANY_LOCATION_warning_support branch from 9a80d6f to 955ac0f Compare January 23, 2026 16:03

fredericoo changed the base branch from graphite-base/3400 to 2025-10-sfapi-caapi-update January 23, 2026 16:03

fredericoo changed the title ~~Add MERCHANDISE_SELLING_PLAN_NOT_APPLICABLE_ON_COMPANY_LOCATION warning support~~ Add cart warnings component to display feedback to users Jan 23, 2026

kdaviduik changed the base branch from 2025-10-sfapi-caapi-update to graphite-base/3400 January 26, 2026 03:28

kdaviduik reviewed Jan 26, 2026

View reviewed changes

templates/skeleton/app/components/InlineWarning.tsx Outdated Show resolved Hide resolved

templates/skeleton/app/components/CartWarnings.tsx Show resolved Hide resolved

fredericoo force-pushed the Add_MERCHANDISE_SELLING_PLAN_NOT_APPLICABLE_ON_COMPANY_LOCATION_warning_support branch 2 times, most recently from 80251b9 to 98b056a Compare January 26, 2026 13:55

fredericoo changed the base branch from graphite-base/3400 to 2025-10-sfapi-caapi-update January 26, 2026 13:55

fredericoo commented Jan 26, 2026

View reviewed changes

templates/skeleton/app/components/CartLineItem.tsx Show resolved Hide resolved

fredericoo force-pushed the Add_MERCHANDISE_SELLING_PLAN_NOT_APPLICABLE_ON_COMPANY_LOCATION_warning_support branch from 98b056a to 4c316a0 Compare January 26, 2026 14:53

fredericoo changed the title ~~Add cart warnings component to display feedback to users~~ Display warnings and errors in the cart Jan 26, 2026

fredericoo force-pushed the Add_MERCHANDISE_SELLING_PLAN_NOT_APPLICABLE_ON_COMPANY_LOCATION_warning_support branch from 4c316a0 to 75e10cd Compare January 26, 2026 15:25

kdaviduik changed the base branch from 2025-10-sfapi-caapi-update to graphite-base/3400 January 26, 2026 19:37

This was referenced Jan 27, 2026

feat(hydrogen-react): add article_reference metafield type support #3407

Merged

chore(cart): remove redundant gift card code deduplication #3402

Merged

feat(cart): add cartGiftCardCodesAdd mutation #3401

Merged

fredericoo force-pushed the Add_MERCHANDISE_SELLING_PLAN_NOT_APPLICABLE_ON_COMPANY_LOCATION_warning_support branch 2 times, most recently from 66385cf to 2ead87a Compare January 27, 2026 11:10

fredericoo changed the base branch from graphite-base/3400 to 2025-10-sfapi-caapi-update January 27, 2026 11:10

Base automatically changed from 2025-10-sfapi-caapi-update to main January 27, 2026 17:08

fredericoo added 2 commits January 28, 2026 18:03

fix: adjust state

a41cfb9

fix: aria attributes

cdab032

fredericoo force-pushed the Add_MERCHANDISE_SELLING_PLAN_NOT_APPLICABLE_ON_COMPANY_LOCATION_warning_support branch from 09b9d0e to cdab032 Compare January 28, 2026 18:03

fredericoo requested review from itsjustriley and kdaviduik January 28, 2026 18:03

kdaviduik requested changes Jan 30, 2026

View reviewed changes

fredericoo added 7 commits January 30, 2026 15:53

fix: wrong tsdoc

ccfbb44

feat: conditional roles for inline feedback

7e38f39

fix: ignore nan or zero quantities

fa948ec

chore: remove unused bit

7c2812e

refactor: useeffect

0411aa0

refactor: remove any

c398a95

do not remount input

7511cab

fredericoo requested a review from kdaviduik February 3, 2026 18:40

itsjustriley reviewed Feb 4, 2026

View reviewed changes

fredericoo added 3 commits February 4, 2026 15:41

docs: outdated

1180156

fix: consider userErrors without code

c7aa448

chore: remove unused import

badd534

fredericoo requested a review from itsjustriley February 5, 2026 16:38

kdaviduik requested changes Feb 5, 2026

View reviewed changes

feat: submit with enter, revert value if invalid

1d2bc42

fix: avoid resubmission if value is the same

d538720

Conversation

fredericoo commented Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

WHY are these changes introduced?

WHAT is this pull request doing?

HOW to test your changes?

Checklist

Uh oh!

fredericoo commented Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

shopify bot commented Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kdaviduik commented Jan 27, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

itsjustriley left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

fredericoo Feb 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

kdaviduik commented Feb 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

fredericoo commented Jan 22, 2026 •

edited

Loading

fredericoo commented Jan 22, 2026 •

edited

Loading

shopify bot commented Jan 22, 2026 •

edited

Loading

fredericoo Feb 5, 2026 •

edited

Loading