Quiz Modal

A short quiz that opens in a dialog, asks a few questions, and ends on a recommended product with an Add to cart button. It’s how a shopper who doesn’t know which formula they need gets pointed at one.

The quiz is built entirely from metaobjects in Content → Metaobjects — no app, no code change to edit a question. What you write there is what shoppers see.

Two pieces work together:

• The Quiz Trigger block is the visible line on the page — “Not sure what formula is right for you? Take the quiz.” It’s what shoppers click.
• The Quiz Modal section (this page) holds the quiz content. It renders nothing on the page by itself.

Any ordinary Button block can open the quiz too — set its What the button does setting to Open the quiz. That’s the usual choice when you want a normal “Take the quiz” button rather than the one-line prompt. Either way the quiz content still comes from this section.

Note

The quiz content loads quietly in the background a moment after the page finishes loading, so the dialog opens instantly when clicked. That means the quiz costs the page nothing — a shopper who never takes it never downloads it.

Settings

Setting	What it does
Quiz	The quiz to render. Each quiz needs its own copy of this section — see the caution below.

Caution

The Quiz Trigger block cannot override which quiz this section renders. If you need a second, different quiz on the store, a developer has to add a second Quiz Modal section file for it. Pointing two triggers at one section gets you the same quiz twice.

This is a Shopify limitation, not a design choice: a section loaded on demand can’t be passed a parameter telling it what to render, so it has to be configured with the answer up front.

Building a quiz

Work bottom-up. Each step references the one before it, so anything you skip won’t be selectable when you need it.

1. Decide your results first

Before writing a single question, list the products the quiz can land on and give each one a handle key — a short, lowercase nickname you’ll reuse in every question. For example:

• original-formula
• migrelief-nowrx
• childrens-formula

Write these down. You’ll type them by hand repeatedly and they must match exactly every time.

Caution

Once a quiz is live, don’t rename a handle key. Answers point at results by that key, and renaming it silently breaks every answer that used it — the quiz keeps working but stops scoring toward that product. Change the Title freely; leave the Handle key alone.

2. Create the Quiz Answers

Content → Metaobjects → Quiz Answer → Add entry. One entry per answer option, across all questions.

Field	Notes
Label	The answer text the shopper reads.
Description	Optional second line under the label.
Icon	Optional small image.
Weights	The important one. See below.

Weights is where an answer connects to a result. It’s a small block of JSON mapping handle keys to points:

{ "original-formula": 2, "migrelief-nowrx": 1 }

That answer gives 2 points to Original Formula and 1 to NowRx. An answer can point at one result, several, or none.

Rules of thumb:

• 2 points for a strong signal, 1 for a mild lean.
• A neutral answer (“Not sure”) can be {} — it scores nothing and that’s fine.
• Keys that don’t match any result are ignored, so a typo fails quietly. Check your spelling against the list from step 1.

3. Create the Quiz Results

Content → Metaobjects → Quiz Result → Add entry. One per possible outcome.

Field	Notes
Handle key	The nickname from step 1. Must match your Weights exactly.
Title	The heading on the result screen.
Description	Why this formula suits them.
Product	The recommended product — drives the image, price and Add to cart.
Image override	Optional, if the product’s own photo isn’t the one you want.
Badge	Optional flag above the title, e.g. “Best match”.

4. Create the Quiz Questions

Content → Metaobjects → Quiz Question → Add entry.

Field	Notes
Question	The question text.
Helper text	Optional clarifying line beneath it.
Answers	Pick the Quiz Answers for this question, in display order.
Allow multiple	Off (normal): tapping an answer moves straight to the next question. On: the shopper can pick several and taps Continue.

5. Create the Quiz

Content → Metaobjects → Quiz → Add entry. This ties it together.

Field	Notes
Title	Shown as the dialog heading.
Intro	Optional lead paragraph.
Questions	Your questions, in order. Three is the designed length.
Results	Every possible result. Order matters on ties — see below.
Fallback result	Shown if nothing scores. Defaults to the first result.
Privacy note	Small print under the result, e.g. a medical disclaimer.

6. Put it on a page

