> ## Documentation Index
> Fetch the complete documentation index at: https://voyager-theme.fasil.in/llms.txt
> Use this file to discover all available pages before exploring further.

# Size finder

> A cross-brand size mapping that helps customers pick the right Voyager size based on what they wear elsewhere. Brand matrix is fully merchant-editable.

The size finder is a small, considered helper on the product detail page. A visitor who knows they wear a Medium at a particular house can ask Voyager "what's that in your sizes?" and get an answer. It's a tiny touch that converts size anxiety into confidence at the buy moment.

The brand-to-size mapping is **fully merchant-editable** via a single textarea in Theme Settings. Voyager ships with three generic fit categories as defaults — replace them with the specific houses your customer actually cross-references for a much better recommendation.

## Where it appears

The size finder lives inside the variant picker block on the PDP. Below the size chip row, a small "Find my size →" toggle reveals an inline panel:

```
[Size]
   XS    S    M    L    XL    XXL

       Find my size →
```

Click "Find my size →" and the panel expands:

```
What size do you wear at another house?

[Brand: True to size ▾]   [Size: M ▾]

Recommended: M

[Use M →]
```

Pick a brand and a size, and Voyager maps it to the equivalent Voyager size. Click **Use M →** and the size chip is automatically selected on the variant picker.

## Configuring the brand matrix

Theme Customizer → **Theme settings → Size finder → Brand matrix**.

The brand matrix is a textarea — one brand per line, in the format:

```
Brand Name | XS=XS, S=S, M=M, L=L, XL=XL, XXL=XXL
```

Left side of each `=` is the size the customer wears at the other brand. Right side is the equivalent Voyager size. You don't need to map every size — partial matrices work fine.

### Default matrix (generic fit categories)

The theme ships with three generic categories so the picker has something useful to show on day one:

```
True to size | XS=XS, S=S, M=M, L=L, XL=XL, XXL=XXL
Runs small   | XS=XS, S=XS, M=S, L=M, XL=L, XXL=XL
Runs large   | XS=S, S=M, M=L, L=XL, XL=XXL
```

### Example custom matrix (named houses)

If your customer commonly cross-references specific brands, name them in the matrix:

```
Loro Piana          | XS=XS, S=S, M=M, L=L, XL=XL, XXL=XXL
Brunello Cucinelli  | XS=XS, S=S, M=M, L=L, XL=XL, XXL=XXL
Boglioli            | XS=XS, S=XS, M=S, L=M, XL=L, XXL=XL
Drake's             | XS=XS, S=XS, M=S, L=M, XL=L, XXL=XL
Brioni              | XS=XS, S=XS, M=S, L=M, XL=L, XXL=XL
Caruso              | XS=S, S=M, M=L, L=XL, XL=XXL
```

### Hiding the brand selector entirely

If you don't want the size finder visible on your store at all, **clear every line** in the brand matrix textarea. With an empty matrix, the JS hides the toggle button and the panel automatically — visitors see only the standard size chips.

You can also keep the brand matrix populated but disable the toggle per PDP block: PDP block library → **Variant picker** → uncheck **Show size finder helper**.

## Other size finder settings

| Setting                | Default                            | What it does                                 |
| ---------------------- | ---------------------------------- | -------------------------------------------- |
| **Modal heading**      | `Recommend my size`                | Eyebrow above the size finder form.          |
| **Open button label**  | `Find my size →`                   | Text on the toggle when the panel is closed. |
| **Close button label** | `Close size finder`                | Text on the toggle when the panel is open.   |
| **Brand matrix**       | (3 generic categories — see above) | The brand-to-size mapping textarea.          |

On the variant picker block itself:

| Setting                     | Default                                                               | What it does                                 |
| --------------------------- | --------------------------------------------------------------------- | -------------------------------------------- |
| **Show size finder helper** | On                                                                    | Toggle the entire size finder per PDP.       |
| **Size finder hint text**   | `Tell us what you wear in another house — we will suggest your size.` | Body copy above the brand selector.          |
| **Size guide link**         | (blank)                                                               | Optional URL link to a full size chart page. |

## Recommendation logic

When the visitor picks a brand and a size, the JS looks up `sizeMap[brand][size]` and renders the result. If a particular (brand, size) pair isn't in the matrix, the picker shows `—` and the **Use →** button is inert. This is a conservative behavior — better to show nothing than a wrong recommendation.

## Implementation notes

The brand matrix is parsed in `assets/pdp.js` from `window.voyagerSizeFinder.brandMatrix` (emitted by `layout/theme.liquid` based on the textarea setting). The picker's `<select data-sf-brand>` is repopulated at load time from the parsed matrix — Liquid renders an empty `<select>`, and JS injects the merchant's brand list in.

If the matrix is empty (or parses to zero brands), the JS calls `setAttribute('hidden', '')` on both the toggle and the panel. The visitor sees only the standard size chips.

Toggle button labels are read from `window.voyagerSizeFinder.openLabel` and `closeLabel`. The heading and hint text are server-rendered via Liquid from theme settings and the variant picker block settings respectively.