@shopify/cli-hydrogen 10.0.0 → 10.0.2

package/dist/assets/hydrogen/starter/CHANGELOG.md

@@ -1,5 +1,52 @@
 # skeleton
 
+## 2025.4.0
+
+### Patch Changes
+
+- Moved the Cursor rules into more generic LLM prompt files. If you were using the Cursor rules, you will find the prompts in the `cookbook/llms` folder and they can be put into your `.cursor/rules` folder manually. LLM prompt files will be maintained moving forward, while previous Cursor rules will not be updated anymore. ([#2936](https://github.com/Shopify/hydrogen/pull/2936)) by [@ruggishop](https://github.com/ruggishop)
+
+- Added bundles recipe ([#2915](https://github.com/Shopify/hydrogen/pull/2915)) by [@ruggishop](https://github.com/ruggishop)
+
+- Update copy for subscriptions, combined listings, bundles recipes ([#2924](https://github.com/Shopify/hydrogen/pull/2924)) by [@ruggishop](https://github.com/ruggishop)
+
+- Bump skeleton @shopify/cli and @shopify/mini-oxygen ([#2883](https://github.com/Shopify/hydrogen/pull/2883)) by [@juanpprieto](https://github.com/juanpprieto)
+
+- Remove rules from the template. ([#2931](https://github.com/Shopify/hydrogen/pull/2931)) by [@ruggishop](https://github.com/ruggishop)
+
+- Update SFAPI and CAAPI versions to 2025.04 ([#2886](https://github.com/Shopify/hydrogen/pull/2886)) by [@juanpprieto](https://github.com/juanpprieto)
+
+- Updated recipes: subscriptions, bundles, combined-listings. New recipe: markets. ([#2930](https://github.com/Shopify/hydrogen/pull/2930)) by [@ruggishop](https://github.com/ruggishop)
+
+- Updated the subscriptions recipe to better display the purchase options. ([#2912](https://github.com/Shopify/hydrogen/pull/2912)) by [@ruggishop](https://github.com/ruggishop)
+
+- Bump recipes with copy adjustments ([#2935](https://github.com/Shopify/hydrogen/pull/2935)) by [@ruggishop](https://github.com/ruggishop)
+
+- Added a Combined Listings recipe. ([#2876](https://github.com/Shopify/hydrogen/pull/2876)) by [@ruggishop](https://github.com/ruggishop)
+
+- Updated dependencies [[`af23e710`](https://github.com/Shopify/hydrogen/commit/af23e710dac83bb57498d9c2ef1d8bcf9df55d34), [`9d8a6644`](https://github.com/Shopify/hydrogen/commit/9d8a6644a5b67dca890c6687df390aee78fc85c3)]:
+  - @shopify/hydrogen@2025.4.0
+
+## 2025.1.7
+
+### Patch Changes
+
+- Fix an issue with our starter template where duplicate content can exist on URLs that use internationalized handles. For example, if you have a product handle in english of `the-havoc` and translate it to `das-chaos` in German, duplicate content exists at both: ([#2821](https://github.com/Shopify/hydrogen/pull/2821)) by [@blittle](https://github.com/blittle)
+
+  1. https://hydrogen.shop/de-de/products/das-chaos
+  2. https://hydrogen.shop/de-de/products/the-havoc
+
+  We've changed the starter template to make the second redirect to the first.
+
+- Added the Cursor rule for the subscriptions recipe. ([#2874](https://github.com/Shopify/hydrogen/pull/2874)) by [@ruggishop](https://github.com/ruggishop)
+
+- Fix faulty truthiness check for cart quantity ([#2855](https://github.com/Shopify/hydrogen/pull/2855)) by [@frontsideair](https://github.com/frontsideair)
+
+- Refactor ProductItem into a separate component ([#2872](https://github.com/Shopify/hydrogen/pull/2872)) by [@juanpprieto](https://github.com/juanpprieto)
+
+- Updated dependencies [[`f80f3bc7`](https://github.com/Shopify/hydrogen/commit/f80f3bc7239b3ee6641cb468a17e15c77bb7815b), [`61ddf924`](https://github.com/Shopify/hydrogen/commit/61ddf92487524b3c04632ae2cfdaa2869a3ae02c), [`642bde4f`](https://github.com/Shopify/hydrogen/commit/642bde4f3df11511e125b013abd977618da25692)]:
+  - @shopify/hydrogen@2025.1.4
+
 ## 2025.1.6
 
 ### Patch Changes
@@ -117,13 +164,13 @@
   1. Add a routes.ts file. This is your new Remix route configuration file.
 
      ```ts
-     import { flatRoutes } from "@remix-run/fs-routes";
-     import { layout, type RouteConfig } from "@remix-run/route-config";
-     import { hydrogenRoutes } from "@shopify/hydrogen";
+     import {flatRoutes} from '@remix-run/fs-routes';
+     import {layout, type RouteConfig} from '@remix-run/route-config';
+     import {hydrogenRoutes} from '@shopify/hydrogen';
 
      export default hydrogenRoutes([
        // Your entire app reading from routes folder using Layout from layout.tsx
-       layout("./layout.tsx", await flatRoutes()),
+       layout('./layout.tsx', await flatRoutes()),
      ]) satisfies RouteConfig;
      ```
 
@@ -714,25 +761,25 @@
   8. Update the `ProductForm` component.
 
   ```tsx
-  import { Link, useNavigate } from "@remix-run/react";
-  import { type MappedProductOptions } from "@shopify/hydrogen";
+  import {Link, useNavigate} from '@remix-run/react';
+  import {type MappedProductOptions} from '@shopify/hydrogen';
   import type {
     Maybe,
     ProductOptionValueSwatch,
-  } from "@shopify/hydrogen/storefront-api-types";
-  import { AddToCartButton } from "./AddToCartButton";
-  import { useAside } from "./Aside";
-  import type { ProductFragment } from "storefrontapi.generated";
+  } from '@shopify/hydrogen/storefront-api-types';
+  import {AddToCartButton} from './AddToCartButton';
+  import {useAside} from './Aside';
+  import type {ProductFragment} from 'storefrontapi.generated';
 
   export function ProductForm({
     productOptions,
     selectedVariant,
   }: {
     productOptions: MappedProductOptions[];
-    selectedVariant: ProductFragment["selectedOrFirstAvailableVariant"];
+    selectedVariant: ProductFragment['selectedOrFirstAvailableVariant'];
   }) {
     const navigate = useNavigate();
-    const { open } = useAside();
+    const {open} = useAside();
     return (
       <div className="product-form">
         {productOptions.map((option) => (
@@ -766,8 +813,8 @@
                       to={`/products/${handle}?${variantUriQuery}`}
                       style={{
                         border: selected
-                          ? "1px solid black"
-                          : "1px solid transparent",
+                          ? '1px solid black'
+                          : '1px solid transparent',
                         opacity: available ? 1 : 0.3,
                       }}
                     >
@@ -784,13 +831,13 @@
                     <button
                       type="button"
                       className={`product-options-item${
-                        exists && !selected ? " link" : ""
+                        exists && !selected ? ' link' : ''
                       }`}
                       key={option.name + name}
                       style={{
                         border: selected
-                          ? "1px solid black"
-                          : "1px solid transparent",
+                          ? '1px solid black'
+                          : '1px solid transparent',
                         opacity: available ? 1 : 0.3,
                       }}
                       disabled={!exists}
@@ -814,7 +861,7 @@
         <AddToCartButton
           disabled={!selectedVariant || !selectedVariant.availableForSale}
           onClick={() => {
-            open("cart");
+            open('cart');
           }}
           lines={
             selectedVariant
@@ -828,7 +875,7 @@
               : []
           }
         >
-          {selectedVariant?.availableForSale ? "Add to cart" : "Sold out"}
+          {selectedVariant?.availableForSale ? 'Add to cart' : 'Sold out'}
         </AddToCartButton>
       </div>
     );
@@ -851,7 +898,7 @@
         aria-label={name}
         className="product-option-label-swatch"
         style={{
-          backgroundColor: color || "transparent",
+          backgroundColor: color || 'transparent',
         }}
       >
         {!!image && <img src={image} alt={name} />}
@@ -1352,21 +1399,21 @@
   New `withCache.fetch` is for caching simple fetch requests. This method caches the responses if they are OK responses, and you can pass `shouldCacheResponse`, `cacheKey`, etc. to modify behavior. `data` is the consumed body of the response (we need to consume to cache it).
 
   ```ts
-  const withCache = createWithCache({ cache, waitUntil, request });
+  const withCache = createWithCache({cache, waitUntil, request});
 
-  const { data, response } = await withCache.fetch<{ data: T; error: string }>(
-    "my-cms.com/api",
+  const {data, response} = await withCache.fetch<{data: T; error: string}>(
+    'my-cms.com/api',
     {
-      method: "POST",
-      headers: { "Content-type": "application/json" },
+      method: 'POST',
+      headers: {'Content-type': 'application/json'},
       body,
     },
     {
       cacheStrategy: CacheLong(),
       // Cache if there are no data errors or a specific data that make this result not suited for caching
       shouldCacheResponse: (result) => !result?.error,
-      cacheKey: ["my-cms", body],
-      displayName: "My CMS query",
+      cacheKey: ['my-cms', body],
+      displayName: 'My CMS query',
     },
   );
   ```
@@ -1942,9 +1989,9 @@
 
   ```tsx
   // app/lib/root-data.ts
-  import { useMatches } from "@remix-run/react";
-  import type { SerializeFrom } from "@shopify/remix-oxygen";
-  import type { loader } from "~/root";
+  import {useMatches} from '@remix-run/react';
+  import type {SerializeFrom} from '@shopify/remix-oxygen';
+  import type {loader} from '~/root';
 
   /**
    * Access the result of the root loader from a React component.
@@ -2106,10 +2153,10 @@
 - This is an important fix to a bug with 404 routes and path-based i18n projects where some unknown routes would not properly render a 404. This fixes all new projects, but to fix existing projects, add a `($locale).tsx` route with the following contents: ([#1732](https://github.com/Shopify/hydrogen/pull/1732)) by [@blittle](https://github.com/blittle)
 
   ```ts
-  import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
+  import {type LoaderFunctionArgs} from '@remix-run/server-runtime';
 
-  export async function loader({ params, context }: LoaderFunctionArgs) {
-    const { language, country } = context.storefront.i18n;
+  export async function loader({params, context}: LoaderFunctionArgs) {
+    const {language, country} = context.storefront.i18n;
 
     if (
       params.locale &&
@@ -2117,7 +2164,7 @@
     ) {
       // If the locale URL param is defined, yet we still are still at the default locale
       // then the the locale param must be invalid, send to the 404 page
-      throw new Response(null, { status: 404 });
+      throw new Response(null, {status: 404});
     }
 
     return null;
@@ -2173,11 +2220,11 @@
   ```yaml
   projects:
     default:
-      schema: "node_modules/@shopify/hydrogen/storefront.schema.json"
+      schema: 'node_modules/@shopify/hydrogen/storefront.schema.json'
       documents:
-        - "!*.d.ts"
-        - "*.{ts,tsx,js,jsx}"
-        - "app/**/*.{ts,tsx,js,jsx}"
+        - '!*.d.ts'
+        - '*.{ts,tsx,js,jsx}'
+        - 'app/**/*.{ts,tsx,js,jsx}'
   ```
 
 - Improve resiliency of `HydrogenSession` ([#1583](https://github.com/Shopify/hydrogen/pull/1583)) by [@blittle](https://github.com/blittle)
@@ -2392,8 +2439,8 @@
   ```ts
   // root.tsx
 
-  import { useMatches } from "@remix-run/react";
-  import { type SerializeFrom } from "@shopify/remix-oxygen";
+  import {useMatches} from '@remix-run/react';
+  import {type SerializeFrom} from '@shopify/remix-oxygen';
 
   export const useRootLoaderData = () => {
     const [root] = useMatches();

package/dist/assets/hydrogen/starter/app/components/CartLineItem.tsx

@@ -123,6 +123,7 @@ function CartLineRemoveButton({
 }) {
   return (
     <CartForm
+      fetcherKey={getUpdateKey(lineIds)}
       route="/cart"
       action={CartForm.ACTIONS.LinesRemove}
       inputs={{lineIds}}
@@ -141,8 +142,11 @@ function CartLineUpdateButton({
   children: React.ReactNode;
   lines: CartLineUpdateInput[];
 }) {
+  const lineIds = lines.map((line) => line.id);
+
   return (
     <CartForm
+      fetcherKey={getUpdateKey(lineIds)}
       route="/cart"
       action={CartForm.ACTIONS.LinesUpdate}
       inputs={{lines}}
@@ -151,3 +155,14 @@ function CartLineUpdateButton({
     </CartForm>
   );
 }
+
+/**
+ * Returns a unique key for the update action. This is used to make sure actions modifying the same line
+ * items are not run concurrently, but cancel each other. For example, if the user clicks "Increase quantity"
+ * and "Decrease quantity" in rapid succession, the actions will cancel each other and only the last one will run.
+ * @param lineIds - line ids affected by the update
+ * @returns
+ */
+function getUpdateKey(lineIds: string[]) {
+  return [CartForm.ACTIONS.LinesUpdate, ...lineIds].join('-');
+}

package/dist/assets/hydrogen/starter/app/components/CartMain.tsx

@@ -26,7 +26,7 @@ export function CartMain({layout, cart: originalCart}: CartMainProps) {
     cart &&
     Boolean(cart?.discountCodes?.filter((code) => code.applicable)?.length);
   const className = `cart-main ${withDiscount ? 'with-discount' : ''}`;
-  const cartHasItems = cart?.totalQuantity && cart?.totalQuantity > 0;
+  const cartHasItems = cart?.totalQuantity ? cart.totalQuantity > 0 : false;
 
   return (
     <div className={className}>

package/dist/assets/hydrogen/starter/app/components/ProductItem.tsx

@@ -0,0 +1,44 @@
+import {Link} from '@remix-run/react';
+import {Image, Money} from '@shopify/hydrogen';
+import type {
+  ProductItemFragment,
+  CollectionItemFragment,
+  RecommendedProductFragment,
+} from 'storefrontapi.generated';
+import {useVariantUrl} from '~/lib/variants';
+
+export function ProductItem({
+  product,
+  loading,
+}: {
+  product:
+    | CollectionItemFragment
+    | ProductItemFragment
+    | RecommendedProductFragment;
+  loading?: 'eager' | 'lazy';
+}) {
+  const variantUrl = useVariantUrl(product.handle);
+  const image = product.featuredImage;
+  return (
+    <Link
+      className="product-item"
+      key={product.id}
+      prefetch="intent"
+      to={variantUrl}
+    >
+      {image && (
+        <Image
+          alt={image.altText || product.title}
+          aspectRatio="1/1"
+          data={image}
+          loading={loading}
+          sizes="(min-width: 45em) 400px, 100vw"
+        />
+      )}
+      <h4>{product.title}</h4>
+      <small>
+        <Money data={product.priceRange.minVariantPrice} />
+      </small>
+    </Link>
+  );
+}

package/dist/assets/hydrogen/starter/app/lib/redirect.ts

@@ -0,0 +1,23 @@
+import {redirect} from '@shopify/remix-oxygen';
+
+export function redirectIfHandleIsLocalized(
+  request: Request,
+  ...localizedResources: Array<{
+    handle: string;
+    data: {handle: string} & unknown;
+  }>
+) {
+  const url = new URL(request.url);
+  let shouldRedirect = false;
+
+  localizedResources.forEach(({handle, data}) => {
+    if (handle !== data.handle) {
+      url.pathname = url.pathname.replace(handle, data.handle);
+      shouldRedirect = true;
+    }
+  });
+
+  if (shouldRedirect) {
+    throw redirect(url.toString());
+  }
+}

package/dist/assets/hydrogen/starter/app/routes/_index.tsx

@@ -6,6 +6,7 @@ import type {
   FeaturedCollectionFragment,
   RecommendedProductsQuery,
 } from 'storefrontapi.generated';
+import {ProductItem} from '~/components/ProductItem';
 
 export const meta: MetaFunction = () => {
   return [{title: 'Hydrogen | Home'}];
@@ -101,21 +102,7 @@ function RecommendedProducts({
             <div className="recommended-products-grid">
               {response
                 ? response.products.nodes.map((product) => (
-                    <Link
-                      key={product.id}
-                      className="recommended-product"
-                      to={`/products/${product.handle}`}
-                    >
-                      <Image
-                        data={product.images.nodes[0]}
-                        aspectRatio="1/1"
-                        sizes="(min-width: 45em) 20vw, 50vw"
-                      />
-                      <h4>{product.title}</h4>
-                      <small>
-                        <Money data={product.priceRange.minVariantPrice} />
-                      </small>
-                    </Link>
+                    <ProductItem key={product.id} product={product} />
                   ))
                 : null}
             </div>
@@ -161,14 +148,12 @@ const RECOMMENDED_PRODUCTS_QUERY = `#graphql
         currencyCode
       }
     }
-    images(first: 1) {
-      nodes {
-        id
-        url
-        altText
-        width
-        height
-      }
+    featuredImage {
+      id
+      url
+      altText
+      width
+      height
     }
   }
   query RecommendedProducts ($country: CountryCode, $language: LanguageCode)

package/dist/assets/hydrogen/starter/app/routes/blogs.$blogHandle.$articleHandle.tsx

@@ -1,6 +1,7 @@
 import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {useLoaderData, type MetaFunction} from '@remix-run/react';
 import {Image} from '@shopify/hydrogen';
+import {redirectIfHandleIsLocalized} from '~/lib/redirect';
 
 export const meta: MetaFunction<typeof loader> = ({data}) => {
   return [{title: `Hydrogen | ${data?.article.title ?? ''} article`}];
@@ -20,7 +21,11 @@ export async function loader(args: LoaderFunctionArgs) {
  * Load data necessary for rendering content above the fold. This is the critical data
  * needed to render the page. If it's unavailable, the whole page should 400 or 500 error.
  */
-async function loadCriticalData({context, params}: LoaderFunctionArgs) {
+async function loadCriticalData({
+  context,
+  request,
+  params,
+}: LoaderFunctionArgs) {
   const {blogHandle, articleHandle} = params;
 
   if (!articleHandle || !blogHandle) {
@@ -38,6 +43,18 @@ async function loadCriticalData({context, params}: LoaderFunctionArgs) {
     throw new Response(null, {status: 404});
   }
 
+  redirectIfHandleIsLocalized(
+    request,
+    {
+      handle: articleHandle,
+      data: blog.articleByHandle,
+    },
+    {
+      handle: blogHandle,
+      data: blog,
+    },
+  );
+
   const article = blog.articleByHandle;
 
   return {article};
@@ -67,7 +84,8 @@ export default function Article() {
       <h1>
         {title}
         <div>
-          {publishedDate} &middot; {author?.name}
+          <time dateTime={article.publishedAt}>{publishedDate}</time> &middot;{' '}
+          <address>{author?.name}</address>
         </div>
       </h1>
 
@@ -89,7 +107,9 @@ const ARTICLE_QUERY = `#graphql
     $language: LanguageCode
   ) @inContext(language: $language, country: $country) {
     blog(handle: $blogHandle) {
+      handle
       articleByHandle(handle: $articleHandle) {
+        handle
         title
         contentHtml
         publishedAt

package/dist/assets/hydrogen/starter/app/routes/blogs.$blogHandle._index.tsx

@@ -3,6 +3,7 @@ import {Link, useLoaderData, type MetaFunction} from '@remix-run/react';
 import {Image, getPaginationVariables} from '@shopify/hydrogen';
 import type {ArticleItemFragment} from 'storefrontapi.generated';
 import {PaginatedResourceSection} from '~/components/PaginatedResourceSection';
+import {redirectIfHandleIsLocalized} from '~/lib/redirect';
 
 export const meta: MetaFunction<typeof loader> = ({data}) => {
   return [{title: `Hydrogen | ${data?.blog.title ?? ''} blog`}];
@@ -49,6 +50,8 @@ async function loadCriticalData({
     throw new Response('Not found', {status: 404});
   }
 
+  redirectIfHandleIsLocalized(request, {handle: params.blogHandle, data: blog});
+
   return {blog};
 }
 
@@ -128,6 +131,7 @@ const BLOGS_QUERY = `#graphql
   ) @inContext(language: $language) {
     blog(handle: $blogHandle) {
       title
+      handle
       seo {
         title
         description

package/dist/assets/hydrogen/starter/app/routes/collections.$handle.tsx

@@ -1,14 +1,9 @@
 import {redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import {useLoaderData, Link, type MetaFunction} from '@remix-run/react';
-import {
-  getPaginationVariables,
-  Image,
-  Money,
-  Analytics,
-} from '@shopify/hydrogen';
-import type {ProductItemFragment} from 'storefrontapi.generated';
-import {useVariantUrl} from '~/lib/variants';
+import {useLoaderData, type MetaFunction} from '@remix-run/react';
+import {getPaginationVariables, Analytics} from '@shopify/hydrogen';
 import {PaginatedResourceSection} from '~/components/PaginatedResourceSection';
+import {redirectIfHandleIsLocalized} from '~/lib/redirect';
+import {ProductItem} from '~/components/ProductItem';
 
 export const meta: MetaFunction<typeof loader> = ({data}) => {
   return [{title: `Hydrogen | ${data?.collection.title ?? ''} Collection`}];
@@ -56,6 +51,9 @@ async function loadCriticalData({
     });
   }
 
+  // The API handle might be localized, so redirect to the localized handle
+  redirectIfHandleIsLocalized(request, {handle, data: collection});
+
   return {
     collection,
   };
@@ -101,38 +99,6 @@ export default function Collection() {
   );
 }
 
-function ProductItem({
-  product,
-  loading,
-}: {
-  product: ProductItemFragment;
-  loading?: 'eager' | 'lazy';
-}) {
-  const variantUrl = useVariantUrl(product.handle);
-  return (
-    <Link
-      className="product-item"
-      key={product.id}
-      prefetch="intent"
-      to={variantUrl}
-    >
-      {product.featuredImage && (
-        <Image
-          alt={product.featuredImage.altText || product.title}
-          aspectRatio="1/1"
-          data={product.featuredImage}
-          loading={loading}
-          sizes="(min-width: 45em) 400px, 100vw"
-        />
-      )}
-      <h4>{product.title}</h4>
-      <small>
-        <Money data={product.priceRange.minVariantPrice} />
-      </small>
-    </Link>
-  );
-}
-
 const PRODUCT_ITEM_FRAGMENT = `#graphql
   fragment MoneyProductItem on MoneyV2 {
     amount

package/dist/assets/hydrogen/starter/app/routes/collections.all.tsx

@@ -1,9 +1,8 @@
 import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import {useLoaderData, Link, type MetaFunction} from '@remix-run/react';
-import {getPaginationVariables, Image, Money} from '@shopify/hydrogen';
-import type {ProductItemFragment} from 'storefrontapi.generated';
-import {useVariantUrl} from '~/lib/variants';
+import {useLoaderData, type MetaFunction} from '@remix-run/react';
+import {getPaginationVariables} from '@shopify/hydrogen';
 import {PaginatedResourceSection} from '~/components/PaginatedResourceSection';
+import {ProductItem} from '~/components/ProductItem';
 
 export const meta: MetaFunction<typeof loader> = () => {
   return [{title: `Hydrogen | Products`}];
@@ -69,44 +68,12 @@ export default function Collection() {
   );
 }
 
-function ProductItem({
-  product,
-  loading,
-}: {
-  product: ProductItemFragment;
-  loading?: 'eager' | 'lazy';
-}) {
-  const variantUrl = useVariantUrl(product.handle);
-  return (
-    <Link
-      className="product-item"
-      key={product.id}
-      prefetch="intent"
-      to={variantUrl}
-    >
-      {product.featuredImage && (
-        <Image
-          alt={product.featuredImage.altText || product.title}
-          aspectRatio="1/1"
-          data={product.featuredImage}
-          loading={loading}
-          sizes="(min-width: 45em) 400px, 100vw"
-        />
-      )}
-      <h4>{product.title}</h4>
-      <small>
-        <Money data={product.priceRange.minVariantPrice} />
-      </small>
-    </Link>
-  );
-}
-
-const PRODUCT_ITEM_FRAGMENT = `#graphql
-  fragment MoneyProductItem on MoneyV2 {
+const COLLECTION_ITEM_FRAGMENT = `#graphql
+  fragment MoneyCollectionItem on MoneyV2 {
     amount
     currencyCode
   }
-  fragment ProductItem on Product {
+  fragment CollectionItem on Product {
     id
     handle
     title
@@ -119,16 +86,16 @@ const PRODUCT_ITEM_FRAGMENT = `#graphql
     }
     priceRange {
       minVariantPrice {
-        ...MoneyProductItem
+        ...MoneyCollectionItem
       }
       maxVariantPrice {
-        ...MoneyProductItem
+        ...MoneyCollectionItem
       }
     }
   }
 ` as const;
 
-// NOTE: https://shopify.dev/docs/api/storefront/2024-01/objects/product
+// NOTE: https://shopify.dev/docs/api/storefront/latest/objects/product
 const CATALOG_QUERY = `#graphql
   query Catalog(
     $country: CountryCode
@@ -140,7 +107,7 @@ const CATALOG_QUERY = `#graphql
   ) @inContext(country: $country, language: $language) {
     products(first: $first, last: $last, before: $startCursor, after: $endCursor) {
       nodes {
-        ...ProductItem
+        ...CollectionItem
       }
       pageInfo {
         hasPreviousPage
@@ -150,5 +117,5 @@ const CATALOG_QUERY = `#graphql
       }
     }
   }
-  ${PRODUCT_ITEM_FRAGMENT}
+  ${COLLECTION_ITEM_FRAGMENT}
 ` as const;

package/dist/assets/hydrogen/starter/app/routes/pages.$handle.tsx

@@ -1,5 +1,6 @@
 import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {useLoaderData, type MetaFunction} from '@remix-run/react';
+import {redirectIfHandleIsLocalized} from '~/lib/redirect';
 
 export const meta: MetaFunction<typeof loader> = ({data}) => {
   return [{title: `Hydrogen | ${data?.page.title ?? ''}`}];
@@ -19,7 +20,11 @@ export async function loader(args: LoaderFunctionArgs) {
  * Load data necessary for rendering content above the fold. This is the critical data
  * needed to render the page. If it's unavailable, the whole page should 400 or 500 error.
  */
-async function loadCriticalData({context, params}: LoaderFunctionArgs) {
+async function loadCriticalData({
+  context,
+  request,
+  params,
+}: LoaderFunctionArgs) {
   if (!params.handle) {
     throw new Error('Missing page handle');
   }
@@ -37,6 +42,8 @@ async function loadCriticalData({context, params}: LoaderFunctionArgs) {
     throw new Response('Not Found', {status: 404});
   }
 
+  redirectIfHandleIsLocalized(request, {handle: params.handle, data: page});
+
   return {
     page,
   };
@@ -72,6 +79,7 @@ const PAGE_QUERY = `#graphql
   )
   @inContext(language: $language, country: $country) {
     page(handle: $handle) {
+      handle
       id
       title
       body

package/dist/assets/hydrogen/starter/app/routes/products.$handle.tsx

@@ -1,4 +1,4 @@
-import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {useLoaderData, type MetaFunction} from '@remix-run/react';
 import {
   getSelectedProductOptions,
@@ -11,6 +11,7 @@ import {
 import {ProductPrice} from '~/components/ProductPrice';
 import {ProductImage} from '~/components/ProductImage';
 import {ProductForm} from '~/components/ProductForm';
+import {redirectIfHandleIsLocalized} from '~/lib/redirect';
 
 export const meta: MetaFunction<typeof loader> = ({data}) => {
   return [
@@ -59,6 +60,9 @@ async function loadCriticalData({
     throw new Response(null, {status: 404});
   }
 
+  // The API handle might be localized, so redirect to the localized handle
+  redirectIfHandleIsLocalized(request, {handle, data: product});
+
   return {
     product,
   };

package/dist/assets/hydrogen/starter/app/styles/app.css

@@ -27,12 +27,17 @@ img {
 * components/Aside
 * --------------------------------------------------
 */
+@media (max-width: 45em) {
+  html:has(.overlay.expanded) {
+    overflow: hidden;
+  }
+}
+
 aside {
   background: var(--color-light);
   box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
   height: 100vh;
-  max-width: var(--aside-width);
-  min-width: var(--aside-width);
+  width: min(var(--aside-width), 100vw);
   position: fixed;
   right: calc(-1 * var(--aside-width));
   top: 0;
@@ -201,6 +206,11 @@ button.reset:hover:not(:has(> *)) {
   margin-left: auto;
 }
 
+.header-ctas > * {
+  min-width: fit-content;
+}
+
+
 /*
 * --------------------------------------------------
 * components/Footer
@@ -212,14 +222,16 @@ button.reset:hover:not(:has(> *)) {
 }
 
 .footer-menu {
-  align-items: center;
+  justify-content: center;
   display: flex;
+  flex-wrap: wrap;
   grid-gap: 1rem;
   padding: 1rem;
 }
 
 .footer-menu a {
   color: var(--color-light);
+  min-width: fit-content;
 }
 
 /*

package/dist/assets/hydrogen/starter/package.json

@@ -2,7 +2,7 @@
   "name": "skeleton",
   "private": true,
   "sideEffects": false,
-  "version": "2025.1.6",
+  "version": "2025.4.0",
   "type": "module",
   "scripts": {
     "build": "shopify hydrogen build --codegen",
@@ -17,7 +17,7 @@
     "@remix-run/react": "^2.16.1",
     "@remix-run/server-runtime": "^2.16.1",
     "graphql": "^16.10.0",
-    "@shopify/hydrogen": "2025.1.3",
+    "@shopify/hydrogen": "2025.4.0",
     "@shopify/remix-oxygen": "^2.0.12",
     "graphql-tag": "^2.12.6",
     "isbot": "^5.1.22",
@@ -32,9 +32,9 @@
     "@remix-run/dev": "^2.16.1",
     "@remix-run/fs-routes": "^2.16.1",
     "@remix-run/route-config": "^2.16.1",
-    "@shopify/cli": "~3.77.1",
+    "@shopify/cli": "~3.79.2",
     "@shopify/hydrogen-codegen": "^0.3.3",
-    "@shopify/mini-oxygen": "^3.2.0",
+    "@shopify/mini-oxygen": "^3.2.1",
     "@shopify/oxygen-workers-types": "^4.1.6",
     "@shopify/prettier-config": "^1.1.2",
     "@total-typescript/ts-reset": "^0.6.1",
@@ -55,7 +55,7 @@
     "eslint-plugin-react-hooks": "^5.1.0",
     "globals": "^15.14.0",
     "typescript": "^5.2.2",
-    "vite": "^6.2.0",
+    "vite": "^6.2.4",
     "vite-tsconfig-paths": "^4.3.1"
   },
   "engines": {

package/dist/assets/hydrogen/starter/storefrontapi.generated.d.ts

@@ -331,11 +331,9 @@ export type RecommendedProductFragment = Pick<
   priceRange: {
     minVariantPrice: Pick<StorefrontAPI.MoneyV2, 'amount' | 'currencyCode'>;
   };
-  images: {
-    nodes: Array<
-      Pick<StorefrontAPI.Image, 'id' | 'url' | 'altText' | 'width' | 'height'>
-    >;
-  };
+  featuredImage?: StorefrontAPI.Maybe<
+    Pick<StorefrontAPI.Image, 'id' | 'url' | 'altText' | 'width' | 'height'>
+  >;
 };
 
 export type RecommendedProductsQueryVariables = StorefrontAPI.Exact<{
@@ -353,14 +351,12 @@ export type RecommendedProductsQuery = {
             'amount' | 'currencyCode'
           >;
         };
-        images: {
-          nodes: Array<
-            Pick<
-              StorefrontAPI.Image,
-              'id' | 'url' | 'altText' | 'width' | 'height'
-            >
-          >;
-        };
+        featuredImage?: StorefrontAPI.Maybe<
+          Pick<
+            StorefrontAPI.Image,
+            'id' | 'url' | 'altText' | 'width' | 'height'
+          >
+        >;
       }
     >;
   };
@@ -374,22 +370,29 @@ export type ArticleQueryVariables = StorefrontAPI.Exact<{
 }>;
 
 export type ArticleQuery = {
-  blog?: StorefrontAPI.Maybe<{
-    articleByHandle?: StorefrontAPI.Maybe<
-      Pick<StorefrontAPI.Article, 'title' | 'contentHtml' | 'publishedAt'> & {
-        author?: StorefrontAPI.Maybe<Pick<StorefrontAPI.ArticleAuthor, 'name'>>;
-        image?: StorefrontAPI.Maybe<
-          Pick<
-            StorefrontAPI.Image,
-            'id' | 'altText' | 'url' | 'width' | 'height'
-          >
-        >;
-        seo?: StorefrontAPI.Maybe<
-          Pick<StorefrontAPI.Seo, 'description' | 'title'>
-        >;
-      }
-    >;
-  }>;
+  blog?: StorefrontAPI.Maybe<
+    Pick<StorefrontAPI.Blog, 'handle'> & {
+      articleByHandle?: StorefrontAPI.Maybe<
+        Pick<
+          StorefrontAPI.Article,
+          'handle' | 'title' | 'contentHtml' | 'publishedAt'
+        > & {
+          author?: StorefrontAPI.Maybe<
+            Pick<StorefrontAPI.ArticleAuthor, 'name'>
+          >;
+          image?: StorefrontAPI.Maybe<
+            Pick<
+              StorefrontAPI.Image,
+              'id' | 'altText' | 'url' | 'width' | 'height'
+            >
+          >;
+          seo?: StorefrontAPI.Maybe<
+            Pick<StorefrontAPI.Seo, 'description' | 'title'>
+          >;
+        }
+      >;
+    }
+  >;
 };
 
 export type BlogQueryVariables = StorefrontAPI.Exact<{
@@ -407,7 +410,7 @@ export type BlogQueryVariables = StorefrontAPI.Exact<{
 
 export type BlogQuery = {
   blog?: StorefrontAPI.Maybe<
-    Pick<StorefrontAPI.Blog, 'title'> & {
+    Pick<StorefrontAPI.Blog, 'title' | 'handle'> & {
       seo?: StorefrontAPI.Maybe<
         Pick<StorefrontAPI.Seo, 'title' | 'description'>
       >;
@@ -587,6 +590,24 @@ export type StoreCollectionsQuery = {
   };
 };
 
+export type MoneyCollectionItemFragment = Pick<
+  StorefrontAPI.MoneyV2,
+  'amount' | 'currencyCode'
+>;
+
+export type CollectionItemFragment = Pick<
+  StorefrontAPI.Product,
+  'id' | 'handle' | 'title'
+> & {
+  featuredImage?: StorefrontAPI.Maybe<
+    Pick<StorefrontAPI.Image, 'id' | 'altText' | 'url' | 'width' | 'height'>
+  >;
+  priceRange: {
+    minVariantPrice: Pick<StorefrontAPI.MoneyV2, 'amount' | 'currencyCode'>;
+    maxVariantPrice: Pick<StorefrontAPI.MoneyV2, 'amount' | 'currencyCode'>;
+  };
+};
+
 export type CatalogQueryVariables = StorefrontAPI.Exact<{
   country?: StorefrontAPI.InputMaybe<StorefrontAPI.CountryCode>;
   language?: StorefrontAPI.InputMaybe<StorefrontAPI.LanguageCode>;
@@ -637,7 +658,7 @@ export type PageQueryVariables = StorefrontAPI.Exact<{
 
 export type PageQuery = {
   page?: StorefrontAPI.Maybe<
-    Pick<StorefrontAPI.Page, 'id' | 'title' | 'body'> & {
+    Pick<StorefrontAPI.Page, 'handle' | 'id' | 'title' | 'body'> & {
       seo?: StorefrontAPI.Maybe<
         Pick<StorefrontAPI.Seo, 'description' | 'title'>
       >;
@@ -1181,15 +1202,15 @@ interface GeneratedQueryTypes {
     return: FeaturedCollectionQuery;
     variables: FeaturedCollectionQueryVariables;
   };
-  '#graphql\n  fragment RecommendedProduct on Product {\n    id\n    title\n    handle\n    priceRange {\n      minVariantPrice {\n        amount\n        currencyCode\n      }\n    }\n    images(first: 1) {\n      nodes {\n        id\n        url\n        altText\n        width\n        height\n      }\n    }\n  }\n  query RecommendedProducts ($country: CountryCode, $language: LanguageCode)\n    @inContext(country: $country, language: $language) {\n    products(first: 4, sortKey: UPDATED_AT, reverse: true) {\n      nodes {\n        ...RecommendedProduct\n      }\n    }\n  }\n': {
+  '#graphql\n  fragment RecommendedProduct on Product {\n    id\n    title\n    handle\n    priceRange {\n      minVariantPrice {\n        amount\n        currencyCode\n      }\n    }\n    featuredImage {\n      id\n      url\n      altText\n      width\n      height\n    }\n  }\n  query RecommendedProducts ($country: CountryCode, $language: LanguageCode)\n    @inContext(country: $country, language: $language) {\n    products(first: 4, sortKey: UPDATED_AT, reverse: true) {\n      nodes {\n        ...RecommendedProduct\n      }\n    }\n  }\n': {
     return: RecommendedProductsQuery;
     variables: RecommendedProductsQueryVariables;
   };
-  '#graphql\n  query Article(\n    $articleHandle: String!\n    $blogHandle: String!\n    $country: CountryCode\n    $language: LanguageCode\n  ) @inContext(language: $language, country: $country) {\n    blog(handle: $blogHandle) {\n      articleByHandle(handle: $articleHandle) {\n        title\n        contentHtml\n        publishedAt\n        author: authorV2 {\n          name\n        }\n        image {\n          id\n          altText\n          url\n          width\n          height\n        }\n        seo {\n          description\n          title\n        }\n      }\n    }\n  }\n': {
+  '#graphql\n  query Article(\n    $articleHandle: String!\n    $blogHandle: String!\n    $country: CountryCode\n    $language: LanguageCode\n  ) @inContext(language: $language, country: $country) {\n    blog(handle: $blogHandle) {\n      handle\n      articleByHandle(handle: $articleHandle) {\n        handle\n        title\n        contentHtml\n        publishedAt\n        author: authorV2 {\n          name\n        }\n        image {\n          id\n          altText\n          url\n          width\n          height\n        }\n        seo {\n          description\n          title\n        }\n      }\n    }\n  }\n': {
     return: ArticleQuery;
     variables: ArticleQueryVariables;
   };
-  '#graphql\n  query Blog(\n    $language: LanguageCode\n    $blogHandle: String!\n    $first: Int\n    $last: Int\n    $startCursor: String\n    $endCursor: String\n  ) @inContext(language: $language) {\n    blog(handle: $blogHandle) {\n      title\n      seo {\n        title\n        description\n      }\n      articles(\n        first: $first,\n        last: $last,\n        before: $startCursor,\n        after: $endCursor\n      ) {\n        nodes {\n          ...ArticleItem\n        }\n        pageInfo {\n          hasPreviousPage\n          hasNextPage\n          hasNextPage\n          endCursor\n          startCursor\n        }\n\n      }\n    }\n  }\n  fragment ArticleItem on Article {\n    author: authorV2 {\n      name\n    }\n    contentHtml\n    handle\n    id\n    image {\n      id\n      altText\n      url\n      width\n      height\n    }\n    publishedAt\n    title\n    blog {\n      handle\n    }\n  }\n': {
+  '#graphql\n  query Blog(\n    $language: LanguageCode\n    $blogHandle: String!\n    $first: Int\n    $last: Int\n    $startCursor: String\n    $endCursor: String\n  ) @inContext(language: $language) {\n    blog(handle: $blogHandle) {\n      title\n      handle\n      seo {\n        title\n        description\n      }\n      articles(\n        first: $first,\n        last: $last,\n        before: $startCursor,\n        after: $endCursor\n      ) {\n        nodes {\n          ...ArticleItem\n        }\n        pageInfo {\n          hasPreviousPage\n          hasNextPage\n          hasNextPage\n          endCursor\n          startCursor\n        }\n\n      }\n    }\n  }\n  fragment ArticleItem on Article {\n    author: authorV2 {\n      name\n    }\n    contentHtml\n    handle\n    id\n    image {\n      id\n      altText\n      url\n      width\n      height\n    }\n    publishedAt\n    title\n    blog {\n      handle\n    }\n  }\n': {
     return: BlogQuery;
     variables: BlogQueryVariables;
   };
@@ -1205,11 +1226,11 @@ interface GeneratedQueryTypes {
     return: StoreCollectionsQuery;
     variables: StoreCollectionsQueryVariables;
   };
-  '#graphql\n  query Catalog(\n    $country: CountryCode\n    $language: LanguageCode\n    $first: Int\n    $last: Int\n    $startCursor: String\n    $endCursor: String\n  ) @inContext(country: $country, language: $language) {\n    products(first: $first, last: $last, before: $startCursor, after: $endCursor) {\n      nodes {\n        ...ProductItem\n      }\n      pageInfo {\n        hasPreviousPage\n        hasNextPage\n        startCursor\n        endCursor\n      }\n    }\n  }\n  #graphql\n  fragment MoneyProductItem on MoneyV2 {\n    amount\n    currencyCode\n  }\n  fragment ProductItem on Product {\n    id\n    handle\n    title\n    featuredImage {\n      id\n      altText\n      url\n      width\n      height\n    }\n    priceRange {\n      minVariantPrice {\n        ...MoneyProductItem\n      }\n      maxVariantPrice {\n        ...MoneyProductItem\n      }\n    }\n  }\n\n': {
+  '#graphql\n  query Catalog(\n    $country: CountryCode\n    $language: LanguageCode\n    $first: Int\n    $last: Int\n    $startCursor: String\n    $endCursor: String\n  ) @inContext(country: $country, language: $language) {\n    products(first: $first, last: $last, before: $startCursor, after: $endCursor) {\n      nodes {\n        ...CollectionItem\n      }\n      pageInfo {\n        hasPreviousPage\n        hasNextPage\n        startCursor\n        endCursor\n      }\n    }\n  }\n  #graphql\n  fragment MoneyCollectionItem on MoneyV2 {\n    amount\n    currencyCode\n  }\n  fragment CollectionItem on Product {\n    id\n    handle\n    title\n    featuredImage {\n      id\n      altText\n      url\n      width\n      height\n    }\n    priceRange {\n      minVariantPrice {\n        ...MoneyCollectionItem\n      }\n      maxVariantPrice {\n        ...MoneyCollectionItem\n      }\n    }\n  }\n\n': {
     return: CatalogQuery;
     variables: CatalogQueryVariables;
   };
-  '#graphql\n  query Page(\n    $language: LanguageCode,\n    $country: CountryCode,\n    $handle: String!\n  )\n  @inContext(language: $language, country: $country) {\n    page(handle: $handle) {\n      id\n      title\n      body\n      seo {\n        description\n        title\n      }\n    }\n  }\n': {
+  '#graphql\n  query Page(\n    $language: LanguageCode,\n    $country: CountryCode,\n    $handle: String!\n  )\n  @inContext(language: $language, country: $country) {\n    page(handle: $handle) {\n      handle\n      id\n      title\n      body\n      seo {\n        description\n        title\n      }\n    }\n  }\n': {
     return: PageQuery;
     variables: PageQueryVariables;
   };

package/dist/assets/hydrogen/tailwind/package.json

@@ -2,7 +2,10 @@
   "browserslist": [
     "defaults"
   ],
+  "dependencies": {
+    "tailwindcss": "^4.1.6"
+  },
   "devDependencies": {
-    "@tailwindcss/vite": "4.0.14"
+    "@tailwindcss/vite": "^4.1.6"
   }
 }

package/oclif.manifest.json

@@ -1748,5 +1748,5 @@
       ]
     }
   },
-  "version": "10.0.0"
+  "version": "10.0.2"
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public",
     "@shopify:registry": "https://registry.npmjs.org"
   },
-  "version": "10.0.0",
+  "version": "10.0.2",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -33,15 +33,15 @@
     "flame-chart-js": "2.3.2",
     "get-port": "^7.0.0",
     "type-fest": "^4.33.0",
-    "vite": "^6.2.0",
+    "vite": "^6.2.4",
     "vitest": "^1.0.4"
   },
   "dependencies": {
     "@ast-grep/napi": "0.11.0",
     "@oclif/core": "3.26.5",
-    "@shopify/cli-kit": "^3.77.1",
-    "@shopify/oxygen-cli": "4.6.10",
-    "@shopify/plugin-cloudflare": "^3.77.1",
+    "@shopify/cli-kit": "^3.79.2",
+    "@shopify/oxygen-cli": "4.6.18",
+    "@shopify/plugin-cloudflare": "^3.78.1",
     "ansi-escapes": "^6.2.0",
     "chokidar": "3.5.3",
     "cli-truncate": "^4.0.0",
@@ -62,7 +62,7 @@
     "@graphql-codegen/cli": "^5.0.2",
     "@remix-run/dev": "^2.16.1",
     "@shopify/hydrogen-codegen": "^0.3.3",
-    "@shopify/mini-oxygen": "^3.2.0",
+    "@shopify/mini-oxygen": "^3.2.1",
     "graphql-config": "^5.0.3",
     "vite": "^5.1.0 || ^6.2.0"
   },