Skip to content
Help Center

Open a quiz from your own button

Make any button in your theme open a quiz, in a popup or full screen, with the quiz's ID.

Attravo TeamUpdated 1 min read
On this page

Any button or link in your theme can open a quiz, such as a hero banner's button or a product page's "Help me choose". You give it the quiz's ID, and the app embed does the rest.

Before you start

Turn on the Quizz Core Script app embed in your theme. See Turn on the Quizz Core Script app embed.

App embeds with Quizz Core Script on

The quiz must be published.

Copy the quiz's ID

  1. Open the quiz and select Settings.
  2. Under Placing it in your theme, select Copy next to Quiz ID.
Placing it in your theme, with Copy highlighted next to the Quiz ID

Add it to a button

Give the button a data-quiz-id attribute with the ID you copied. For example, in a Custom Liquid section or your theme's code:

<button type="button" data-quiz-id="6ac4bcbe3d446dac439f64cf">Find my routine</button>

Your theme's own button styles still apply.

A store banner with its Find my routine button highlighted

How it opens

  • In a popup, for most quizzes.
  • Full screen, when the quiz's Show this quiz in is Dedicated page.
The quiz in a popup over the store page

To choose for one button, add data-quiz-mode="popup" or data-quiz-mode="page". To give the popup a heading, add data-quizz-modal-heading and data-quizz-modal-subheading with your text.

Was this helpful?

More in On your store