If you can't use page sections (the easy way), you add a quiz button with a code snippet anywhere on your store that renders HTML.
First, open the quiz you want to use and go to the Publish section.
In the Publish section, you can find and copy your quiz HTML snippet and paste it into any HTML element.
What is an HTML element?
An HTML element means is any area that accepts HTML. For example, Shopify pages and collection descriptions can accept HTML. Here's an example of toggling the HTML area on a Shopify page and on a collection description to add your code snippet.
Add the quiz button code snippet
Showing the HTML area on a Shopify page. You can add this code snippet anywhere that accepts HTML.
⚠️ Note: This will not work if you paste your code snippet into a regular text area that does not render HTML.
Just paste the quiz button code snippet into the HTML area.
Save the page (or wherever you're adding the code snippet), and your quiz will appear.
Additional options to customize the quiz button when using code snippet
When using the quiz button with a code snippet, you can customize the following:
The quiz background color
The button text for users who have already taken your quiz
Customize the quiz background color using a code snippet
Change the background color of the quiz by adding data-modal-style="background-color: #add-your-color-here" to your code snippet. Here's an example in a code snippet:
<div class="ps-quiz-button" data-key="5b7309f5b78d" data-modal-style="background-color: #fbeddf">Start Quiz</div>
Customize the button test for users who've taken the quiz
Change the button text users see when they've already taken the quiz. By default, this is 'View Results' but you can change it by adding data-completed-button-text="New Text Here" to your code snippet. Here's an example in a code snippet:
<div class="ps-quiz-button" data-key="5b7309f5b78d" data-completed-button-text="New Text Here">Start Quiz</div>
Video walkthrough of adding a quiz button with a code snippet
If you have any questions or issues, just reach out to our team!