# SizeGuide

> Size chart modal for apparel and footwear to reduce returns

Canonical URL: https://fa7e86e3d553:3005/islands/engagement/size-guide

> Size chart modal/drawer for apparel and footwear. Reduces returns by helping customers pick the right size.

## Preview

**Category**: Engagement

## Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| title | string | no | "Size Guide" | Modal/drawer title |
| headers | array | yes | - | Column headers (e.g. ["Size", "Chest", "Waist"]) |
| rows | array | yes | - | Row objects with size and measurement values |
| units | object | no | - | Unit toggle with metric and imperial strings |
| tip | string | no | - | Optional sizing tip displayed below table |

## Embed Example

```html
<lx-island name="SizeGuide">
  <script type="application/json">
{
  "headers": [],
  "rows": [
    {
      "size": "example-size"
    }
  ]
}
  </script>
</lx-island>
```

## Usage Patterns

**Button trigger near BuyBox:**

**With unit toggle** (metric/imperial):

```html
<lx-island name="SizeGuide">
  <script type="application/json">
{
  "headers": [],
  "rows": [
    {
      "size": "example-size"
    }
  ]
}
  </script>
</lx-island>
```

## Tips

- Triggers as modal on click (mobile: bottom drawer, desktop: center modal)
- headers array should match keys in row objects (plus "size")
- Row format: `{"size":"M","chest":"36-38","waist":"28-30"}` — keys match headers
- units prop enables metric/imperial toggle (optional)
- tip prop shows below table for fit advice ("Runs small", "Size up", etc.)
- Place trigger link near variant selector or below BuyBox for easy access

## Stylable Parts

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

| Part | Description |
|------|-------------|
| `trigger` | Open/trigger element |

```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

- Native `<details>/<summary>` markup — Use for general fit questions; use
  SizeGuide for the measurement table