Product finder
Product finder asks a few questions, such as skin type or the finish a shopper likes, and recommends the best matching products with an add to cart button. Each answer lists the product tags, product types or collection handles it matches. Products earn points for every match, times the question's weight, and the best match comes first.
How to set it up
Step 1: Add the section
- In the theme editor, open the page and click Add section.
- Choose Product finder. Drag it to where you want it on the page.
Step 2: Write the intro
- Under Intro, write an eyebrow, a heading and a short text, and the Start button label.
- Add an Image beside the intro and choose its position.
Step 3: Add the questions
- Click Add block > Question. Write the Question and an optional Hint.
- Set the Weight: how much this question counts in the result.
- Fill in up to four answers. Give each a Label, an optional Image, and in Matches the product tags, product types or collection handles it matches, separated by commas, for example
dry, sensitive, hydrating.
Step 4: Set the results
- Under Results, choose the Collection (1) to recommend from, or leave it empty to use all products (the first 50).
- Set the number of Products shown, the results heading and the labels for best match, add to cart, back and restart.
- Add a link below the results, for example to the full collection.
Step 5: Review the settings
- See the settings reference below for every option.
Tag your products first
The finder can only match what your products carry. Add tags such as skin types or finishes in Shopify Admin, or use product types and collections you already have.
Settings reference
Product finder
| Intro | |
|---|---|
| Highlight style | Options: None, Swipe, Sheen, Halo, Marker, Soft underline. |
| Highlight color | |
| Start button label | |
| Note next to the button | |
| Image | An image from your files. |
| Image position | Options: Left, Right. |
| Results | |
| Collection | The products to recommend from. Leave empty to use all products (the first 50). |
| Products shown | Slider. |
| Eyebrow | |
| Heading | |
| Best match label | |
| Add to cart label | |
| Back label | |
| Restart label | |
| Link label | |
| Link | Where the link goes. |
| Corners | |
| Make section rounded | Rounds this section's corners with the radius set for each one. |
| Top left radius | Slider. |
| Top right radius | Slider. |
| Bottom right radius | Slider. |
| Bottom left radius | Slider. |
Full width, section layout, color scheme, spacing and mobile overrides work the same in every section: see Section layout and spacing. Headings, subheadings and descriptions: see Section headings and text.
How it works
- Matching ignores capitals. A product that matches several answers ranks higher.
- Products with the same score keep the order of the collection.
- The quiz runs in the browser; no app or customer data is needed.