Fit finder

The Fit finder section asks two or three short questions and reveals the piece that matches the answers. It’s a merchandising tool for a catalogue where the differences between products are real but hard to explain in a grid.

How it’s built

Two block types inside the section:

Question blocks

Setting	Default	What it does
Question	What are you dressing for?	The question, rendered as a <legend>
Key	goal	A short internal name for the question. Falls back to the block id
Options	Three example lines	One option per line, as Label | key

Result blocks

Setting	Default	What it does
Key	daily, close	The combination of answer keys this result claims — one per question, in question order
Product	(empty)	The product to recommend
Heading	(empty)	Overrides the product title
Text	A line of copy	Why this is the match
Use as the fallback	Off	Show this result when nothing else matches

The section is limited to 24 blocks in total, and renders nothing at all until at least one question exists.

How matching works

A result matches a combination of answers, one key per question, in the order the questions appear. Two three-option questions give nine combinations, and a result can claim any of them.

* in any position means “any answer here”, so one result covers a whole row:

Result key	Matches
daily, close	Exactly: everyday + close fit
daily, *	Everyday, any fit
*	Anything

The most specific match wins. With both daily, close and daily, * configured, a shopper answering everyday + close gets the first; answering everyday + oversized gets the second. Specificity is counted as the number of non-wildcard positions that matched.

If nothing matches at all, the result marked fallback is shown. Without one, nothing appears — so set a fallback.

Keys are normalised on both sides: Daily, Close and daily,close behave identically, and each part is trimmed and lowercased.

Setting one up

1. Add the section to a page, usually a collection page or a dedicated “find your fit” page.

2. Write the questions. Two is the sweet spot — the default copy says “Two questions” for a reason. Each option line is Label | key: the label is what the shopper reads, the key is what the result matches against.

   Every day | daily
   The commute | commute
   Cold and wet | weather

3. Add a result per combination you want to call out, with the product attached. Start broad — one result per answer to the first question, using * for the rest — then add specific combinations where you genuinely have a better answer.

4. Mark one result as the fallback. The shipped preset uses key: * with fallback on, recommending the house jacket: “It suits nearly everyone, and it is the piece we would hand you first.”

Tip

Resist mapping every combination. Nine results for nine combinations is nine products you have to keep in stock and nine blocks to maintain. Three broad results plus a fallback answers the same question and is honest about the fact that most of your catalogue suits most people.

What the shopper sees

Questions on the left, the answer beside them. Before anything is answered the result column shows a dashed resting panel reading “Your match appears here” — so the layout doesn’t jump when an answer arrives and the column isn’t an empty void.

The result is only revealed once every question has an answer. All results are stacked in the same place and only the matched one is shown, so changing an answer swaps the panel rather than moving the section.

Each result shows the product image, a label, the heading (or the product title), the copy, a “Matched on — Every day ✚ Close” line listing the answers that produced it, the price, a See the piece button, and a Peek button when quick view is enabled.

Accessibility

• Each question is a real <fieldset> with a <legend>, so the options are announced as a group with the question as their label.
• The result column is role="status" with aria-live="polite", so a screen reader hears the match when it arrives without having it interrupt.
• The “matched on” line is hidden when empty rather than leaving an empty element.

Section settings

Setting	Default
Heading	Find your fit
Side note	Two questions
Intro	A line of rich text above the questions
Result label	Your match
Before answering	Your match appears here
Result button	See the piece
Colour scheme	default — or flip the section onto the light or deep plane
padding_top / padding_bottom	48 px each