Making your quiz full-width

You can adjust the width of your quiz so that it looks better on your store's page.

If you published your quiz and it doesn't look how it should on your page, you can add code to increase the width to full-width.

In this section

• Applying a new template to your quizzes

  • Part 1: Create a new page template

  • Part 2: Apply the new template to a page

---

Applying a new template to your quizzes

There are two parts to this tutorial. In Part 1 you create a template, and in Part 2 you apply the template to your quiz page.

Part 1: Create a new page template

After you have published your quiz on any page, then you need to add a page template to your theme.

Steps:

1. From the Shopify admin, click Online Store.

2. Click the ellipses (...), then click Edit code.

3. From the theme code editor under templates, click + Add a new template.

4. Enter a file name for this template, like page.quiz-kit.liquid.

5. Copy the following code: {{ page.content }}.

6. Click on your new template and paste the code you copied at the top of it.

7. Click Save.

Part 2: Apply the new template to a page

After adding the new template to your theme, you need to switch your quiz page's template to the new one.

1. Navigate to the page that your quiz is on in your Online Store > Pages section.

2. Under the Online store section, under Theme template, click the drop-down and select your newly created template.

3. Click Save.

You only need to create this template once, and then you can apply it to all your quizzes by repeating the steps in Part 2.