# ReviewCarousel

> Scrolling review cards with optional Shopify integration

Canonical URL: https://fa7e86e3d553:3005/islands/social-proof/review-carousel

> Scrolling review cards. If productId provided, fetches from Shopify. Otherwise use custom reviews array.

## Preview

**Category**: Social Proof

## Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| reviews | array | yes | - | Array of review objects with author, rating, body, date (optional), verified (optional), avatar (optional) |
| 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 | no | - | Optional Shopify product ids to filter endpoint results |
| autoplay | boolean | no | true | Auto-advance carousel |
| interval | number | no | 5000 | Time between slides (ms) |
| variant | enum | no | default | Display style: 'default', 'compact', 'grid', or 'minimal' |

## Embed Example

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

## Usage Patterns

**Two modes:**

1. **Custom reviews** (shown above) — Pass reviews array directly
2. **Fetch mode** — Pass `collectionId` (or `productIds`) and the island fetches live reviews:

```html
<lx-island name="ReviewCarousel">
  <script type="application/json">
{
  "collectionId": "YOUR_REVIEW_COLLECTION_ID",
  "minRating": 4,
  "pageSize": 8,
  "variant": "grid"
}
  </script>
</lx-island>
```

The page supplies the reviews endpoint at runtime; do not set `reviewsEndpoint`.
For Judge.me-backed storefront proof, curate the imported submissions in a
review collection, then pass `collectionId`. See
[Judge.me Reviews](/guides/judge-me-reviews).

## Variants

- **default** — Carousel with arrows, dots, autoplay. Full review cards.
- **compact** — Horizontal scrolling chips (minimal space).
- **grid** — Static 2-3 column grid. No carousel animation, no arrows/dots. Good for testimonial sections.
- **minimal** — Text-only quotes with author name. No stars, no avatar. Large italic typography.

## Tips

- Place below product details or in mid-page social proof section
- Each review shows author name, star rating, review text, and optional date/verified badge
- Autoplay keeps engagement high on long PDPs
- Use verified:true for reviews from confirmed purchases
- variant:'compact' reduces card size for sidebar placement
- variant:'grid' for static testimonial sections (no animation)
- variant:'minimal' for editorial/premium feel (quotes only)

## Stylable Parts

Target internal elements via `data-part` selectors in section CSS:

| Part | Description |
|------|-------------|
| `root` | Outermost container |

```css
/* Example: custom styling */
[data-section-id='SECTION'] [data-part='root'] {
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
```

## Related Islands

- [SocialProofPopup](/islands/social-proof/social-proof-popup) — Toast-style recent activity, pairs well for dual social proof
- [ReviewList](/islands/social-proof/review-list) — Longer review browsing and filtering