Product Display

Products are loaded via ProductLoader (from @replohq/sdk/loaders/product-loader) using a render-prop pattern. The product data shape is the same regardless of source (Shopify or Replo) — see the shopify skill for source-specific data loading and cart patterns.

CRITICAL: Never hardcode live product data. Use ProductLoader for a single product, or the source-specific collection/recommendation loader for a product list. Reuse the real product objects those loaders return; do not add a per-item fetch when the required data is already loaded.

Main Product Display

When building the main product display on a page (i.e., the primary product the page is focused on), the following guidelines MUST be followed unless the user explicitly specifies otherwise:

Required Elements (accessed dynamically from the product parameter in the ProductLoader render prop):

• Title — Display product.title
• Price — Convert the loader's major-unit amount with fromMajorUnitsToMinorUnits({ amount: variant.price.amount, currencyCode: variant.price.currencyCode }) from @replohq/sdk/money, then pass that integer to useFormattedPrice(minorUnits, variant.price.currencyCode) from @replohq/sdk/hooks/use-formatted-price
• Description — Use product.descriptionHtml with dangerouslySetInnerHTML={{ __html: product.descriptionHtml }} to render the rich HTML description
• Image — Display product.featuredImage (and variant images when available)
• Quantity Selector — Allow users to select quantity
• Add to Cart Button — Primary CTA using useAddToCart from @replohq/sdk/cart/hooks/use-add-to-cart
• Buy Now Button — Secondary CTA using useBuyNow from @replohq/sdk/cart/hooks/use-buy-now