# Product Resolution Issues

> Common product data problems in island components

Canonical URL: https://fa7e86e3d553:3005/troubleshooting/product-resolution

Common product data problems in island components.

## Symptom: "Product not found"

Island fails to load product data; shows error or empty state.

### Cause

Wrong product ID format — using handle (slug) or bare number instead of Shopify GID.

### Fix

Always use full Shopify GID format: `gid://shopify/Product/{id}`

```html
<lx-island name="BuyBox">
  <script type="application/json">
{
  "product": {
    "title": "example-title",
    "price": "example-price",
    "variants": []
  }
}
  </script>
</lx-island>
```

Get the correct GID through `lexsis_catalog` with action `list` or `get`.

## Symptom: Product Images Not Showing

Island loads product data but no images appear.

### Cause

Product has no images uploaded in Shopify admin.

### Fix

Verify product images through `lexsis_catalog` with action `get`. If they are
missing, upload images in Shopify admin or use custom `images[]` props for
islands that support them.

Use [MediaCarousel](/islands/content/media-carousel),
[ProductGallery](/islands/commerce/product-gallery), or
[ProductHero](/islands/commerce/product-hero) with catalog or authored media.

## Symptom: Price Showing $0

Island shows product but price is zero or missing.

### Cause

Variant not resolved — `variantId` is invalid or missing.

### Fix

Ensure `variantId` is a valid Shopify variant GID, or let BuyBox auto-select the first available variant by omitting `variantId`.

```html
<lx-island name="BuyBox">
  <script type="application/json">
{
  "product": {
    "title": "example-title",
    "price": "example-price",
    "variants": []
  }
}
  </script>
</lx-island>
```

## Symptom: Out of Stock Not Detected

InventoryIndicator doesn't show correct availability status.

### Cause

The product or selected variant has stale availability, or Shopify inventory
tracking is not providing current quantity.

### Fix

Pass correct product GID and verify inventory tracking is enabled in Shopify admin.

```html
<lx-island name="InventoryIndicator">
  <script type="application/json">
{}
  </script>
</lx-island>
```

If inventory tracking is disabled in Shopify:
1. Go to Shopify Admin → Products → [Product] → Variants
2. Check "Track quantity"
3. Set quantity values

Live updates use `inventory:updated` with `{variantId, quantity, available}`.
VariantSwatches, VariantSelector, BuyBox, and StickyBar treat a variant as
sellable only when it is available and quantity is above zero. Sold-out
options stay visible but disabled and dimmed.

## Symptom: Wrong Variant Selected

VariantSwatches displays but BuyBox shows wrong variant or doesn't update.

### Cause

VariantSwatches emits `variant:changed` events but BuyBox isn't listening.

### Fix

Add `listenForEvents: true` to BuyBox so it reacts to swatch selection.
Place the selector, BuyBox, and gallery inside the same `data-scope`.

Set `selectedId` on VariantSwatches or `defaultVariant` on VariantSelector when
the initial selection must match a requested variant. The selected ID remains
available on the island root after hydration.

## Symptom: Variant selection collapses the gallery

### Cause

The gallery uses replacement behavior when it should navigate within the
authored media set.

### Fix

Use `listenForVariant:true` with `variantMediaMode:"focus"`. Associate media
through a variant image URL, media `id`, `variantId`, or `variantIds`. Focus
mode retains the complete gallery and moves to the first matching item.

```html
<lx-island name="VariantSwatches">
  <script type="application/json">
{}
  </script>
</lx-island>

<lx-island name="BuyBox">
  <script type="application/json">
{
  "product": {
    "title": "example-title",
    "price": "example-price",
    "variants": []
  }
}
  </script>
</lx-island>
```

## Symptom: Product Carousel Empty

ProductCarousel island shows empty slots or errors.

### Cause

`productIds` array contains invalid GIDs or products are unpublished/deleted.

### Fix

Verify each product is published and its GID is correct through
`lexsis_catalog` with action `list`.

```html
<lx-island name="ProductCarousel">
  <script type="application/json">
{
  "products": [
    {
      "id": "example-id",
      "handle": "example-handle",
      "title": "example-title",
      "price": "example-price"
    }
  ]
}
  </script>
</lx-island>
```

Check product status:

```python
products = call_tool("lexsis_catalog", action="list", args={})
for p in products:
    print(f"{p.title}: {p.shopify_product_id}, published: {p.status == 'active'}")
```

## Symptom: Reviews Not Loading

ProductReviews island shows empty state.

### Cause

Product has no Shopify reviews, or reviews app not installed.

### Fix

Pass custom `reviews[]` array instead of relying on `productId` auto-fetch.

```html
<lx-island name="ProductReviews">
  <script type="application/json">{}</script>
</lx-island>
```

## Symptom: Handle vs GID Confusion

Getting errors about invalid product identifier depending on which tool is used.

### Cause

Different tools use different product identifier formats:
- **`lexsis_catalog` actions** use the product **handle** (slug)
- **Islands** (BuyBox, etc.) use **GID** (Shopify global ID)

### Fix

Use `lexsis_catalog` with action `list` to get both the handle and GID, then
use the correct format for each context.

```python
# Step 1: Get product data (returns both handle and GID)
products = call_tool("lexsis_catalog", action="list", args={})
product = products[0]

# Step 2: Use the handle for the get action
details = call_tool(
    "lexsis_catalog",
    action="get",
    args={"handle": product.handle},
)

# Step 3: Use shopify_product_id (GID) for islands
```

```html
<lx-island name="BuyBox">
  <script type="application/json">
{
  "product": {
    "title": "example-title",
    "price": "example-price",
    "variants": []
  }
}
  </script>
</lx-island>
```

**Handle**: `leather-jacket-black` (human-readable slug)  
**GID**: `gid://shopify/Product/7891234567890` (Shopify global identifier)