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, a built-in animated progress bar, and smooth loading transitions between screens.
- Single or multi-select per question: Set each Question block independently to Single select (one answer only) or Multi-select (shopper can pick several), so the quiz adapts to how each question works.
- 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.
- Sold-out product handling: Sold-out products are automatically excluded from quiz results. If all recommended products for a given answer combination are sold out, the quiz falls back to the Default recommended products instead of showing an empty results screen.
- Fallback products: Set Default recommended products to display when no products match a shopper's answers — or as a safety net when all matched products are sold out.
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").
- Background image - optionally upload an image to display behind the intro screen. Upload a separate Mobile image for smaller screens, and adjust Overlay opacity to control how much the image is dimmed behind the text. The background image only appears on the intro screen — question and results screens use the section's background color.
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, or if all matched products are sold out. Always fill this in as a safety net.
STEP 4: Add a Question block
Under the Quiz section, click "Add block" and select Question. In the block settings:
- Set Type to Single select (shopper picks one answer) or Multi-select (shopper can pick several). Default is Single select.
- Enter a unique Question ID (e.g. q1, q2) - required if you plan to use skip logic.
- 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.
- Optionally set an Option background color (light and dark) to give this question's answer choices a distinct background color.
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. In a Multi-select question, weights from all chosen options are added together. Any product set as Exclude in any 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. Sold-out products are excluded automatically; if all matched products are sold out, Default recommended products are shown instead.
🤔 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.
🤔 How to set up a multi-select question?
By default, each question allows only one answer. Switching a question to Multi-select lets shoppers pick multiple answers before moving on — useful for questions like "Which concerns do you want to address?" where more than one answer applies.
STEP 1: Open the Question block settings
Click on the Question block you want to change.
STEP 2: Set the Type
In the block settings, find the Type setting and switch it from Single select to Multi-select.
STEP 3: Click "Save" and preview.
In preview, shoppers will now be able to select multiple options before clicking Continue. The quiz collects all selected options and adds their product weights together before moving to the next question.
🔍 Information: With Multi-select, scoring accumulates across all chosen options — if a shopper picks two options that both assign +2 to the same product, that product receives +4 total. This means products that appear as Strong matches in multiple selected options will rank higher in the results.
🤔 How to add a background image to the quiz intro screen?
You can upload a custom background image that appears behind the intro screen of your quiz — the screen shoppers see before they start answering questions. The question and results screens are not affected and continue to use the section's background color.
STEP 1: Open the Quiz section settings
Click on the Quiz section to open its settings panel.
STEP 2: Upload the background image
Find the Background image setting and upload your image. For a better appearance on small screens, upload a separate Mobile image — if left empty, the desktop image is used on mobile as well.
STEP 3: Adjust the overlay opacity
Use the Overlay opacity slider to control how much the image is dimmed behind the intro text. A value of 0% shows the image at full brightness; higher values darken it to improve text readability. Default is 0%.
STEP 4: Click "Save" when done.
⚠️ Note: The background image only displays on the intro/start screen. Once a shopper clicks the start button and enters the questions, the background image is no longer shown.
🤔 How does the quiz handle sold-out products and variant selection?
From v10.1.0, the quiz handles sold-out products and product variants automatically — no additional setup required.
Sold-out product handling
If a recommended product is out of stock, it is automatically excluded from the quiz results. If all products recommended for a shopper's combination of answers happen to be sold out, the quiz falls back to the Default recommended products configured in the section settings — preventing an empty results screen.
💡 Tip: Always fill in the Default recommended products field in your Quiz section settings, even if you don't expect frequent stockouts. It acts as a safety net and ensures shoppers always see relevant products.
Variant selection popup
When a recommended product on the results screen has multiple variants, clicking Add all to cart now opens a variant-selection popup automatically, allowing the shopper to choose the right variant before adding to cart.
6. Support Information
Need help? Contact support@omnithemes.com or visit omnithemes.com.
