Publishing your quiz
Publish your quiz so it's live and discoverable to your customers.
When you’ve finalized your quiz, you can publish it to your store through several methods. You can add your quiz to a page, add it as a section on a page, embed it as a pop-up, and embed it as a code snippet.
Once you've published your quiz in any of the available methods, it will be live and discoverable to your customers.
In this section
Making your quiz live
You need to make your quiz live on your store before you can publish it to any other location.
Steps:
From the Quiz Kit app, click My Quizzes, then click Customize on the quiz that you want to publish.
On the left-side menu, click the globe icon to navigate to the Publish settings.
By default, your quiz is in draft mode. Click the toggle beside
Ready to publishto publish your quiz.
Once your quiz is live, additional publication options appear below.
By default, a quiz that you publish to your store creates a new page in the Pages section of your Shopify admin and a live customer-facing page in your store.
Your quiz's unique page is only discoverable to customers if you give them the page link or if you publish it by any of the methods detailed below.
Publishing your quiz on a page
By default, making your quiz live as detailed above automatically creates a page in the Pages section of your Shopify admin. You can further edit and publish this standalone page to your preference.
Steps:
From the Publish menu in the Quiz Kit app, go to the Add to a page section.
To preview the quiz on your page with the current publication settings, click Preview page. When you’re done, click Close preview to exit the preview mode.
If you want to make edits to your page settings before publication, then take note of what page name displays beside Published on. You can then locate it in the Pages section of the Shopify admin.
Click on the page you want to edit, make any changes you want, and then click Save.
Your quiz displays on the selected page.
You can also choose to hide this page when your quiz is published by clicking the Visible button and selecting Hidden from the drop-down.
Publishing as a section on a page
You can add your quiz as a section on a page. You need to follow different instructions depending on whether your current store theme is an Online Store 2.0 theme or a Vintage theme. Learn more about Shopify’s theme versions.
Add a section to Online store 2.0
Steps:
From the Publish menu in the Quiz Kit app, go to the Add as a section to a page section, then click View instructions.
Under step 1: Copy your quiz key, click the clipboard icon to copy it.
Under step 2, click Select theme and then click the theme that you want to add the section to.
Click Add to theme. This launches a new tab with the theme editor.
By default, the section is added to your homepage, but you can move it to any page in the theme editor.
Under Apps, click the new section block to open the settings, and paste the previously copied quiz key in the Quiz key field. The quiz displays in the preview modal of your theme editor. You can drag the section to reorder if needed.
Click Save.
Add a section to a Vintage theme
Part 1: Add a new template to your theme
From the Publish menu in the Quiz Kit app, click Add as a Section on a page.
Click Vintage themes from the tabs at the top of the section.
Click Copy under the block of code to copy it to your clipboard.
From the Shopify admin, click Online Store.
Click Themes, then click … to display more options, then click Edit code.
Click Sections, then click Add a new section.
Ensure liquid is selected, and enter quiz-kit-app under File name.
Click Done.
Select and delete all the code in the new template that you’ve created.
Paste the previously copied code from your clipboard into the blank template.
Click Save.
Part 2: Add the section to your theme
From the app instructions page, in section 2, click Copy to copy your quiz code.
In the theme editor, go to the page you want to embed the quiz on.
Under Template, click Add a section.
Click Apps to search from the correct list, then select Quiz from the list of apps.
Click the new section block to open the settings, and paste the previously copied quiz key in the Quiz Key field. The quiz displays in the preview modal of your theme editor. You can drag the section to reorder if needed.
Click Save.
Embedding your quiz as a code snippet
Steps:
From the Publish menu in the Quiz Kit app, go to the Embed with code snippet section, then click View instructions.
Under step 1: Copy the code, click the clipboard to copy the snippet to your clipboard.
Under step 2, click Select theme, then click the theme that you want to add the section to.
Click Edit theme code. This launches the theme code editor in a new tab.
Click the file in your theme that you want to add the code to, then paste the code.
Click Save.
Embedding your quiz as a page pop-up
You can embed your quiz so that it pops up when your customer navigates to a specific page, or if you have an Online Store 2.0 theme, if they click on a specific button. There are different setup methods for each option.
Steps:
From the Publish menu in the Quiz Kit app, go to the Embed as a popup section, then click View instructions.
Under step 1: Copy your quiz key, click the clipboard icon to copy it.
Navigate to the Online Store > Content > Menus section of your Shopify admin.
Select a menu item, then click Add menu item.
Paste your previously copied code from the clipboard into the Link field.
The Label field will auto-populate. To change it, click the field and edit the text.
Click Save.
Last updated
Was this helpful?