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
This quiz is currently in draftto 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, click Add to Page.
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 click Edit. The page settings from the Shopify Admin displays.
Make any page edits, then click Save.
Your quiz displays on the selected page.
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 if 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, click Add as a Section on a page.
Click Copy beside the code shown in step 1 of the instructions displayed in the app.
From the Shopify admin, click Online Store > Themes > Customize.
In the theme editor, go to the page you want to embed the quiz onto.
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.
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 onto.
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 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 set up methods for each option.
Steps:
From the Publish menu in the Quiz Kit app, click Embed in a popup.
From the Appear on page tab, click Copy to copy the code for your quiz.
In the Shopify admin, go to Content > Menus.
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 in the field and edit the text.
Click Save.
Embedding your quiz as a button (Online Store 2.0)
Steps:
From the Publish menu in the Quiz Kit app, click Embed in a popup.
From the Appear as button (Online Store 2.0 themes) tab, click Copy to copy the code for your quiz.
From the Shopify admin, click Online Store > Themes > Customize.
In the theme editor, go to the page you want to embed the pop-up button in.
Navigate to the section where you want to embed the pop up and click Add section.
Click Apps to search from the correct list, then select "Start Quiz" button from the apps list.
Click the new section block to open the settings, and paste the previously copied quiz key in the Quiz Key field. You can change styles and settings if needed.
Click Save.
Embedding your quiz as a code snippet
Steps:
From the Publish menu in the Quiz Kit app, click Embed with code snippet.
Click Copy below the snippet of code to copy it to your clipboard.
Navigate to Online Store > Themes, then click … to display more options, then click Edit code.
Select any liquid code template that you want to embed the button into.
Paste the code snippet in the location of your choice.
Click Save.
Last updated
Was this helpful?