Hydrogen 2026.1: What You Need to Know About the API Update
Hydrogen 2026.1: What You Need to Know About the API Update
Shopify released Hydrogen 2026.1.0, aligning with their quarterly API release cycle. Most changes are additive, but there's one breaking change that requires immediate attention if you have custom cart discount logic.
The Breaking Change
The cartDiscountCodesUpdate mutation now requires the discountCodes argument.
Before (Implicit)
cartDiscountCodesUpdate(cartId: $cartId)
After (Explicit)
cartDiscountCodesUpdate(cartId: $cartIddiscountCodes: [] # Required field)
What Else Changed
Hydrogen 2026.1.0 updates both:
- Storefront API → 2026-01
- Customer Account API → 2026-01
This is a quarterly version update aligned with Shopify's API release schedule.
Action Items
- Update packages to Hydrogen 2026.1.0
- Search codebase for
cartDiscountCodesUpdatemutations - Add explicit
discountCodesargument to all calls - Test cart discount functionality
Official Changelogs
For complete details, review:
Bottom Line
10-minute fix if you have custom discount code logic. Otherwise, smooth upgrade.
The migration is straightforward but critical if your store uses programmatic discount code management. Don't skip testing cart functionality after the upgrade.
Building with Hydrogen? Weaverse helps you ship faster with AI-powered theme development. Get started.
Reactions
Join the Discussion
Continue Reading
More insights from the Weaverse team
Migrating from Legacy Customer Accounts in Shopify
For Theme Developers Remove Legacy Liquid Files Delete these files from your theme: templates/customers/login.liquid templates/customers/register.liquid templates/customers/account.liquid Use the New Web Component <!-- Replace legacy login forms with: --> <shopify-account></shopify-account> The shopify-account web component handles: Login/register flows Password reset Account management Multi-factor authentication For App Developers Use Customer Account UI Extensions If your app interacts with customer accounts, migrate to UI extensions: // extension.toml [[extensions.targeting]] target = "customer-account.profile.block-render" // React extension export default function ProfileBlock() { const { customer } = useApi() return ( <BlockStack> <Text>Loyalty Points: {customer.metafields.loyalty.points}</Text> </BlockStack> ) } Stats: 800+ apps already migrated. Don't get left behind. For Custom Storefronts (Hydrogen) Use Customer Account API import { useCustomerAccount } from '@shopify/hydrogen' export function AccountPage() { const { customer, accessToken, logout } = useCustomerAccount() if (!customer) { return <LoginButton /> } return ( <div> <h1>Welcome, {customer.firstName}</h1> <button onClick={logout}>Sign out</button> </div> ) } Migration Steps Update to Hydrogen 2026.x (includes Customer Account API) Replace legacy auth flows with useCustomerAccount hook Test OAuth flow with new customer accounts Remove legacy session handling code Why Migrate? Feature Legacy New MFA Manual Built-in Passwordless No Yes Single sign-on Limited Full OAuth Session security Basic Enhanced Mobile experience Poor Native Checklist Audit themes for legacy customer templates Replace forms with shopify-account component Update apps to use UI extensions Migrate Hydrogen to Customer Account API Test all auth flows Remove legacy session code Need help migrating? Weaverse can modernize your storefront in days, not months.
React Router 7.13.1: URL Masking for Modal PDPs in Hydrogen
React Router 7.13.1: URL Masking for Modal PDPs in Hydrogen The Problem You want a product quick-view modal that: Opens on top of your collection page Shows a shareable URL (/products/sneakers) Keeps the collection visible in the background Works with deep links and browser history Until now, this required manual backgroundLocation management—a clunky pattern that felt like fighting the framework. The Solution React Router 7.13.1 introduces unstable_mask on <Link>. First-class URL masking for Framework/Data Mode. // routes/collection.tsx export default function Collection({ loaderData }) { return ( <div className="collection-grid"> {loaderData.products.map((product) => ( <Link key={product.id} to={`/collection?product=${product.id}`} // Router state unstable_mask={`/products/${product.handle}`} // Browser URL > <ProductCard product={product} /> </Link> ))} {/* Modal overlay */} {loaderData.modalProduct && ( <dialog open> <ProductQuickView product={loaderData.modalProduct} /> </dialog> )} </div> ) } How It Works Router navigates to /collection?product=123 (internal state) Browser shows /products/sneakers (masked URL) Deep link /products/sneakers works normally (mask stripped on SSR) Back button closes modal, restores collection Detecting Masked State import { useLocation } from 'react-router' function ProductModal() { const location = useLocation() // Are we in a modal context? if (location.unstable_mask) { return <ModalProduct /> } // Direct navigation - full page return <FullProductPage /> } Hydrogen Use Cases Modal PDPs from collection grids Image galleries with shareable URLs Cart quick-edit from checkout Filter previews without navigation Important Notes Marked unstable - API may change before stabilization SPA only - Mask removed during SSR (deep links work normally) Requires React Router 7.13.1+ in your Hydrogen project Upgrade npm install react-router@latest
How to Add Shopify shopify-account Component to Your Hydrogen Storefront
How to Add Shopify's New <shopify-account> Component to Your Hydrogen Storefront Shopify just dropped official docs for the <shopify-account> web component — a native way to let customers sign in directly from your Hydrogen storefront without leaving the page. If you've ever wrestled with Hydrogen's Customer Account API setup, this is the simplest auth flow you've seen yet. What Is the <shopify-account> Component? It's a Storefront Web Component that handles the full customer sign-in flow. Drop it in your header, pass two tokens, and your customers get a seamless login experience — all without custom auth routes. Two tokens required: public-access-token → from PUBLIC_STOREFRONT_API_TOKEN in your .env customer-access-token → from the Customer Account API after authentication Prerequisites Before you start: Hydrogen storefront deployed to Oxygen (Getting started guide) Customer Account API configured (Tutorial here) Storefront API permissions in Shopify Admin: unauthenticated_read_customers unauthenticated_read_content unauthenticated_read_product_listings Step 1: Load the Account Component Bundle The bundle isn't included in the default Hydrogen scaffold. Load it via CDN in /app/root.jsx: import { Script } from '@shopify/hydrogen'; // Inside <head> of Layout component: <Script src="https://cdn.shopify.com/storefront/web-components/account.js" /> Step 2: Update /app/root.jsx Loader Pass both publicAccessToken and customerAccessToken down to child components: export async function loader({ context }) { const { storefront, customerAccount } = context; // Get public storefront token const publicAccessToken = context.env.PUBLIC_STOREFRONT_API_TOKEN; // Get customer token (if authenticated) const customerAccessToken = await customerAccount.getAccessToken(); return defer({ publicAccessToken, customerAccessToken, // ...other loader data }); } Step 3: Update PageLayout.jsx Pass the tokens through to your layout and add proper TypeScript types: // Add to @property JSDoc near bottom of file: // * @property {string} publicAccessToken // * @property {string} customerAccessToken Step 4: Replace the Sign In Button in Header.jsx Swap the default "Sign In" link for the <shopify-account> component: function HeaderCtas({ publicAccessToken, customerAccessToken }) { return ( <nav> <shopify-account sign-in-url="/account/login" public-access-token={publicAccessToken} customer-access-token={customerAccessToken} /> {/* Cart icon, etc. */} </nav> ); } Note: sign-in-url should point to your authorization request page — default is /account/login in Hydrogen. Step 5: Upgrade for Better Login UX (Hydrogen ≥ 2025.7.3) If you're on @shopify/hydrogen 2025.7.3+, update /app/routes/account_.login.jsx to use the improved login options: // Use the new login() options for better UX const loginUrl = await customerAccount.login({ // Additional options now available }); Check the full API docs for all available options. Styling The component is fully stylable via CSS. Refer to the Storefront Web Components docs for CSS custom properties. Important: No Localhost Support The Customer Account API doesn't work on localhost. You'll need to deploy to Oxygen to test: shopify hydrogen deploy Test on your production URL after deployment. Why This Matters for Weaverse Users If you're building a Weaverse-powered Hydrogen store, this component drops directly into your theme's header section. No custom auth logic needed. Coming soon: Native <shopify-account> support in Weaverse sections — stay tuned. TL;DR Step File Action 1 root.jsx Load CDN bundle + pass tokens from loader 2 PageLayout.jsx Thread tokens to child components 3 Header.jsx Replace Sign In with <shopify-account> 4 account_.login.jsx Update if on Hydrogen ≥ 2025.7.3 Official docs: https://shopify.dev/docs/storefronts/headless/bring-your-own-stack/hydrogen-with-account-component
Never miss an update
Subscribe to get the latest insights, tutorials, and best practices for building high-performance headless stores delivered to your inbox.
