Quiz Trigger

The visible half of the quiz: a single line with a small bottle icon that reads “Not sure what formula is right for you? Take the quiz.” Clicking the link opens the quiz in a dialog.

Drop it under a product grid, in a hero, or anywhere a shopper might stall on which formula to pick.

Note

This block only shows the prompt. The quiz content itself lives in the Quiz Modal section — build the quiz there first, or there’s nothing for this to open.

Settings

Setting	What it does
Quiz	The quiz this trigger opens. Used for the dialog title and for tracking. Leave it empty and the block doesn’t render.
Quiz section ID	Which Quiz Modal section holds the content. Defaults to quiz-modal — leave it alone unless a developer has told you otherwise.
Prompt text	The lead-in sentence. Defaults to “Not sure what formula is right for you?”
Link text	The clickable part. Defaults to “Take the quiz.”
Alignment	Left, center, or right. Defaults to center.

Caution

Quiz and Quiz section ID have to agree. The Quiz setting decides what the dialog is called and what gets tracked; the section ID decides what’s actually inside it. Point them at two different quizzes and the dialog will show the wrong questions under the right title.

If there’s only one quiz on the store — the normal case — leave the section ID at its default and this can’t happen.

Placing more than one

You can put several triggers on a page (say, one in the hero and one further down). They share a single copy of the quiz, so the second one costs nothing extra.

Pointing them at different quizzes needs a developer — see the caution on the Quiz Modal page.

Accessibility

Handled for you, but worth knowing when reviewing:

• The link is a real button, so it works with keyboard and screen readers.
• Focus is trapped inside the dialog while it’s open and returns to the trigger when it closes.
• Escape closes the dialog.
• Animations respect the “reduce motion” setting.

Tips

• Put it near the decision. It works best right where someone is comparing products, not stranded in a footer.
• Keep the prompt short. It’s one line by design; a long prompt wraps awkwardly on mobile.
• Match the question to the page. On a migraine-specific page, “Not sure which formula?” reads better than the generic default.