gitntg/pshophydrcv icon
public
Published on 3/30/2025
Shopify Hydrogen Component Validation

Shopify / Hydrogen Component Validation to ensure that UI component is in line with best practices

Prompts
Validate Shopify Component Implementation
Ensure that a UI component (e.g., button, form, modal) is implemented correctly using Shopify's approved modules and APIs.
Given the following component requirement, generate a Hydrogen-compatible implementation that adheres to Shopify's framework constraints and best practices.

**Requirement:** {Provide a brief description of the component, e.g., "a button that adds an item to the cart and redirects to checkout."}

**Instructions:**
- Identify the correct Shopify API or module needed (e.g., Storefront API, Cart API, Checkout API).
- Ensure the implementation follows Shopifys best practices and rate limits.
- Use only the necessary logic and avoid overengineering.
- Validate that the feature works within Shopify's React/Hydrogen ecosystem.
- Return a concise and properly structured React component.
- If a feature is **not possible** due to Shopify constraints, explain why and suggest an alternative.

**Example Input:**
"A button that adds an item to the cart and redirects to checkout."

**Example Output:**
- Uses Shopifys `cartCreate` mutation for adding items.
- Implements Shopifys `useNavigate()` for redirection.
- Provides necessary error handling for API failures.
- Ensures UI feedback (loading state, error message) is included.

**Now, generate the implementation based on the provided requirement.**