Product finder

ProConversionv1.0.0

Guide shoppers to the right product with a short quiz. Each question is a block with up to four answers, and each answer names the product tags it matches. Shoppers move through one question at a time (big step numbers, answer cards, keys 1 to 4), while a live panel re-ranks your products after every choice. The result shows the best match large, with the answers that led there and an Add to cart (with option picker), plus two more good fits. Nothing is collected or sent anywhere: matching happens in the browser from your product tags.

Good for: Find the right product · Gift finder · Routine or regimen builder

When to use it

Use it on your home page, a landing page or a gift guide, wherever shoppers don’t know which of your products to start with.

A recommendation, not a catalog. Shoppers answer a few questions, one at a time, and get one best match with an Add to cart, plus two more good fits.
Shoppers see why. A live panel re-ranks your products after every answer, and the result lists the answers that led to it.
Nothing to connect. Matching runs on your product tags, in the shopper’s browser. Answers aren’t saved or sent anywhere.

Set it up

Add the section

Choose Add section and pick SU: Product finder. It starts with three example questions.

Under Products, choose up to 50 in Products to recommend. When two products match equally well, the one higher in this list wins, so put your favorites first.

Write the questions

Select a Question block and type the Question, with optional Help text under it. You can have up to 6 questions.

Write the answers and their tags

Each question has up to four answers, Answer 1 to Answer 4. For each one, fill in Answer, an optional Detail line, and Matches product tags: the product tags this answer stands for, separated by commas, for example living, cosy. Leave Answer empty to hide an answer you don’t need.

A product scores a point for every question where the chosen answer shares at least one tag with it. Its match is the share of questions it scored on, shown as a percentage.

Tag your products

In Shopify admin, open each product and add the tags your answers use. Tags must match exactly, apart from upper and lower case: under-50 doesn’t match under 50.

Set up the intro and the result

Under Intro, keep Show an intro screen on to open with a Label, Heading, Text, Intro image and a Start button, or turn it off to start straight at the first question. Under Products, Badge on the best match labels the recommendation, and Show two more good fits adds the next two products under it.

If none of the products share a tag with the answers, the result still shows the first product in your list, under the label Our favourites. Check your tags if that happens when it shouldn’t.

Product finder: The recommendation, with why it fits and other good matches. — The recommendation, with why it fits and other good matches.

Try it

Open full page(opens in a new tab)

Live example with sample products. Links and checkout are turned off; Add to cart shows what shoppers would see.

Product finder: One question at a time, with matches updating as shoppers answer. — One question at a time, with matches updating as shoppers answer.

Settings

In the theme editor, in the order you'll see them. Every section also has the heading and style settings.

Intro

Setting	What it does
Show an intro screenCheckbox	Default: On
Intro imageImage
Start buttonText	Default: Start

Products

Setting	What it does
Products to recommendProducts (up to 50)	Answers match these products by their tags. Pick up to 50.
Badge on the best matchText	Default: Best fit
Show two more good fitsCheckbox	Default: On
After adding to cartDropdown	Options: Open the cart, Stay on the pageDefault: Open the cart
LookDropdown	Options: Blend with the theme, CardDefault: Blend with the theme

Blocks go inside the section: use Add block, up to 6 in all, and drag them to change the order.

Block: Question

Setting	What it does
QuestionText	Default: What are you looking for?
Help textText
AnswerText	Default: Option one
DetailText
Matches product tagsText	Comma-separated, e.g. living, cosy. Products with any of these tags score.
AnswerText	Default: Option two
DetailText
Matches product tagsText	Comma-separated, e.g. living, cosy. Products with any of these tags score.
AnswerText	Default: Option three
DetailText
Matches product tagsText	Comma-separated, e.g. living, cosy. Products with any of these tags score.
AnswerText
DetailText
Matches product tagsText	Comma-separated, e.g. living, cosy. Products with any of these tags score.

Good to know

Matching uses product tags: tag your products to match the answers.
Up to 6 questions with 4 answers each, and up to 50 products.
Answers aren't saved or sent anywhere; there's no email capture.
Without JavaScript the intro shows with every product below it as a plain list with Add to cart.

Accessibility: Each question is a labelled group of buttons with pressed states; focus moves to each new question and to the result; number keys pick an answer; matches are written as text percentages, not only bars. Motion is reduced for shoppers who prefer it.

Speed: Questions and products render in Liquid; a small script switches screens and ranks the products in the browser, with no requests until a shopper adds to cart.

Changelog

1.0.0: Initial release.