Shopify Hydrogen component issue

Technical Q&A
, ,

Topic summary

A developer is building a buy box/featured product section for a Shopify Hydrogen homepage and encountering cart functionality issues.

Core Problem:

  • Hydrogen’s default flow relies on URL parameters to fetch product data and handle variants (e.g., /products/tape?Color=Black&Size=S)
  • The homepage lacks these URL parameters, preventing standard product data retrieval by ID

Current Workaround:

  • Running a custom GraphQL Storefront API query directly in a JavaScript component to fetch product data
  • Developer acknowledges this may not align with Hydrogen framework best practices

Specific Issue:

  • The built-in Hydrogen AddToCart button/component doesn’t work with the custom implementation
  • This component depends on Hydrogen’s cart context and framework setup, which the custom component bypasses

Status: The developer has shared their product component file and is seeking guidance on the proper approach to implement this feature within Hydrogen’s architecture. The question remains unanswered.

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

Hey Guys,

The issue I’m facing is, that I want to create a buy box/feature-product section on the homepage in shopify hydrogen. The flow that I noticed in hydrogen is that it gets value (product handle) from URL prams and the same for variants as well, like http://localhost:3000/products/tape?Color=Black&Size=S.
However, on the homepage, we do not have this URL, so we cannot fetch all product data using ID. So, I ran a custom GraphQL storefront API in JS in a component and fetched data for that product (which I believe is not the correct approach in the hydrogen framework). I can render the product data now, but I am facing an issue with adding the product to the cart.
If I use inbuilt AddtoCart button/component of hydrogen , but it is not working as it works with cart context and other hydrogen setups. My component is custom-made.
So, how do I create this component? I’m also attaching the product component file, in case you want to look.