Guided Product Finder
Product finder wizard: branching questions and why a product fits. Pro · Shop and payments › Catalog
A short quiz that recommends products and says why: questions branch on the answers, each answer adds or takes points from products (or rules some out), and the results explain every match — what fits, what to keep in mind and what was ruled out by which answer.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add guided-product-findernpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { GuidedProductFinder } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
questions * | FinderQuestion[] | Questions in order; next on a question branches by answer. | |
products * | FinderProduct[] | Products the answers score. | |
answers | FinderAnswers | Answers by question id. | |
defaultAnswers | FinderAnswers | EMPTY | Initial answers when uncontrolled. Answers that already complete the quiz open it on the results. |
onAnswersChange | (answers: FinderAnswers) => void | Called with all answers after each change. | |
onComplete | (matches: FinderMatch<FinderProduct>[]) => void | Called when the reader opens the results, with the ranking. | |
onSelect | (product: FinderProduct) => void | Called when the reader picks a product from the results (in place of following href). | |
limit | number | 3 | Products shown as matches. Default 3. |
loading | boolean | false | Questions are loading: skeleton. |
error | ReactNode | Loading failed: shown instead of the finder. | |
title | ReactNode | Heading. Default: labels.title. | |
headingLevel | 2 | 3 | 4 | 5 | 3 | Level of the heading (default 3). |
locale | string | BCP 47 locale for numbers. | |
labels | Partial<GuidedProductFinderLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Related components
- Product Card — Product card
- Product Grid — Product catalog
- Product Filters — Catalog filters
- Product Spotlight — Featured product: tagged photo, price, rating and actions
- Reviews Summary — Reviews: average rating, filterable histogram, sorting and helpful votes
- Location Card — Store location: distance, opening hours, pickup options and ordering
- Shopping Cart Drawer — Slide-out cart
- Checkout Summary — Order summary at checkout
- Checkout Form — Checkout: shipping, address type, payment and field validation
- Order Tracking — Order tracking: stages, carrier, tracking number and history
- Invoice — Printable invoice: line items, taxes, discounts and totals in any currency
- Credit Card — Bank card: gradient or two-tone, network detected from the number, contactless
Previous: Reviews Summary · Next: Location Card · All Shop and payments