If you prefer, you can check out this information in video format.

To start embedding your quiz anywhere in your store, you need to copy the quiz key. You'll use this key inside the Theme Editor to insert the quiz.

Embedding the quiz as a block in your Theme Editor

Once you've copied the key, go to Theme Editor. You can choose which page you want to embed the quiz on from the drop down menu at the top of the page.

Scroll though the elements of the page and add the PPF Quiz block on any section where you want to display the quiz as an embedded element.

After you add the app as a block, on the right-hand side menu, you'll need to paste the Quiz Key in the Quiz Sub-URL input box. Once you save, the quiz is visible immediately.

The automatically enabled Auto Height option ensures that each page adjusts its height depending on the content of that particular question to avoid scroll bars; however, you can still customize specific elements such as margins, width or set a specific height.

Creating a dedicated Quiz Page

Using the same method to embed the quiz as a block, you can also create a dedicated page for it. You can then customize this quiz page from the Theme Editor same as you would any other page in your store.

To start, go to Online Store -> Pages and create a dedicated quiz page that you can leave empty.

In this example, we're not only creating this page but adding it as an navigation menu element in the Header for easy access.

In order to do this, you need to go to Navigation-> Main Menu .

There you will need to Add a new element, give it a name, in our example we used Perfect Pillow Quiz, and include the URL link to the page we have previously created with the same name.

To make the Perfect Pillow Quiz a seamless, complete quiz page and have your customers always on your store while also taking them through the perfect quiz experience, we can use the Theme Editor and add elements to the page as you would to any other in the store.

It's important to make sure to hide the title of the page that by default, is at the top of any new one we create. In order to do so we can use the Theme Editor and Hide the page's title.

We can use the Theme Editor to add a few other sections that complement the quiz block, while keeping the focus point on it.