# Publishing your quiz

When you’ve finalized your quiz, you can publish it to your store through several methods. You can [add your quiz to a page](#publishing-your-quiz-on-a-page), [add it as a section on a page](#publishing-as-a-section-on-a-page), [embed it as a pop-up](#embedding-your-quiz-as-a-pop-up), and [embed it as a code snippet](#embedding-your-quiz-as-a-code-snippet).&#x20;

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](#making-your-quiz-live)
* [Publishing your quiz on a page](#publishing-your-quiz-on-a-page)
* [Publishing as a section on a page](#publishing-as-a-section-on-a-page)
* [Embedding your quiz as a pop-up](#embedding-your-quiz-as-a-page-pop-up)
* [Embedding your quiz as a code snippet](#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.&#x20;

**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. &#x20;

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.&#x20;

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

***

## 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.&#x20;

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

{% hint style="info" %}
**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](https://support.quizkitapp.com/faqs/how-do-i-make-published-quiz-on-a-page-full-width).
{% endhint %}

***

## 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.](https://help.shopify.com/en/manual/online-store/themes/managing-themes/versions)

{% hint style="info" %}
**Note:** A [video version](https://www.dropbox.com/scl/fi/0m3j1geqtfr6j7wj79ole/Add-Quiz-as-a-section-themes-2.0.mov?rlkey=2kgqfyu4p4b103b6qs53onn9m\&e=1\&dl=0) of this tutorial is available.
{% endhint %}

### 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.&#x20;
3. From the Shopify admin, click **Online Store** > **Themes** > **Customize**.&#x20;
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 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 **Vintage 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**.

{% hint style="info" %}
**Note:** If you later uninstall the Quiz Kit app, this template will also need to be deleted.
{% endhint %}

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

{% hint style="info" %}
**Note:** This feature is available for Middle plan and higher.
{% endhint %}

**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.&#x20;
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**.&#x20;
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**.

{% hint style="info" %}
**Note:** If you later uninstall the Quiz Kit app, this template will also need to be deleted.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://support.quizkitapp.com/~/changes/175/build-and-publish/publishing-your-quiz.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
