Fit finder

A two- or three-question quiz with chip answers on the left and a single recommendation on the right. Pick one option per question and the matching result appears, with the product’s image, a reason, a price and a button.

For a brand with a dozen pieces this does what a filter cannot: it asks about use, not attributes. “What are you dressing for?” and “How do you like it to sit?” are questions a shopper can answer about themselves; “shell weight” is not. It ships on the size guide page template.

Section settings

Setting	Type	Default	What it does
Heading	Text	Find your fit	Section heading.
Side note	Text	Two questions	Side note on the right. Plain text — set it to the real number of questions.
Intro	Rich text	<p>Answer two and we will point you at the piece that suits how you actually wear it.</p>	Lead paragraph above the questions.
Result label	Text	Your match	The accent label above the recommended product’s name.
Before answering	Text	Your match appears here	What the result panel says before anything has been answered.
Result button	Text	See the piece	The result’s button text.
Colour scheme	Select — Default / Light / Deep	default	Which ground the section sits on.
Top spacing	Range, 0–160 px	48	Top spacing.
Bottom spacing	Range, 0–160 px	48	Bottom spacing.

Up to 24 blocks in total, questions and results combined.

Question blocks

Setting	Type	Default	What it does
Question	Text	What are you dressing for?	The question, shown as an accent label.
Key	Text	goal	A short name for this question, used to keep its answers apart from the other questions’. It is never shown to shoppers.
Options	Textarea	Every day | daily The commute | commute Cold and wet | weather	One option per line, written as Label | key. The label is the chip text; the key is what a result matches on.

Result blocks

Setting	Type	Default	What it does
Key	Text	daily, close	Which combination of answers this result claims. One key per question, in the order the questions appear, comma separated. * means “any answer here”.
Product	Product	—	The product to recommend. Supplies the image, the price, the link and the fallback heading.
Heading	Text	—	Result heading. Defaults to the product’s title.
Text	Textarea	Cut to be worn hard and often. The one most people keep reaching for.	Why this piece suits the answers given.
Use as the fallback	Checkbox	false	Use this result when nothing else matches. Mark exactly one.

How the matching works

Two three-option questions give nine possible combinations, and you do not have to write nine results.

• A result key lists one answer key per question, in question order: daily, close.
• * in any position means “any answer here”, so daily, * covers all three fits for the everyday goal in one block.
• The most specific match wins. With both daily, close and daily, * present, someone answering Every day + Close gets daily, close; anyone else answering Every day gets daily, *.
• If nothing matches at all, the block marked Use as the fallback is shown.
• Keys are compared case- and space-insensitively, so Daily, Close and daily,close behave identically.

The result only appears once every question has been answered. Until then the panel shows the resting message in a dashed frame, so the column is neither empty nor jumping around. A line reading Matched on — Every day ✚ Close is written under the result, so the shopper can see what produced it and change their mind.

Setting one up

1. Add a Question block. Give it a short key — goal, fit, weather.
2. Write its options one per line as Label | key. Keep the keys to one lowercase word.
3. Add a Result block per combination you care about. Its key is the question keys’ answers in order, comma separated.
4. Use * generously — commute, * is usually better than three near-identical results.
5. Add one last result with * in every position and Use as the fallback ticked, so nobody ever gets a blank answer.

The preset is a worked example of exactly that: two questions, one specific result (daily, close), three row-covering results (daily, *, commute, *, weather, *), and a * fallback.

Behaviour worth knowing

• The section renders nothing if it has no question blocks. The result column is omitted if it has no result blocks.
• The result’s Peek button — quick view for the recommended product — appears only when the theme’s Quick view setting is on.
• Results are stacked in the same place and only the matched one is shown, so changing an answer swaps the result without the page jumping.
• Below 980 px the questions and the result stack vertically.

Tip

Two questions, three options each. Three questions means 27 combinations and a shopper who gives up on the second one. The point of the finder is that answering it is faster than reading six product pages — the moment it stops being faster, it stops working.

Caution

Always mark a fallback. Without one, any combination you did not write a result for shows an empty column — and with * wildcards it is easy to believe you have covered everything when you have not.