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 Publishing your quiz on a page Publishing as a section on a page Embedding your quiz as a pop-up Embedding your quiz as a code snippet

---

Making your quiz live

You need to make your quiz live on your store before you can publish it to any other location.

Steps:

1. From the Quiz Kit app, click My Quizzes, then click Customize on the quiz that you want to publish.

2. On the left-side menu, click the globe icon to navigate to the Publish settings.

3. By default, your quiz is in draft mode. Click the toggle beside This quiz is currently in draft to 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:

1. From the Publish menu in the Quiz Kit app, click Add to Page.

2. 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.

3. If you want to make edits to your page settings before publication, then click Edit. The page settings from the Shopify Admin displays.

4. Make any page edits, then click Save.

Your quiz displays on the selected page.

Note: If you want your quiz to be full-width on your pages, you can create a new template. You can apply the same template to any quiz page. Learn more about making your quiz full-width.

---

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.

Note: A video version of this tutorial is available.

Add a section to Online store 2.0

Steps:

1. From the Publish menu in the Quiz Kit app, click Add as a Section on a page.

2. Click Copy beside the code shown in step 1 of the instructions displayed in the app.

3. From the Shopify admin, click Online Store > Themes > Customize.

4. In the theme editor, navigate to the page you want to embed the quiz onto.

5. Under Template, click Add a section.

6. Click Apps to search from the correct list, then select Quiz from the list of apps.

7. 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.

8. Click Save.

Add a section to a Vintage/Legacy theme

Part 1: Add a new template to your theme

1. From the Publish menu in the Quiz Kit app, click Add as a Section on a page.

2. Click Legacy themes from the tabs at the top of the section.

3. Click Copy under the block of code to copy it to your clipboard.

4. From the Shopify admin, click Online Store.

5. Click Themes, then click … to display more options, then click Edit code.

6. Click Sections, then click Add a new section.

7. Ensure liquid is selected, and enter quiz-kit-app under File name.

8. Click Done.

9. Select and delete all the code in the new template that you’ve created.

10. Paste the previously copied code from your clipboard into the blank template.

11. Click Save.

Note: If you later uninstall the Quiz Kit app, this template will also need to be deleted.

Part 2: Add the section to your theme

1. From the app instructions page, in section 2, click Copy to copy your quiz code.

2. In the theme editor, navigate to the page you want to embed the quiz onto.

3. Under Template, click Add a section.

4. Click Apps to search from the correct list, then select Quiz from the list of apps.

5. 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.

6. 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.

Note: This feature is available for Middle plan and higher.

Steps:

1. From the Publish menu in the Quiz Kit app, click Embed in a popup.

2. From the Appear on page tab, click Copy to copy the code for your quiz.

3. Navigate to the Online Store > Navigation section of your Shopify Admin.

4. Select a menu item, then click Add menu item.

5. Paste your previously copied code from the clipboard into the Link field.

6. The Label field will auto-populate. To change it, click in the field and edit the text.

7. Click Save.

---

Embedding your quiz as a button (Online Store 2.0)

Steps:

1. From the Publish menu in the Quiz Kit app, click Embed in a popup.

2. From the Appear as button (Online Store 2.0 themes) tab, click Copy to copy the code for your quiz.

3. From the Shopify admin, click Online Store > Themes > Customize.

4. In the theme editor, navigate to the page you want to embed the pop-up button in.

5. Navigate to the section where you want to embed the pop up and click Add section.

6. Click Apps to search from the correct list, then select "Start Quiz" button from the apps list.

7. 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.

8. Click Save.

---

Embedding your quiz as a code snippet

Steps:

1. From the Publish menu in the Quiz Kit app, click Embed with code snippet.

2. Click Copy below the snippet of code to copy it to your clipboard.

3. Navigate to Online Store > Themes, then click … to display more options, then click Edit code.

4. Select any liquid code template that you want to embed the button into.

5. Paste the code snippet in the location of your choice.

6. Click Save.

Note: If you later uninstall the Quiz Kit app, this template will also need to be deleted.