feat: add support for nested cart lines

[fredericoo]

WHY are these changes introduced?

SFAPI 2025-10 introduces parentRelationship to line items. It means we can now access and render line items with hierarchy.

This PR adds support for displaying child line items in the cart, such as warranties or gift wrapping options that are associated with a parent product.

WHAT is this pull request doing?

• Enhances the CartLineItem component to display child components nested under their parent line items
• Adds a new CartLineChild component to render child line items with appropriate styling
• Updates the GraphQL fragments to include lineComponents and parentRelationship data
• Adds CSS styling for the nested child line items with indentation and a left border
• Updates TypeScript definitions to support the new data structure

HOW to test your changes?

Because we don’t offer a way to add a child product in this (there are infinity ways of doing it and it’s down to the store manager to do it) you will have to make a few code changes.

1. rebuild packages needed by skeleton (npm run build --filter=skeleton) and run the skeleton dev server cd templates/skeleton && npm run dev
2. create or grab a product variant id from your store (2 would be ideal so you can tell them apart). Open http://localhost:3000/graphiql and call this:

query allProductVariants{
  products(first:10){
    nodes {
      title
      variants(first: 10){
        nodes {
          title
          id
        }
      }
    }
  }
}

3. add this to ProductForm.tsx line 123, replacing YOUR_WARRANTY_VARIANT_ID with a variant id you got form step 2.

<AddToCartButton
        lines={
          selectedVariant
            ? [
                {
                  merchandiseId: selectedVariant.id,
                  quantity: 1,
                  selectedVariant,
                },
                {
                  merchandiseId: 'YOUR_WARRANTY_VARIANT_ID',
                  quantity: 1,
                  parent: {merchandiseId: selectedVariant.id},
                },
              ]
            : []
        }
      >
        {selectedVariant?.availableForSale ? 'Add to cart with warranty' : 'Sold out'}
      </AddToCartButton>

4. View on the frontend

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]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• feat: add support for nested cart lines #3398 👈 (View in Graphite)
• update SFAPI and CAAPI to 2025-10 #3352 : 4 other dependent PRs (#3284 , #3393 , #3400 and 1 other)
• main

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

[shopify]

Oxygen deployed a preview of your 01-20-feat_add_support_for_nested_cart_lines branch. Details:

Storefront	Status	Preview link	Deployment details	Last update (UTC)
Skeleton (skeleton.hydrogen.shop)	✅ Successful (Logs)	Preview deployment	Inspect deployment	January 23, 202611:55 AM
metaobjects	✅ Successful (Logs)	Preview deployment	Inspect deployment	January 21, 2026 6:02 PM
custom-cart-method	✅ Successful (Logs)	Preview deployment	Inspect deployment	January 21, 2026 6:02 PM
sitemap	✅ Successful (Logs)	Preview deployment	Inspect deployment	January 21, 2026 6:02 PM
third-party-queries-caching	✅ Successful (Logs)	Preview deployment	Inspect deployment	January 21, 2026 6:02 PM

Learn more about Hydrogen's GitHub integration.

[kdaviduik]

I didn't have enough time for a full pass, I will continue tomorrow :)

[kdaviduik]

are all these deletions supposed to be there? also i'm surprised this recipe doesn't use patch files

[fredericoo]

most of the files are regenerated cookbooks, i did not write them myself!

i wonder if we can futurely gitignore those and generate them via CI only for the release step of the CLI (like building a package, the /dist of that package is often only in npm, not committed)

[kdaviduik]

The cookbook stuff is very borked, but tomorrow we can pair to fix that if you want to learn how :) I'd recommend reverting all of the changes to the cookbook folder as it'll be easier to start fresh.

the regenerate command sounds like it would be what we want to use here, but it actually is for a very different use case. so using it here deleted a lot of the actual content of the recipes, since when you regenerated them the recipe wasn't already applied to the skeleton. the best thing to do (after reverting all of the cookbook changes) would be to manually (probably with AI assistance :P) update the patch files of the specific recipes that are failng validation, so that the patch files will now work as diffs against the new version of the skeleton with all of your changes. But since we're doing so many separate changes to the skeleton as part of this work, I think we're better off just ignoring "validate recipes" CI check and fixing it at the end once all PRs are merged into the stack. Discussion here

Imo the cookbook commands are very misleading and confusing, and there's no command to do what we need for the most common use case. I want to fix this in the future. I have a doc here with a bit more information and some very WIP/draft ideas to fix these

[kdaviduik]

note for other reviewers: this is using the actual type from the SF API, so the parent line item ID is also accepted here. either one works

[fredericoo]

i reverted everything but these two files were not formatted with eslint before, so some white spaces were fixed

[fredericoo]

yeah will revert! it’s really hard to maintain the patches though, it’s not the most ergonomic of formats :(

your proposal is a good step to automate this, but i think there is no easy way to do these patches automatically