Skip to main content
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:
Click “Find my size →” and the panel expands:
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:
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:

​
Example custom matrix (named houses)

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

​
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

On the variant picker block itself:

​
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.