> ## Documentation Index
> Fetch the complete documentation index at: https://docs.colossal.sh/llms.txt
> Use this file to discover all available pages before exploring further.

# Products

> Fetch and display store products with type-safe hooks.

## Simplified hooks

Return [`SimpleProduct`](#simpleproduct) objects with pre-computed prices and images.

| Name                                | Type   | Purpose                               |
| ----------------------------------- | ------ | ------------------------------------- |
| `useProducts(storeUid, currency)`   | Hook   | Fetch all products for a store        |
| `useProduct(productUid)`            | Hook   | Fetch a single product by UID         |
| `fetchProducts(storeUid, currency)` | Method | Server-side fetch of all products     |
| `fetchProduct(productUid)`          | Method | Server-side fetch of a single product |

```tsx theme={null}
import { useProducts, useProduct } from "@colossal-sh/storefront-sdk";

// All products
const { products, isLoading } = useProducts(storeUid, "USD");

// Single product (currency resolved automatically)
const { product } = useProduct("product-uid-here");
```

## Full data hooks

Return the full [`StoreProduct`](#storeproduct) shape from the GraphQL API, including all variant, pricing, media, and deliverable data.

| Name                            | Type   | Purpose                               |
| ------------------------------- | ------ | ------------------------------------- |
| `useStoreProducts(storeUid)`    | Hook   | Fetch all products for a store        |
| `useStoreProduct(productUid)`   | Hook   | Fetch a single product by UID         |
| `fetchStoreProducts(storeUid)`  | Method | Server-side fetch of all products     |
| `fetchStoreProduct(productUid)` | Method | Server-side fetch of a single product |

```tsx theme={null}
import { useStoreProducts, useStoreProduct } from "@colossal-sh/storefront-sdk";

// All products
const { data } = useStoreProducts(storeUid);
const products = data?.productsByStoreUid ?? [];

// Single product
const { data } = useStoreProduct("product-uid-here");
const product = data?.product;
```

## Types

### SimpleProduct

Returned by `useProducts`, `useProduct`, `fetchProducts`, and `fetchProduct`.

<ResponseField name="product" type="SimpleProduct">
  <Expandable title="properties">
    <ResponseField name="uid" type="string" required>
      Product UID.
    </ResponseField>

    <ResponseField name="name" type="string" required>
      Product name.
    </ResponseField>

    <ResponseField name="tagline" type="string">
      Short tagline.
    </ResponseField>

    <ResponseField name="description" type="string">
      Full description.
    </ResponseField>

    <ResponseField name="price" type="number" required>
      Resolved price from the default variant.
    </ResponseField>

    <ResponseField name="formattedPrice" type="string" required>
      Formatted price with currency symbol (e.g. `"$19.99"` or `"$9.99/month"`).
    </ResponseField>

    <ResponseField name="currency" type="string" required>
      Currency code.
    </ResponseField>

    <ResponseField name="images" type="string[]" required>
      All media URLs from the default variant.
    </ResponseField>

    <ResponseField name="interval" type="string">
      Subscription interval (e.g. `"month"`, `"year"`).
    </ResponseField>

    <ResponseField name="deliverables" type="Deliverable[]" required>
      What the customer receives after purchase.

      <Expandable title="properties">
        <ResponseField name="uid" type="string" required>
          Unique deliverable identifier.
        </ResponseField>

        <ResponseField name="name" type="string" required>
          Deliverable name.
        </ResponseField>

        <ResponseField name="type" type="string" required>
          `file_download`, `api_key`, `discord_access`, `shippable`, or `custom`.
        </ResponseField>

        <ResponseField name="config" type="JSON">
          Type-specific configuration.
        </ResponseField>
      </Expandable>
    </ResponseField>
  </Expandable>
</ResponseField>

### StoreProduct

Returned by `useStoreProducts`, `useStoreProduct`, `fetchStoreProducts`, and `fetchStoreProduct`. The full product shape from the GraphQL API.

<ResponseField name="product" type="StoreProduct">
  <Expandable title="properties">
    <ResponseField name="uid" type="string" required>
      Unique product identifier.
    </ResponseField>

    <ResponseField name="name" type="string" required>
      Product name.
    </ResponseField>

    <ResponseField name="tagline" type="string">
      Short tagline.
    </ResponseField>

    <ResponseField name="description" type="string">
      Full product description.
    </ResponseField>

    <ResponseField name="contentBlocks" type="JSON">
      Structured content blocks.
    </ResponseField>

    <ResponseField name="defaultVariant" type="Variant" required>
      The default variant for this product.

      <Expandable title="properties">
        <ResponseField name="uid" type="string" required>
          Unique variant identifier.
        </ResponseField>

        <ResponseField name="name" type="string" required>
          Variant name.
        </ResponseField>

        <ResponseField name="inventoryCount" type="number">
          Current inventory count.
        </ResponseField>

        <ResponseField name="prices" type="Price[]">
          List of prices for this variant.

          <Expandable title="properties">
            <ResponseField name="uid" type="string" required>
              Unique price identifier.
            </ResponseField>

            <ResponseField name="currency" type="string" required>
              Three-letter ISO currency code (e.g. `USD`).
            </ResponseField>

            <ResponseField name="isDefault" type="boolean" required>
              Whether this is the default price for the variant.
            </ResponseField>

            <ResponseField name="recurringInterval" type="string">
              Subscription interval: `month` or `year`. Absent for one-time purchases.
            </ResponseField>

            <ResponseField name="trialDuration" type="string">
              Trial period (e.g. `one_week`, `one_month`).
            </ResponseField>

            <ResponseField name="price" type="LinearPrice | VolumePrice" required>
              Pricing configuration. Linear has a flat `unitPrice`. Volume has `tiers` with `firstUnit`, `lastUnit`, and `unitPrice`.
            </ResponseField>
          </Expandable>
        </ResponseField>

        <ResponseField name="media" type="Media[]">
          Images and videos attached to this variant.

          <Expandable title="properties">
            <ResponseField name="uid" type="string" required>
              Unique media identifier.
            </ResponseField>

            <ResponseField name="url" type="string" required>
              Media URL.
            </ResponseField>

            <ResponseField name="type" type="string" required>
              `IMAGE` or `VIDEO`.
            </ResponseField>

            <ResponseField name="status" type="string" required>
              Processing status.
            </ResponseField>
          </Expandable>
        </ResponseField>

        <ResponseField name="deliverables" type="Deliverable[]">
          What the customer receives after purchase.

          <Expandable title="properties">
            <ResponseField name="uid" type="string" required>
              Unique deliverable identifier.
            </ResponseField>

            <ResponseField name="name" type="string" required>
              Deliverable name.
            </ResponseField>

            <ResponseField name="type" type="string" required>
              `file_download`, `api_key`, `discord_access`, `shippable`, or `custom`.
            </ResponseField>

            <ResponseField name="config" type="JSON">
              Type-specific configuration.
            </ResponseField>
          </Expandable>
        </ResponseField>
      </Expandable>
    </ResponseField>
  </Expandable>
</ResponseField>

## Next steps

* [Cart](/react-sdk/cart). Add products to the cart and manage line items
* [Products concepts](/concepts/products). Understand the product data model and pricing