# ReviewList

> Sortable, filterable, paginated review list with optional media and helpful votes

Canonical URL: https://0.0.0.0:3005/islands/social-proof/review-list

> Full review-list experience for PDPs and landing pages that need richer social proof than a carousel.

## Preview

**Category**: Social Proof

## Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| reviews | array | no | - | Inline review records |
| reviewsEndpoint | string | no | - | Advanced override only. The page supplies the reviews endpoint at runtime; do not set this |
| collectionId | string | no | - | Limits endpoint results to one Lexsis review collection |
| reviewSnapshotId | string | no | - | Uses the immutable collection snapshot prepared for an experiment arm |
| productIds | array or `"$resource"` | no | - | Shopify product ids (numeric or GID) to filter endpoint results. `"$resource"` on a product template binds the routed product |
| fallbackCollectionId | string | no | - | Review collection shown when the `productIds` fetch has no reviews. Normally set by the page's review fallback, not authored |
| fallbackScope | `"store"` | no | - | Show every store review when the `productIds` fetch has none. Normally set by the page's review fallback, not authored |
| variant | enum | no | stamped | `minimal` or `stamped` |
| averageRating | number | no | - | Summary rating. Omitted: the reviews API average (never for the fallback) |
| totalReviews | number | no | - | Summary review count. Omitted: the reviews API total (never for the fallback) |
| pageSize | number | no | 5 | Reviews shown per page |
| showDemographics | boolean | no | true | Show demographics data when available |
| showHelpful | boolean | no | true | Show helpful vote controls (only when `helpfulEndpoint` is set) |
| showFilters | boolean | no | false | Show review filters |
| showSort | boolean | no | true | Show sort control |
| showMedia | boolean | no | true | Show review media |
| sort | enum | no | - | `recent`, `highest`, or `featured` |

## Embed Example

```html
<lx-island name="ReviewList">
  <script type="application/json">
{
  "collectionId": "YOUR_REVIEW_COLLECTION_ID",
  "variant": "minimal",
  "pageSize": 5,
  "showSort": true
}
  </script>
</lx-island>
```

## Usage

Use `ReviewList` for substantial review collections with sorting,
pagination, or filtering. Use [ReviewCarousel](/islands/social-proof/review-carousel)
for a compact, decorative showcase or a small number of testimonials.

To show curated Judge.me reviews, connect or import in
[Integrations](https://app.trylexsis.com/integrations), create a collection in
[Storefront → Reviews](https://app.trylexsis.com/storefront/reviews), then set `collectionId`. The page
supplies the reviews endpoint at runtime; do not set `reviewsEndpoint`. See
[Judge.me Reviews](/guides/judge-me-reviews).

## Product templates

On a product resource template, set `"productIds": "$resource"` and omit
`averageRating` and `totalReviews`; each product shows its own reviews and
star summary (average to one decimal, half stars).

```html
<lx-island name="ReviewList">
  <script type="application/json">
{
  "productIds": "$resource",
  "variant": "summaryAside",
  "pageSize": 6
}
  </script>
</lx-island>
```

A product with no reviews shows the page's **review fallback**, a page
setting (default: every store review; or one review collection; or
nothing), changed from Page templates in the app or from MCP, never in the
source. The fallback renders without a star summary and without a heading:
labels are page HTML, toggled from the island's state.

Once reviews load, the island sets `data-reviews-source="product"`,
`"fallback"` or `"none"` on its root part (for `"none"` it renders only an
empty, hidden root) and dispatches a `window`
`lx:reviews:state` event with
`{ source, total, average }` (`average` is the product's rating to one
decimal, `null` for the fallback and none):

```css
[data-section-id="reviews"]:has([data-reviews-source="fallback"]) .rv-title-product { display: none; }
```