Updates

Welcome to the April release! In this release, we bring fixes to internationalization, cart functionality, and template improvements. Let's dive into what's new.

Internationalization Improvements

Fixed duplicate content issues with internationalized product handles (#2821). Previously, translated product handles could create duplicate content at multiple URLs. For example:

https://hydrogen.shop/de-de/products/das-chaos
https://hydrogen.shop/de-de/products/the-havoc

The starter template now redirects to the localized URL, improving SEO and user experience.

Cart and Customer Account Enhancements

• Fixed cart quantity validation (#2855)
• Improved customer account logout handling (#2843)
  • Now clears all session data by default
  • Added keepSession option for custom data retention

Product Management Updates

• Deprecated <VariantSelector /> (#2837)
  • We recommend using the getProductOptions utility instead.
  • Please refer to the implementation in our skeleton template, which has already made this transition
• Refactored ProductItem into a separate component (#2872)

Cart Delivery Features

Added support for cart delivery address mutations (#2850):

• cartDeliveryAddressesAdd

• cartDeliveryAddressesRemove

• cartDeliveryAddressesUpdate

Migration Notes

Upgrading from VariantSelector

When migrating from VariantSelector to getProductOptions:

1. Update SFAPI product query with new fields:

• • encodedVariantExistence
  • encodedVariantAvailability

1. Remove VARIANTS_QUERY from loadDeferredData
2. Update Product component to use getAdjacentAndFirstAvailableVariants
3. Implement URL parameter handling for variant selection

For more detailed instructions, please refer to the changelog.

To take advantage of all the latest features and improvements in Hydrogen, just run npx shopify hydrogen upgrade. That’s it for the April release!

Welcome to our March release! In this release, we’ve added support for Vite 6 and the Remix v3_routeConfig future flag. 

Support for Vite 6

Hydrogen has completed the migration from Vite 5 to Vite 6, following the Remix upgrade to Vite 6 in version 2.16.0. Vite 6 offers performance enhancements and improved HMR (Hot Module Replacement). If you have any custom Vite integrations, please refer to vite migration guide for more information.

Turn on Remix future flag: v3_routeConfig

Remix is merging with React Router 7. Enabling v3_routeConfig future flag is the recommended migration path to React Router 7.

Update your vite.config.ts:

   export default defineConfig({
  plugins: [
    hydrogen(),
    oxygen(),
    remix({
      presets: [hydrogen.v3preset()], // Update this to hydrogen.v3preset()
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
        v3_lazyRouteDiscovery: true,
        v3_singleFetch: true,
        v3_routeConfig: true, // add this flag
      },
    }),
    tsconfigPaths(),
  ],

Update your package.json and install the new packages. Make sure to match the Remix version along with other Remix npm packages and ensure the versions are 2.16.1 or above:

"devDependencies": {
 ...
 "@remix-run/fs-routes": "^2.16.1",
 "@remix-run/route-config": "^2.16.1",

Add a routes.ts file. This is your new Remix route configuration file.

export default hydrogenRoutes([
  ...(await flatRoutes()),
  // Manual route definitions can be added to this array, in addition to or instead of using the `flatRoutes` file-based routing convention.
  // See https://remix.run/docs/en/main/guides/routing for more details
]) satisfies RouteConfig;

For more detailed upgrade instructions, see the v3_routeConfig PR or refer to the Remix guide.

To take advantage of all the latest features and improvements in Hydrogen, just run npx shopify hydrogen upgrade. That’s it for the March release — see you in April!

Welcome to our January release! This release supports the latest Storefront API (2025-01) and contains package updates and validation on Remix future flag.

Turn on Remix future flag: v3_lazyRouteDiscovery

Remix introduced lazy route discovery future flag to optimize route manifest delivery. To turn it on, simply add the following line to your vite.config.ts:

export default defineConfig({
 plugins: [
   hydrogen(),
   oxygen(),
   remix({
     presets: [hydrogen.preset()],
     future: {
       v3_fetcherPersist: true,
       v3_relativeSplatPath: true,
       v3_throwAbortReason: true,
       v3_lazyRouteDiscovery: true,  // add this flag
     },
   }),
   tsconfigPaths(),
 ],

For more information, see the v3_lazyRouteDiscovery PR or refer to the Remix guide [https://remix.run/docs/en/main/start/future-flags#v3_lazyroutediscovery].

Cart delivery address update (breaking)

SFAPI 2025-01 updated how cart delivery address is handled (changelog). cart.buyerIdentity.deliveryAddressPreferences is deprecated.

query CartQuery(
  ...
) @inContext(country: $country, language: $language) {
  cart(id: $cartId) {
    buyerIdentity {
      deliveryAddressPreferences {   // deprecated
	 ...
      }
    }
  }
}

Use the new cart.delivery instead.

query CartQuery(
  ...
) @inContext(country: $country, language: $language) {
  cart(id: $cartId) {
    delivery {  // new cart delivery endpoint
      ...
    }
  }
}

To modify the cart delivery address, 3 new mutations are introduced: cartDeliveryAdressesAdd, cartDeliveryAddressesUpdate, and cartDeliveryAddressesRemove. 

To take advantage of all the latest features and improvements in Hydrogen, just run npx shopify hydrogen upgrade. That’s it for the January release — see you next month!