Bundle Products not showing in cart shopify hydrogen

Retired Boards Appdev Custom Storefronts

Topic summary

A developer is experiencing an issue where Shopify bundle products added to cart via the official Shopify Bundles app are not visible in the cart on a Hydrogen storefront, though they do appear at checkout.

Technical Details:

  • The problem occurs when using CartForm.ACTIONS.LinesAdd
  • Cart lines return empty arrays instead of bundle product data
  • Correct merchandiseId and quantity are being passed
  • Without cart line IDs, users cannot update or remove the invisible bundle items

Resolution:

  • A solution was found via a GitHub issue (#1836)
  • Fix requires updating the CART_QUERY_FRAGMENT in server.ts to include the CartLineComponent fragment
  • Multiple users confirmed experiencing the same issue

Status: Resolved with a workaround involving query fragment modifications.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
1

I have a shopify hydrogen storefront. I am trying to use the official shopify bundles app to add bundles to cart on my storefront. Currently, the product adds to cart but is not visible in the cart. The user can checkout the bundle, but cannot view it in the cart. The issue seems to be at the CartForm.ACTIONS.addLines . I am passing in the correct information, but when i retrieve the cart lines, there is an empty array in place of the bundle.

Steps to Reproduce1. Create an ATC button:

function AddToCartButton({analytics, children, disabled, lines, onClick}) {
return (

{(fetcher) => (
<>

<button
type=“submit”
onClick={onClick}
disabled={disabled ?? fetcher.state !== ‘idle’}
className=“text-[#161616] bg-[#f5f5f0] md:text-[#f5f5f0] md:bg-[#f5f5f0] text-md py-2 px-7 rounded-[4px] w-60 md:w-[360px] h-[60px] md:h-14 cursor-pointer hover:bg-white/80 md:hover:bg-white/80 transition duration-300 ease-in-out”

{children}

</>
)}

);
}

  1. Create /cart route with switch statement to allow for CartForm.ACTIONS.LinesAdd:
    switch (action) {
    case CartForm.ACTIONS.LinesAdd:
    result = await cart.addLines(inputs.lines);

    break;
    }

  2. Call this route with the AddToCartButton component, making a post request with inputs={{lines}}. Lines is an array with an object containing the correct merchandiseId and quantity. The input also contains an analytics string, but that is not related to this.

Expected Behavior

After this submission, the correct product should show up in the cart. When retrieving the cart lines, you should get back a lines object with a nodes array containing an id (id for the cartLine) and other information about the merchandise inside that line of the cart.

Actual Behavior

When I retrieve the cart lines, I get back an empty array for each line that a bundle was supposed to be in. When I go to checkout the cart, the bundle shows up in checkout. I cannot see the bundle in cart as there is no id for the cart line or any other information about the merchandise, just the empty array in it’s place. I cannot even allow the user to remove this empty cart item because there is no id to perform a cart.updateLines or cart.removeLines mutation on.

1 Like
2

I’m having the same issue here. If you have any updates, please share !!

2 Likes
3

Found the solution here.

You need to update CART_QUERY_FRAGMENT in server.ts to add CartLineComponent fragment, see details on the above link.