Quiz

A step-by-step product finder. Shoppers answer a few questions, and a results window recommends matching products, either ones you pick for each answer or ones found by product tag or metafield. Answers can also send shoppers down different branches of questions.

Good for

• A Find your perfect… quiz that recommends two or three products
• A gift finder that asks who it's for, then branches into different questions
• Guiding new shoppers through a large catalog by need, taste or skin type

Set up the quiz

1. Add the section and the questions. Add the Quiz section. Its Default block is fixed in place and holds the main run of questions, shown one after another. Click Add block under Default to add a Question, and fill in up to four options. An option only appears if it has text or an image.
2. Choose how results are found. In the section settings, set Product setup. Default: open each question and pick the products for each option under Products (up to 12). Advanced: give each option a Result tag instead, and the quiz finds the products.
3. Default mode: choose how answers combine. Product match decides the results. Match any shows every product picked for any of the chosen answers. Match all shows only products picked for every chosen answer, so the more questions a shopper answers, the fewer the results.
4. Advanced mode with product tags: tag your products. Leave Metafield key empty. In Products, add the same tags you used as result tags, for example citrus or dry skin. An option can carry several tags, separated by commas. Then open the Search & Discovery app, go to Filters, and add the Tag filter. The quiz searches through storefront filters, so without the Tag filter it finds nothing.
5. Advanced mode with tags: know how tags combine. The quiz collects the tags from every answer and asks Shopify for products that carry all of them. Each tagged answer narrows the results, so tag products generously, or leave the Result tag empty on questions that shouldn't filter.
6. Advanced mode with a metafield (optional). Instead of tags, you can match a product metafield. In Settings → Custom data → Products, create a metafield that is a list of single line text, and fill it in on each product with values that match your result tags. In the Search & Discovery app, add that metafield as a filter. Then enter its namespace.key, for example custom.quiz_match, in Metafield key. With a metafield, a product matches if it has any of the chosen values.
7. Add a branch (optional). Click Add block on the section itself and choose Branch. Give it a Branch ID, such as coffee, and add Question blocks inside it. Branches can hold further branches.
8. Connect an option to the branch. On a single-choice question, open the option, turn on Enable branch condition, and type the Branch ID into Connect to branch. Capital letters and spaces at either end don't matter. Choosing that option jumps to the branch's first question.
9. Test every path. Preview the store and try each route through the quiz, including skipped questions, to check that every path ends on at least one product.

How to add the section

1. From your Shopify admin, go to Online Store → Themes and click Customize on Sublime.
2. Open the page you want to edit from the dropdown at the top of the editor.
3. In the left sidebar, click Add section.
4. Search for Quiz and select it.
5. Drag it into position, adjust the settings below, and click Save.

Section settings

Content

Card style

Quiz result

Appearance

Spacing

Top and bottom spacing for desktop, with optional separate values for mobile. These are the same controls on every section. See Settings every section shares.

Blocks

Blocks are the individual pieces inside the section. In the sidebar, click Add block under the section to add one, and drag blocks to reorder them. The order in the sidebar is the order on the page.

Branch block

Inside each Branch you can add these nested blocks: Question and Branch. Click the block in the sidebar, then Add block beneath it.

Question block

Option 1–4

Each of the 4 options has the same settings, set separately for each one.

Tips

• Three to five questions is the sweet spot. Every extra step loses a few shoppers.
• Make every path end on a product. A "no results" screen at the end of a quiz feels worse than no quiz, so test each route.
• Use images for taste and style questions. Turn on Show images and give every option a picture; questions without an image for every option look uneven.
• Turn on Allow skipping for optional questions like budget, so shoppers who don't care aren't forced to choose.
• Tag for the quiz on purpose. Result tags such as quiz-citrus keep quiz tags apart from the tags you use elsewhere.

Troubleshooting

The quiz always says no products were found (Advanced mode)

Check three things. The Tag filter (or your metafield filter) has been added in the Search & Discovery app. The products actually carry the tags or values typed in Result tag. And the products are in stock and available on the Online Store; sold-out products are left out. With tags, a product must carry every tag the shopper collected, so try fewer tagged questions.

After a branch, the quiz goes straight to results

That's by design. Once a shopper enters a branch, the quiz runs that branch's questions and then shows results; it doesn't return to the remaining Default questions. Put any questions every shopper should answer before the branching question, or repeat them inside each branch.

Choosing an option doesn't open my branch

Check that Enable branch condition is on for that option and that Connect to branch matches the branch's Branch ID exactly. Branching isn't available on questions with Allow multiple selections turned on.

The Question 1 of 3 counter has disappeared

The counter only counts the Default questions. It's hidden inside a branch, and hidden altogether when the first question can lead into a branch, because the number of steps is then unknown.