1. In the theme editor, open the page and add the Quiz Trigger block where you want the line to appear.
2. Choose your Quiz in its settings.
3. Adjust the prompt and link text if you want wording other than the default.

How the winner is picked

Every answer adds its points to a running tally. At the end, the result with the most points wins.

Worked example, with results original-formula and migrelief-nowrx:

Question	Answer chosen	Weights
How often do you get migraines?	Several times a month	{"original-formula": 2}
What are you looking for?	Daily prevention	{"original-formula": 2}
When do you need relief?	At onset	{"migrelief-nowrx": 2}

Totals: Original Formula 4, NowRx 2 → Original Formula wins.

Two things worth knowing:

• Ties go to whichever result is listed first in the quiz’s Results field. So put your safest general recommendation at the top.
• If nothing scores — every answer was neutral — the shopper sees the Fallback result rather than an arbitrary one.

Note

There’s no “right” answer to tune toward. If one product wins too often, look at your Weights: usually one answer is over-weighted, or a result has no strong answer pointing at it at all.

Tracking

Every step fires an event a tag manager can pick up, so you can see where people drop off — how many open the quiz, how many actually start, and how many finish.

Event	Fires when
quiz:open	The dialog opens
quiz:start	The first answer is picked
quiz:answer	Any answer is picked
quiz:step	The shopper advances
quiz:complete	The result is shown, with the winning result and scores
quiz:restart	The quiz is retaken
quiz:close	The dialog closes

The gap between quiz:open and quiz:start is the one to watch — it’s people who opened the quiz and didn’t answer anything.

Ask a developer to wire these into GA4; the events are already firing.

Tips

• Keep it to three questions. That’s what the design was built around, and completion drops off fast beyond it. More questions is worse, not better.
• Write answers in the shopper’s words, not clinical ones. “Several times a month” beats “moderate frequency.”
• Give every question at least one answer per result. If no answer points at a product, it can never win.
• Test all the way through in a preview after building — pick the answers you expect to land on each result and confirm they do.

First-time setup — the metaobject definitions

The four definitions have to exist before you can add any entries. Build them in Settings → Custom data → Metaobjects → Add definition, in this order — each one references the previous, so a definition built out of order won’t have its reference field available.

Give every definition Storefront access: read (under the definition’s options), or the theme can’t display it.

1. Quiz Answer — type quiz_answer

Field name	Key	Type	Required
Label	label	Single line text	Yes
Description	description	Single line text	—
Icon	icon	File	—
Weights	weights	JSON	Yes

2. Quiz Result — type quiz_result

Field name	Key	Type	Required
Handle key	handle_key	Single line text	Yes
Title	title	Single line text	Yes
Description	description	Rich text	—
Product	product	Product reference	Yes
Image override	image_override	File	—
Badge	badge	Single line text	—

3. Quiz Question — type quiz_question

Field name	Key	Type	Required
Question	question	Single line text	Yes
Helper text	helper_text	Single line text	—
Answers	answers	Metaobject (list) → Quiz Answer	Yes
Allow multiple	allow_multiple	True or false	—

4. Quiz — type quiz

Field name	Key	Type	Required
Title	title	Single line text	Yes
Intro	intro	Rich text	—
Questions	questions	Metaobject (list) → Quiz Question	Yes
Results	results	Metaobject (list) → Quiz Result	Yes
Fallback result	fallback_result	Metaobject → Quiz Result	—
Privacy note	privacy_note	Rich text	—

Caution

The keys in the middle column must match exactly — the theme looks fields up by key, not by name. Display names can be whatever reads best in the admin.

Or script it

If you’d rather not click through the above, scripts/create-quiz-metaobjects.js creates all four via the Admin API. It needs a custom app token with write_metaobject_definitions:

SHOPIFY_STORE=your-store.myshopify.com \
SHOPIFY_ADMIN_TOKEN=shpat_xxx \
node scripts/create-quiz-metaobjects.js --dry-run

--dry-run prints what it would create and makes no API call at all — worth running first. Drop the flag to create them. Re-running is safe; definitions that already exist are skipped.

Caution

Run it against a development store first. It creates schema, which isn’t automatically reversible.