1. What is Quiz?
The Quiz section lets you build a multi-step interactive product finder that guides shoppers to the right product based on their answers. Instead of browsing through your catalog, customers answer a short series of questions - and the section automatically recommends the best-matching products based on how each answer is configured.
2. Section Components
| Section | Quiz | Adds a multi-step interactive product finder that recommends products based on shopper answers. |
|---|---|---|
| Available blocks | Question | Adds a question step to the quiz. Each Question block holds one or more Option sub-blocks as its answer choices. |
| Option | Adds an answer choice inside a Question block. Configures which products to match, partially match, or exclude when this option is selected. |
⚠️ Note: Option blocks must be added inside a Question block — they cannot be added directly to the Quiz section level.
3. Location & Setup
To add and set up the Quiz section:
- Open the Shopify Theme Editor (Online store > Themes > Customize).
- Navigate to the page where you want the quiz to appear.
- Click "Add section".
- Select "Quiz".
4. Highlight Features
- Multi-step flow: Shoppers move through one question at a time with Previous and Continue navigation buttons and a built-in progress indicator.
- Three-tier product matching: Each answer option can assign products as Strong match, Partial match, or Exclude (removed from results entirely) - giving you precise control over recommendations.
- Skip logic for branching paths: Configure any option to skip specific questions when selected, so the quiz adapts dynamically to each shopper's path.
- Fallback products: Set Default recommended products to display when no products match a shopper's answers.
5. Common Use Cases
🤔 How to build a product finder Quiz from scratch?
Follow these steps to set up a complete quiz — from the intro screen to the results page.
STEP 1: Add the Quiz section
Add the Quiz section to your desired page (as guided in 3. Location & Setup).
STEP 2: Set up the start screen
Click on the Quiz section to open its settings panel. Fill in:
- Heading - the main title shoppers see before starting (e.g. "Find your personalized recommendations").
- Subheading - a short supporting line (e.g. "2 minutes · 4 questions").
- Description - a brief intro explaining what the quiz does.
- Note - optional small-print text, such as a privacy note.
- Button label - the call-to-action to begin (default: "START THE QUIZ").
STEP 3: Configure the results screen
Scroll down to the Result settings group and fill in:
- Heading and Subheading - shown above the recommended products.
- Description - supporting copy on the results screen.
- Reset button label - the label for the retake button (default: "Reset Quiz"). Leave blank to hide the button.
- Maximum number of recommended products - controls how many results to display (1–5, default: 3).
- Default recommended products - fallback products shown if no answers produce a match.
STEP 4: Add a Question block
Under the Quiz section, click "Add block" and select Question. In the block settings:
- Enter a unique Question ID (e.g. q1, q2) - required if you plan to use skip logic (further guide in the next use case 🤔 How to use skip logic to create branching quiz paths?)
- Enter the Heading - the question text shoppers will see (e.g. "Who are you shopping for?").
- Optionally add a Description for extra context below the question.
STEP 5: Add Option blocks inside the question
Under the Question block, click "Add block" and select Option. Repeat for each answer choice. For each Option block, configure:
- Heading - the answer label shoppers see (e.g. "For me", "As a gift").
- Strong match - select products that are the best fit for this answer. These receive the highest recommendation weight.
- Partial match - select products that are a good-but-not-perfect fit. These receive a lower weight than Strong matches.
- Exclude product - select products that must never be recommended if this answer is chosen.
STEP 6: Repeat for additional questions
Add more Question blocks under the Quiz section and populate each with its Option blocks. Aim for 3–5 questions for the best completion rates.
STEP 7: Click "Save" and preview.
🔍 Information: The scoring system works as follows - each time a shopper selects an option, all Strong match products receive +2 points and all Partial match products receive +1 point. Any product set as Exclude in a selected option is removed from the results entirely, regardless of its score from other questions. The top-scoring products (up to the Maximum number of recommended products) are shown on the results screen.
🤔 How to use skip logic to create branching quiz paths?
Skip logic lets the quiz jump over certain questions based on what a shopper selects - so different shoppers see a different path through the quiz. This is useful when some questions are only relevant to a subset of your audience.
🔍 Information: Skip logic works by matching Question IDs. When a shopper selects an option that has Question IDs in its Skip questions field, those questions are hidden for the rest of that quiz session. Questions can only skip forward - you cannot skip back to a previous question. Skipped questions do not count toward product scoring.
STEP 1: Assign Question IDs to your questions
Click on each Question block and enter a short, unique Question ID in its settings (e.g. q1, q2, q3). You only need to assign IDs to questions that you may want to skip.
STEP 2: Configure the skip on the relevant Option block
Click on the Option block where selecting it should trigger a skip. In its settings, find the Skip questions field and enter the Question IDs of the questions to skip, separated by commas (e.g. q3, q4).
STEP 3: Click "Save" and test the path in preview.
Walk through the quiz as a shopper would - select the option with skip logic configured and confirm the target questions are hidden. Then go back and select a different option to confirm those questions reappear correctly.
⚠️ Note: If a shopper goes back and changes an answer that was previously triggering a skip, the skipped questions will reappear - and any answers they had selected in those questions will be cleared automatically.
🤔 How to add icons or images to answer options?
Making answer options visual helps shoppers scan and select more confidently. You can add a theme icon, a custom image, or an SVG to each Option block.
STEP 1: Open the Option block settings
Inside a Question block, click on the Option block you want to customize.
STEP 2: Choose your icon type
In the Icon setting, select from:
- None - no icon displayed.
- Use another icon - pick from the theme's built-in icon library.
- Any other value - upload a Custom icon image or paste a Custom icon (SVG code).
STEP 3: Adjust icon appearance
- Use Icon position to control where the icon appears relative to the option text.
- Use Icon size to set how large the icon renders.
STEP 4: Click "Save" when done.
💡 Tip: Keeping icon sizes consistent across all options in the same question gives the quiz a cleaner, more polished look.
6. Support Information
Need help? Contact support@omnithemes.com or visit omnithemes.com.
